/* Module visuals used by the English showcase. */
.visual-line { display: block; min-width: 0; color: #293e34; font-size: clamp(10px, 1.04vw, 12px); line-height: 1.45; font-weight: 550; letter-spacing: 0; overflow-wrap: anywhere; }
.visual-line + .visual-line { margin-top: 4px; color: #6a786f; font-size: clamp(9px, .95vw, 11px); font-weight: 400; }
.module-photo { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.module-photo.catalog-photo { max-width: none; width: 500%; height: auto; aspect-ratio: 3 / 2; border-radius: 0; }
.mock-store__item b > .module-photo.catalog-photo--cup, .eco-sheet__img b > .module-photo.catalog-photo--cup, .eco-sheet__thumbs i > .module-photo.catalog-photo--cup { left: -129%; top: -115%; }
.mock-store__item b > .module-photo.catalog-photo--basket { left: -176%; top: -88%; }
.mock-store__item b > .module-photo.catalog-photo--bowl { left: -223%; top: -117%; }
.mock-store__item b, .eco-sheet__img b, .eco-sheet__thumbs i, .eco-flow__page i { position: relative; overflow: hidden; }
.mock-store__item b > .module-photo, .eco-sheet__img b > .module-photo, .eco-sheet__thumbs i > .module-photo, .eco-flow__page i > .module-photo { position: absolute; inset: 0; }
.eco-store__banner { position: relative; isolation: isolate; overflow: hidden; }
.eco-store__banner > .module-photo { position: absolute; inset: 0; z-index: -2; }
.eco-store__banner::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #081b13c9, #081b1300 95%); pointer-events: none; }
.eco-store__banner > .visual-line { color: white; text-shadow: 0 1px 5px #0006; }
.eco-store__banner > .visual-line:first-of-type { font-size: clamp(12px, 1.25vw, 17px); line-height: 1.25; font-weight: 600; }
.eco-store__banner { min-height: 128px; align-content: end; }
.eco-store__banner b { display: none; }
.eco-store__cats span { width: auto; height: auto; padding: 3px 8px; font-size: 9px; color: #3a5143; }
.eco-store__cats span:first-child { color: white; }
.eco-sheet__pills i { width: auto; min-width: 0; height: auto; padding: 4px 6px; font-style: normal; font-size: 9px; }
.mock-store__item .visual-line { font-size: 11px; }
.mock-store__item .visual-line + .visual-line { font-size: 9px; }
.eco-flow__page .visual-line { font-size: 10px; }
.eco-flow__page .visual-line + .visual-line { font-size: 9px; }
.eco-sheet__fields { min-width: 0; }
.eco-sheet__field .visual-line { font-size: 11px; }
.crm-app__lines, .hr-profile__name, .hr-profile__docs-lines, .cu-notes__lines { min-width: 0; }
.crm-app__row, .crm-tl__item { min-height: 46px; }
.oa-form__input, .oa-msg { height: auto; min-height: 30px; }
.oa-form__input .visual-line, .oa-docs .visual-line, .oa-tasks__row .visual-line { font-size: 11px; }
.oa-msg .visual-line { font-size: 11px; }
.hr-profile__fields .visual-line { font-size: 11px; }
.hr-dir__row > .visual-line { font-size: 10px; }
.hr-dir__row > .visual-line + .visual-line { margin-top: 0; font-size: 9px; }

@media (max-width: 640px) {
  #ai-content > .media { aspect-ratio: 4 / 4.8; }
  .eco-store__banner { min-height: 85px; padding: 12px; }
  .mock-store__item .visual-line { font-size: 9px; }
  .mock-store__item .visual-line + .visual-line { display: none; }
  .eco-sheet__field .visual-line { font-size: 10px; }
  .crm-app__row .visual-line, .crm-tl__item .visual-line { font-size: 10px; }
  .crm-app__row .visual-line + .visual-line, .crm-tl__item .visual-line + .visual-line { font-size: 9px; }
  .hr-profile .visual-line { font-size: 10px; }
}

/* Advertising artwork: the same collection, composed for each actual placement. */
.campaign-art { position: relative; isolation: isolate; overflow: hidden; container-type: inline-size; background: #e9dec8; }
.campaign-art > .module-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.campaign-art::after { display: none; }
.campaign-copy { position: absolute; z-index: 2; top: 9%; left: 9%; right: 7%; display: grid; gap: 5px; color: #244136; text-align: left; font-family: var(--font-sans); line-height: 1.15; }
.campaign-copy small { font-size: clamp(6px, 3cqw, 10px); font-weight: 600; letter-spacing: .12em; }
.campaign-copy strong { font-size: clamp(11px, 8cqw, 28px); font-weight: 600; letter-spacing: -.04em; }
.campaign-copy > span { font-size: clamp(7px, 3.5cqw, 11px); line-height: 1.4; }
.ads-brief { left: 5%; width: 43%; }

/* Ecommerce campaign delivery: collection banner plus a vertical adaptation. */
.eco-store__banner { padding-right: 50%; }
.eco-store__banner::after { background: linear-gradient(90deg,#193b29b3,transparent); }
.eco-campaign-banner { position: absolute; left: 6%; top: 12%; width: 65%; aspect-ratio: 16/9; border-radius: 12px; box-shadow: var(--shadow-card); }
.eco-campaign-banner .campaign-copy { right: 50%; }
.eco-campaign-banner .campaign-copy strong { font-size: clamp(12px,5cqw,24px); }
.eco-campaign-story { position: absolute; right: 7%; top: 8%; width: 21%; aspect-ratio: 9/16; border-radius: 10px; box-shadow: var(--shadow-card); rotate: 4deg; }
.eco-campaign-story .campaign-copy > span { display: none; }
.eco-campaign-media .overlay { width: 250px; bottom: 6%; right: 8%; }

/* Service overview: a relevant visual for each service, kept within its linked card. */
.svc-visual { position: relative; overflow: hidden; isolation: isolate; height: 172px; width: 100%; margin: 2px 0 8px; border-radius: 10px; background: #e9eee5; }
.svc-visual > .module-photo { transition: transform .65s var(--ease-out); }
.svc-card:hover .svc-visual > .module-photo { transform: scale(1.035); }
.svc-visual-label { position: absolute; inset: auto 0 0; display: grid; gap: 3px; padding: 30px 14px 12px; color: white; background: linear-gradient(transparent,#08271be0); }
.svc-visual-label strong { font-size: 14px; }
.svc-visual-label span { font-size: 10px; opacity: .85; }
.svc-visual--ads { background: #183a30; }
.svc-visual-tag { position: absolute; bottom: 10px; left: 12px; color: white; font-size: 11px; }
.svc-visual--ai { background: #e4eddb; }
.svc-source { position: absolute; left: 5%; top: 11%; width: 40%; height: 68%; overflow: hidden; border-radius: 7px; box-shadow: var(--shadow-soft); }
.svc-source > span { position: absolute; inset: auto 0 0; padding: 6px; background: #183a30e8; color: white; font-size: 9px; }
.svc-answer { position: absolute; top: 22%; right: 5%; width: 54%; padding: 12px; border-radius: 10px; box-shadow: var(--shadow-soft); background: white; color: #244136; display: grid; gap: 5px; }
.svc-answer svg { width: 14px; height: 14px; color: #618146; }
.svc-answer strong { font-size: 11px; line-height: 1.3; }
.svc-answer > span:not([data-icon]), .svc-answer small { font-size: 9px; line-height: 1.35; }
.svc-answer small { color: #66804d; }
@media (prefers-reduced-motion: reduce) { .svc-visual > .module-photo { transition: none; } }
@media (max-width: 640px) {
  .ads-brief { width: 45%; left: 5%; padding: 12px; }
  .ads-brief .ui-card__meta { display: none; }
  .ads-brief .ui-card__title, .ads-brief .ui-row__label { font-size: 11px; }
  .ads-brief .ui-row { gap: 5px; padding: 9px 0; }
  .ads-brief .ui-row__main { gap: 6px; }
  .ads-brief .ui-check { width: 15px; height: 15px; }
  .eco-store__banner { padding-right: 45%; }
  .eco-store__banner > .visual-line:first-of-type { font-size: 11px; }
  .eco-store__banner > .visual-line + .visual-line { font-size: 8px; }
  .eco-campaign-media { aspect-ratio: 4/4.2; }
  .eco-campaign-banner { width: 73%; top: 8%; }
  .eco-campaign-story { width: 28%; top: 16%; right: 6%; }
  .eco-campaign-media .overlay { bottom: 5%; right: 6%; width: 215px; }
  .eco-campaign-banner .campaign-copy > span, .eco-campaign-banner .campaign-copy small { display: none; }
  .svc-visual { height: 190px; }
}