/* Shared presentation for every case and language. Product-specific files only
   arrange the original media; typography, navigation and the viewer live here. */
.case-page{min-width:0}
/* The opening shows the product first; full context follows below. */
.case-page .case-hero{padding:28px 0 0;scroll-margin-top:110px;--case-tone:#557de0}
.case-hero[data-art-tone=mint]{--case-tone:#429c8d}
.case-hero[data-art-tone=sand]{--case-tone:#b48c5c}
.case-hero[data-art-tone=violet]{--case-tone:#8874c4}
.case-hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(32px,5vw,72px)}
.case-hero-copy{min-width:0;padding-block:24px}
.case-hero-copy>.eyebrow{font-size:.75rem;line-height:1.65;max-width:48ch;margin-bottom:24px}
.case-hero h1{font-size:clamp(2.625rem,4.7vw,4.25rem);line-height:1.07;letter-spacing:-.055em;margin:0;overflow-wrap:break-word;text-wrap:initial}
.case-hero .page-title-mask{padding-block:.14em;margin-block:-.14em}
.case-subtitle{font-size:clamp(1rem,1.45vw,1.1875rem);line-height:1.7;color:var(--muted);margin:26px 0 0;max-width:36ch;text-wrap:pretty}
.case-hero-visual{min-width:0}
.case-hero-stage{position:relative;isolation:isolate;display:grid;place-items:center;aspect-ratio:1.24;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:color-mix(in srgb,var(--case-tone) 7%,var(--soft))}
.case-hero-stage::before,.case-hero-stage::after{content:"";position:absolute;pointer-events:none;border:1px solid color-mix(in srgb,var(--case-tone) 17%,var(--line));border-radius:18px}
.case-hero-stage::before{inset:17% 8% 20%;transform:rotate(6deg)}
.case-hero-stage::after{width:280px;height:280px;border-radius:50%;right:-160px;top:-170px}
.case-hero-screen{position:relative;z-index:1;width:88%;max-height:75%;min-width:0;margin:0;border-radius:12px;overflow:hidden;border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);background:#fff;box-shadow:0 16px 46px #15203824;transform-origin:center}
.case-hero-screen .case-image{border-radius:0}
.case-hero-screen img{display:block;width:100%;height:auto}
.case-hero[data-case-motion] .case-hero-screen{transform:translate3d(0,var(--art-y,0px),0) rotate(var(--art-turn,-1.8deg)) scale(var(--art-scale,.98))}
.case-hero[data-art-kind=illustration] .case-hero-stage{aspect-ratio:1.5}
.case-hero[data-art-kind=illustration] .case-hero-stage::before,.case-hero[data-art-kind=illustration] .case-hero-stage::after{display:none}
.case-hero[data-art-kind=illustration] .case-hero-screen{position:absolute;inset:0;width:100%;height:100%;max-height:none;border:0;border-radius:0;box-shadow:none;background:transparent;transform:none}
.case-hero[data-art-kind=illustration] .case-hero-screen .case-image{height:100%}
.case-hero[data-art-kind=illustration] .case-hero-screen img{height:100%;object-fit:cover;transform:scale(max(1,var(--art-scale,1)))}
.case-meta{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:0;margin:28px 0 0}
.case-meta>div{min-width:0}
.case-meta dt,.case-details dt{font-size:.6875rem;font-weight:600;color:var(--muted);margin-bottom:7px}
.case-meta dd{margin:0;font-size:.8125rem;line-height:1.65}
.case-context{max-width:850px;margin-top:64px}
.case-context>h2{font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.25;letter-spacing:-.035em;margin-bottom:20px}
.case-context-copy{min-width:0;max-width:850px}
.case-lead{color:var(--muted);font-size:var(--type-lead);line-height:1.85}
.case-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:28px 0 0}
.case-details>div:first-child:last-child{grid-column:1/-1}
.case-details dd{margin:0;font-size:.875rem;line-height:1.8;color:var(--muted)}
html[data-theme=dark] .case-hero-screen{box-shadow:0 18px 50px #0005}
.case-page .case-reading{margin-top:48px}
.case-page .case-article .case-copy{padding-top:24px;margin-bottom:28px}
.case-page .case-copy h2{font-size:clamp(1.75rem,2.7vw,2.5rem);line-height:1.2;max-width:32ch}
.case-page .case-copy p{font-size:1rem;line-height:1.85;max-width:70ch}
.case-page .case-section{scroll-margin-top:16px}
.case-page .case-gallery{display:grid;gap:24px;align-items:start;min-width:0}
.case-page .case-gallery.hero-screen{margin-top:32px}
.case-gallery figure{margin:0;min-width:0}
.case-image{display:block;border-radius:10px;overflow:hidden}
.case-image img{display:block;width:100%;height:auto;object-fit:contain}
.case-gallery figcaption{font-size:.8125rem;line-height:1.6;color:var(--muted);margin-top:14px}
.image-scroll-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.image-scroll-hint{display:flex;align-items:center;gap:10px;font-size:.8125rem;font-weight:600;line-height:1.5;color:var(--accent)}
.image-scroll-hint svg{width:28px;height:24px;flex:0 0 28px}
.image-scroll-frame{position:relative;min-width:0}
.image-scroll .case-image{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;overscroll-behavior-y:auto;touch-action:pan-x pan-y pinch-zoom}
.image-scroll[data-responsive-image] .case-image img{min-width:0}
.image-scroll-range{display:block;width:100%;height:44px;margin:4px 0 0;padding:0;background:transparent;cursor:ew-resize;appearance:none;-webkit-appearance:none;--scroll-position:0%}
.image-scroll-range::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(to right,var(--accent) var(--scroll-position),var(--line) var(--scroll-position))}
.image-scroll-range::-moz-range-track{height:8px;border-radius:8px;background:linear-gradient(to right,var(--accent) var(--scroll-position),var(--line) var(--scroll-position))}
.image-scroll-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:24px;height:24px;border:3px solid var(--card);border-radius:50%;background:var(--accent);margin-top:-8px;box-shadow:0 0 0 1px var(--accent)}
.image-scroll-range::-moz-range-thumb{width:18px;height:18px;border:3px solid var(--card);border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.image-scroll-toolbar[hidden],.image-scroll-range[hidden]{display:none}
.image-scroll[data-image-enhanced] .case-image{scrollbar-width:none}
.image-scroll[data-image-enhanced] .case-image::-webkit-scrollbar{display:none}
.image-scroll :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.image-scroll .image-scroll-range+figcaption{margin-top:4px}
@media(max-width:560px){.image-scroll-toolbar{gap:10px}.image-scroll-hint{font-size:.75rem;gap:8px}.image-scroll-hint svg{width:24px;flex-basis:24px}}
.case-page .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1100px){
 .case-hero h1{font-size:clamp(2.5rem,4.6vw,3.375rem)}
 .case-hero-grid{gap:32px}
}
@media(max-width:820px){
 .case-page .case-hero{padding-top:24px}
 .case-hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}
 .case-hero-copy{padding:0}
 .case-hero-copy>.eyebrow{margin-bottom:18px}
 .case-hero h1{font-size:clamp(2.25rem,6.9vw,3.5rem)}
 .case-hero-visual{width:100%;max-width:600px;justify-self:center}
 .case-hero-stage{aspect-ratio:1.4;border-radius:22px}
 .case-hero-screen{max-height:72%;width:86%}
 .case-subtitle{margin-top:20px;font-size:1.0625rem;max-width:46ch}
 .case-lead{font-size:1rem}
 .case-meta{margin-top:24px}
 .case-context{margin-top:40px}
 .case-details{gap:20px}
 .case-page .case-reading{margin-top:36px}
 .case-page .case-article .case-copy{padding-top:14px}
 .case-page .case-gallery.hero-screen{margin-top:28px}
}
@media(max-width:560px){
 .case-hero h1{font-size:clamp(2rem,8.6vw,2.75rem)}
 .case-hero-grid{gap:26px}
 .case-hero-stage{aspect-ratio:1.28;border-radius:20px}
 .case-meta{gap:14px}
 .case-details{grid-template-columns:minmax(0,1fr);gap:20px}
 .case-context{margin-top:36px}
 .case-gallery figcaption{font-size:.75rem}
}

@media(prefers-reduced-motion:reduce){.case-hero[data-case-motion] .case-hero-screen{transform:none}}

/* One mobile layout for every case: persistent contents and readable inline media. */
@media(max-width:820px){
 html:has(body[data-route^="cases/"]){scroll-padding-top:156px}
 .case-page .case-reading{display:block;margin-top:32px}
 .case-page .case-contents{position:sticky;top:84px;z-index:90;max-height:none;overflow:visible;margin:0 -2px 28px;padding:6px 8px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--card) 96%,transparent);backdrop-filter:blur(16px);box-shadow:0 6px 20px #0000000a;transition:top .2s var(--motion-ease)}
 body:has(.header[data-hidden=true]) .case-page .case-contents{top:8px}
 .case-page .case-contents>.eyebrow{display:none}
 .case-page .case-contents-links{position:relative;gap:4px;padding:0;border:0;overscroll-behavior-y:auto;touch-action:pan-x pan-y;scrollbar-width:none}
 .case-page .case-contents-links::-webkit-scrollbar{display:none}
 .case-page .case-contents-links a{min-height:44px;font-size:.75rem;line-height:1.5;padding:10px 12px;border-radius:9px}
 .case-page .case-contents-links a::before{display:none}
 .case-page .case-contents-links a:focus-visible{outline-offset:-2px}
 .case-page .case-article{max-width:none}
 .case-page .case-section{margin-bottom:44px;scroll-margin-top:8px}
 .case-page .case-hero,.case-page .scenario-section{scroll-margin-top:8px}
 .case-page .case-article .case-copy{padding-top:0;margin-bottom:22px}
 .case-page .case-copy h2{font-size:clamp(1.5rem,6vw,2rem);line-height:1.25;max-width:none;margin-bottom:18px;text-wrap:pretty}
 .case-page .case-copy p,.case-page .case-lead{font-size:1rem;line-height:1.75;max-width:none}
 .case-page .case-gallery{gap:20px}
 .image-scroll[data-responsive-image] .case-image img{min-width:900px}
 .image-scroll-hint{font-size:.75rem}
 .image-scroll-toolbar{gap:10px}
}
@media(prefers-reduced-motion:reduce){.case-page .case-contents{transition:none}}

.button.image-scroll-fit{flex:0 0 auto;margin-left:auto;min-height:44px;padding:10px 16px;font-size:.8125rem;white-space:nowrap;cursor:pointer}
.image-scroll-fit[hidden],.image-scroll-hint[hidden]{display:none}
.case-page .image-scroll[data-image-fit=true] .case-image img{min-width:0;width:100%;height:auto}

.image-scroll[data-image-overflow=true] .case-image{cursor:grab}
.image-scroll .case-image[data-image-dragging]{cursor:grabbing;user-select:none}
.image-scroll .case-image img{user-select:none;-webkit-user-drag:none;pointer-events:none}

/* Keep browsing guidance beside the controls, including on small screens. */
.case-page [data-case-carousel] .case-carousel-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:16px}
.case-page [data-case-carousel] .case-carousel-heading>span{min-width:0;font-size:.75rem;line-height:1.5;color:var(--muted);opacity:.85}
.case-page [data-case-carousel] .case-carousel-controls{flex:0 0 auto}
.case-page [data-case-carousel]:not([data-carousel-scrollable=true]) .case-carousel-heading{display:none}
.case-page [data-case-carousel][data-carousel-scrollable=false] [data-carousel-rail]{cursor:default}
@media(max-width:560px){
 .case-page [data-case-carousel] .case-carousel-heading{gap:12px}
 .case-page [data-case-carousel] .case-carousel-heading>span{font-size:.6875rem}
 .case-page [data-case-carousel] .case-carousel-controls{gap:8px}
 .case-page [data-case-carousel] [data-carousel-count]{min-width:44px}
}

/* Horizontal galleries must let vertical wheel and touch gestures reach the page. */
.case-page [data-case-carousel] [data-carousel-rail]{overscroll-behavior-x:contain;overscroll-behavior-y:auto}

/* Nói: authentic mobile captures, kept at a readable phone width. */
.case-page.noi .noi-mobile-gallery{grid-template-columns:repeat(2,minmax(0,360px));justify-content:center;gap:28px;max-width:748px;margin:28px auto 0}
.case-page.noi .noi-mobile-gallery>figure:only-child{grid-column:1 / -1;width:min(100%,360px);justify-self:center}
.case-page.noi .noi-mobile-gallery .case-image{padding:0;border-radius:20px;overflow:hidden;background:#f8f9f1;border:1px solid var(--border)}
.case-page.noi .noi-mobile-gallery img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}
@media(max-width:600px){.case-page.noi .noi-mobile-gallery{grid-template-columns:minmax(0,360px);gap:28px}.case-page.noi .noi-mobile-gallery>figure{width:100%}}