/* Project detail: shared Petr Bělík typography and navigation, real project UI. */
.case-page { color:#17201e }
.case-page .site > header { background:#0c1713 }
.case-page header:not(.is-scrolled) .links a { color:#f8f7f2 }
.case-page header .brand { color:#f8f7f2 }
.case-main { padding:0 }
.case-pad { padding:90px 5.47% }
.case-main h1,.case-main h2,.case-main h3 { font-family:'Roboto Condensed',Arial,sans-serif; margin:0; font-weight:800; letter-spacing:-.025em }
.case-main h2 { font-size:clamp(38px,5.4vw,76px); line-height:1.13 }
.case-main h3 { font-size:clamp(28px,3.6vw,48px); line-height:1.14 }
.case-main p { margin:0 0 20px }
.case-main figure { margin:0; min-width:0 }
.case-main img { display:block; width:100%; height:auto }
.case-main figcaption,.case-label,.case-topline,.case-hero-foot,.case-project-nav,.case-metadata dt { font-size:11px; line-height:1.7; letter-spacing:.14em; font-weight:400 }
.case-main figcaption { display:flex; justify-content:space-between; gap:16px; padding:18px 0; color:#59615c }
.case-main .case-label { margin-bottom:28px }
.case-hero { padding-top:128px; padding-bottom:36px; color:#f3f1eb; background:#0c1713 }
.case-topline { display:flex; justify-content:space-between; gap:24px; padding-bottom:60px; color:#b7c1b9 }
.case-hero-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:7%; align-items:end }
.case-hero h1 { font-size:clamp(72px,11.4vw,164px); line-height:.99; padding:.13em 0; letter-spacing:-.035em }
.case-intro { padding-bottom:18px }
.case-intro h2 { font-size:clamp(32px,3.9vw,54px); margin-bottom:26px }
.case-intro > p:not(.case-label) { font-size:17px; line-height:1.75; color:#c1cbc4; max-width:40ch }
.case-link { display:inline-flex; align-items:center; gap:24px; font-size:11px; letter-spacing:.12em; line-height:1.7; padding:16px 0; border-bottom:1px solid #647269 }
.case-link .arrow-icon,.case-live .arrow-icon { flex-shrink:0; width:25px; height:25px; transition:transform .2s }
.case-hero-foot { margin-top:55px; display:flex; justify-content:space-between; gap:20px; border-top:1px solid #344139; padding-top:22px; color:#b7c1b9 }
.case-opening { background:#e8e3dc; padding:50px 5.47% 0 }
.case-overview { padding-top:55px; padding-bottom:0 }
.case-metadata { display:grid; grid-template-columns:repeat(4,1fr); margin:0; border-bottom:1px solid #c9c7c0 }
.case-metadata div { padding:0 20px 30px 0 }
.case-metadata dt { color:#59615c; margin-bottom:12px }
.case-metadata dd { margin:0; font-size:16px; line-height:1.65 }
.case-role { display:grid; grid-template-columns:1fr 2fr; gap:7%; padding:30px 0; border-bottom:1px solid #c9c7c0 }
.case-role p:last-child { font-size:16px; line-height:1.75; max-width:67ch; margin:0 }
.case-role .case-label { margin:0 }
.case-split { display:grid; grid-template-columns:1fr 1fr; gap:10%; align-items:start }
.case-prose { max-width:48ch; font-size:17px; line-height:1.85; color:#505a54 }
.case-prose p:last-child { margin-bottom:0 }
.case-prose .case-lead { font-size:23px; line-height:1.5; color:#17201e }
.case-identity { background:#e7e2db }
.case-identity-detail { margin-top:65px; padding-top:42px; border-top:1px solid #bfbab2; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:10% }
.case-identity-detail figure { padding:30px; background:#f7f4f0 }
.case-identity-detail p { font-size:clamp(23px,3vw,38px); line-height:1.5; letter-spacing:-.035em }
.case-web-composition { display:grid; grid-template-columns: minmax(0,3fr) minmax(0,1fr); gap:5%; align-items:start; margin-top:55px }
.case-web-composition .case-mobile-shot { margin-top:100px }
.case-mobile-shot { max-width:390px }
.case-booking { color:#f3f1eb; background:#0c1713 }
.case-booking .case-prose { color:#bec9c1 }
.case-flow { display:grid; grid-template-columns:repeat(4,1fr); list-style:none; padding:0; margin:60px 0; border-top:1px solid #48564c; border-bottom:1px solid #48564c }
.case-flow li { padding:26px 22px 28px 0; position:relative }
.case-flow li+li { padding-left:24px; border-left:1px solid #48564c }
.case-flow li:not(:last-child)::after { content:'→'; position:absolute; right:16px; top:24px; color:#b8c6bb }
.case-flow span { font-size:12px; color:#b8c6bb; letter-spacing:.15em }
.case-flow h3 { font-size:28px; margin:28px 0 12px; letter-spacing:0 }
.case-flow p { font-size:14px; line-height:1.7; color:#bec9c1; margin:0 }
.case-booking-visual { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.7fr); gap:6%; align-items:center }
.case-booking figcaption { color:#b8c6bb }
.case-combination { border-top:1px solid #48564c; padding-top:50px; margin-top:55px }
.case-manage { margin-top:45px!important }
.case-manage img { max-height:660px; object-fit:cover; object-position:center }
.case-source-note { font-size:13px; line-height:1.75; max-width:78ch; color:#59615c; margin-top:12px!important }
.case-mobile-section { background:#e7e2db; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:14% }
.case-mobile-section h2 { margin-bottom:30px }
.case-mobile-section figure { justify-self:center }
.case-result { background:#0c1713; color:#f3f1eb }
.case-result h2 { max-width:22ch }
.case-result > p:not(.case-label) { font-size:18px; line-height:1.8; max-width:58ch; color:#c1cbc4; margin:35px 0 }
.case-live { display:flex; justify-content:space-between; align-items:center; gap:20px; border-bottom:1px solid #69796d; padding:28px 0; font-size:clamp(15px,2.6vw,32px); letter-spacing:-.02em; max-width:900px }
.case-live .arrow-icon { width:40px; height:40px }
.case-project-nav { display:flex; justify-content:space-between; gap:25px; padding-top:28px; padding-bottom:28px; background:#0c1713; color:#c1cbc4; border-top:1px solid #344139 }
.case-project-nav a { display:flex; align-items:center; gap:15px; min-height:44px }
.case-page a:focus-visible { outline:2px solid currentColor; outline-offset:5px }
@media(hover:hover) { .case-link:hover .arrow-icon,.case-live:hover .arrow-icon { transform:translate(3px,-3px) } .case-topline a:hover,.case-project-nav a:hover { text-decoration:underline; text-underline-offset:6px } }
@media(max-width:900px) {
 .case-pad { padding-top:65px; padding-bottom:65px }
 .case-hero { padding-top:110px; padding-bottom:30px }
 .case-hero-grid { grid-template-columns:1.15fr 1fr; gap:5% }
 .case-hero h1 { font-size:clamp(68px,11vw,100px) }
 .case-main h2 { font-size:44px }
 .case-intro h2 { font-size:32px }
 .case-intro > p:not(.case-label) { font-size:16px }
 .case-prose { font-size:16px }
 .case-metadata { grid-template-columns:1fr 1fr; gap:20px }
 .case-web-composition .case-mobile-shot { margin-top:50px }
 .case-flow h3 { font-size:23px }
 .case-flow li+li { padding-left:14px }
}
@media(max-width:620px) {
 .case-pad { padding:52px 6% }
 .case-hero { padding-top:104px; padding-bottom:28px }
 .case-topline { font-size:9px; gap:12px; padding-bottom:34px }
 .case-hero-grid,.case-split,.case-role,.case-identity-detail,.case-mobile-section { grid-template-columns:1fr; gap:28px }
 .case-hero h1 { font-size:clamp(64px,18vw,108px); margin-bottom:15px }
 .case-main h2 { font-size:clamp(34px,10.3vw,52px) }
 .case-intro h2 { font-size:34px }
 .case-main .case-label { font-size:10px; margin-bottom:20px }
 .case-hero-foot { margin-top:18px; font-size:9px }
 .case-opening { padding:24px 0 0 }
 .case-opening figcaption { padding:15px 6%; font-size:9px }
 .case-overview { padding-top:30px; padding-bottom:0 }
 .case-metadata { gap:15px }
 .case-metadata dd { font-size:14px }
 .case-metadata dt { font-size:10px }
 .case-metadata div { padding-bottom:22px }
 .case-role { gap:0; padding-bottom:25px }
 .case-identity-detail { margin-top:35px; padding-top:28px }
 .case-identity-detail figure { padding:20px }
 .case-identity-detail p { margin-bottom:0 }
 .case-web-composition { grid-template-columns:1fr; margin-top:35px; gap:30px }
 .case-web-composition .case-mobile-shot { width:72%; margin:0 auto }
 .case-main figcaption { font-size:9px; line-height:1.7 }
 .case-flow { grid-template-columns:1fr; margin:35px 0 }
 .case-flow li,.case-flow li+li { display:grid; grid-template-columns:35px 1fr; gap:6px 12px; padding:22px 28px 22px 0; border-left:0 }
 .case-flow li+li { border-top:1px solid #48564c }
 .case-flow h3 { margin:0; font-size:27px }
 .case-flow p { grid-column:2 }
 .case-flow li:not(:last-child)::after { content:'↓'; right:0; top:23px }
 .case-booking-visual { grid-template-columns:1fr; gap:30px }
 .case-booking-visual .case-mobile-shot { width:85%; margin:auto }
 .case-combination { margin-top:35px; padding-top:35px }
 .case-manage { margin-top:30px!important }
 .case-manage img { max-height:none; object-fit:contain }
 .case-mobile-section .case-mobile-shot { width:85% }
 .case-result > p:not(.case-label) { font-size:16px }
 .case-live { font-size:14px; letter-spacing:.02em; line-height:1.7 }
 .case-live .arrow-icon { width:28px; height:28px }
 .case-project-nav { padding-top:20px; padding-bottom:20px; font-size:9px; gap:16px }
}
@media(prefers-reduced-motion:reduce) { .case-page *, .case-page *::before, .case-page *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important } .case-link:hover .arrow-icon,.case-live:hover .arrow-icon { transform:none } }
.case-page .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0 }

/* Previous/next project navigation matching the Jitka case study. */
.case-project-nav-editorial { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9%; padding-top:38px; padding-bottom:38px }
.case-project-nav-editorial a { justify-content:space-between; padding:12px 0; text-decoration:none; min-width:0 }
.case-project-nav-editorial a > span { min-width:0 }
.case-project-nav-editorial small { display:block; font-size:11px; letter-spacing:.12em }
.case-project-nav-editorial strong { display:block; font-family:'Roboto Condensed',Arial,sans-serif; font-size:36px; font-weight:600; letter-spacing:-.02em; color:#f3f1eb; margin-top:8px }
.case-project-nav-editorial .arrow-icon { width:28px; height:28px; flex-shrink:0; transition:transform .2s }
@media(hover:hover) {
 .case-project-nav-editorial a:hover { text-decoration:none }
 .case-project-nav-editorial a:hover strong { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:7px }
 .case-project-nav-editorial a:hover .arrow-icon { transform:translate(3px,-3px) }
 .case-project-nav-editorial a:first-child:hover .arrow-icon { transform:translate(-3px,3px) }
}
@media(max-width:620px) {
 .case-project-nav-editorial { gap:24px; padding-top:24px; padding-bottom:24px }
 .case-project-nav-editorial small { font-size:10px; letter-spacing:.07em }
 .case-project-nav-editorial strong { font-size:30px; overflow-wrap:anywhere }
 .case-project-nav-editorial .arrow-icon { width:20px; height:20px }
}
@media(prefers-reduced-motion:reduce) { .case-project-nav-editorial a:hover .arrow-icon { transform:none } }