/* ============================================================
   SIGNATURE STUDIO FINAL — Práce (portfolio)
   Stejné tokeny, lišta, typografie a motion systém jako homepage
   a ceník. Každá realizace má vlastní vizuální příběh:
     RESACS    před a po → projetí webu → tři vstupy → jazyky → slova klienta
     Míkovice  logo → barvy se rozlijí do webu → písmo → telefon
     Koncepty  přepínání edic obalu
   Scroll-driven animace jen s @supports (animation-timeline) a bez
   omezeného pohybu. Jinak vše statické a čitelné.
   ============================================================ */

.bar__nav a[aria-current="page"] { border-bottom-color: currentColor; }
.chapter { font-size: clamp(1.375rem, 2.2vw, 1.875rem); letter-spacing: -0.03em; margin-bottom: .75rem; }
.chapter--light { color: #F0F0F0; }
.chapter--mk { color: #4A3A2E; }
.page-prace a:not(.btn):not(.path):not(.bar__cta):not(.path__link) { text-underline-offset: 4px; }

/* ---------- Úvod a rejstřík ---------- */
.phead { background: var(--ink); color: #F0F0F0; padding: clamp(4rem, 9vh, 7rem) var(--pad) clamp(2.5rem, 5vw, 4rem); }
.phead__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(1rem, 2vw, 2rem); row-gap: clamp(2rem, 4vw, 3rem); align-items: end; }
.phead__title { grid-column: 1 / span 8; font-size: clamp(3rem, 9.4vw, 136px); line-height: .98; letter-spacing: -0.045em; }
.phead__lead { grid-column: 9 / span 4; color: rgba(240,240,240,.84); font-size: clamp(1rem, 1.3vw, 1.125rem); padding-bottom: .75rem; }
.pindex { grid-column: 1 / -1; }
.pindex ol, .tour__notes { list-style: none; }
.pindex ol { border-top: 1px solid var(--line-dark); }
.pindex li { border-bottom: 1px solid var(--line-dark); }
.pindex a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 2fr); gap: .25rem 1.5rem; align-items: baseline; padding: 1.1rem 0; text-decoration: none; transition: padding var(--t-comp) var(--ease), color var(--t-micro) var(--ease); }
.pindex__name { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.5rem); letter-spacing: -0.035em; line-height: 1.05; }
.pindex__what { color: rgba(240,240,240,.78); font-size: .9375rem; }
.pindex__type { justify-self: end; font-size: .8125rem; color: var(--muted-dark); }
.pindex a:focus-visible { padding-left: .75rem; }
@media (hover: hover) { .pindex a:hover { padding-left: .75rem; } .pindex a:hover .pindex__name { color: #fff; } }
.pindex li:nth-child(n+3) .pindex__name { color: rgba(240,240,240,.62); }

/* Náhled sledující kurzor (jen myš; vypíná prace.js) */
.ipreview { position: fixed; left: 0; top: 0; z-index: 90; width: 300px; aspect-ratio: 16 / 10; pointer-events: none; opacity: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); transition: opacity var(--t-micro) linear; }
.ipreview.is-on { opacity: 1; }
.ipreview img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.ipreview img.is-swap { animation: preview-in var(--t-comp) var(--ease); }

/* ---------- RESACS ---------- */
.rs { background: var(--paper); }
.rs__head, .rs__before { max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.rs__head { padding-top: clamp(5rem, 10vw, 8rem); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(1rem, 2vw, 2rem); }
.rs__head > * { grid-column: 1 / -1; }
.rs__title { font-size: clamp(4.5rem, 19vw, 280px); line-height: .82; letter-spacing: -0.06em; margin-left: -.04em; }
.rs__story { grid-column: 1 / span 8; margin-top: 1.25rem; font-family: var(--display); font-weight: 500; font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.3; letter-spacing: -0.02em; }
.rs__scope { grid-column: 1 / -1; margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem 2rem; border-top: 1px solid var(--ink); padding-top: 1.1rem; }
.rs__scope dt { font-size: .8125rem; font-weight: 600; color: var(--muted); margin-bottom: .2rem; }
.rs__scope dd { font-size: 1rem; }
.rs__scope a { font-family: var(--display); font-weight: 600; display: inline-block; padding: .3rem 0; }

.rs__before { padding-top: clamp(4rem, 8vw, 6rem); padding-bottom: clamp(4rem, 8vw, 6rem); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(1rem, 2vw, 2rem); row-gap: 2rem; align-items: start; }
.rs__need { grid-column: 1 / span 4; position: sticky; top: 6rem; }
.rs__need p { color: #333; }
.rs__hint { margin-top: 1rem; font-size: .875rem; color: var(--muted) !important; }
.ba { grid-column: 5 / span 8; }
.ba__stage { position: relative; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; box-shadow: 0 30px 70px -30px rgba(0,0,0,.4); border: 1px solid var(--line); user-select: none; touch-action: pan-y; }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ba__img--after { clip-path: inset(0 0 0 var(--pos)); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--white); box-shadow: 0 0 0 1px rgba(0,0,0,.15); pointer-events: none; }
.ba__handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 24px no-repeat; box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: transform var(--t-micro) var(--ease); }
.ba__stage:has(.ba__range:focus-visible) .ba__handle::after { outline: 2px solid var(--red); outline-offset: 3px; }
/* myš a dotyk obsluhuje ss-prace.js (Pointer Events), range zůstává pro klávesnici a čtečky */
.js .ba__stage { cursor: ew-resize; }
.ba__stage.is-drag .ba__handle::after { transform: scale(.92); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
/* štítek zmizí, jakmile je jeho strana užší než on sám (nepopisuje pak cizí vrstvu) */
.ba__tag { transition: opacity var(--t-micro) linear; }
.ba__stage.hide-l .ba__tag--l, .ba__stage.hide-r .ba__tag--r { opacity: 0; }
/* popisek: hlavní věta a nenápadný zdroj; poznámka o pořadí jen bez JS */
.ba__cap { margin: 0; font-size: .9375rem; color: #333; }
.ba__src { margin: .35rem 0 0; font-size: .75rem; color: var(--muted); }
/* na mobilu krátký štítek, aby se při předělu uprostřed vešel na svou stranu (datum je v popisku) */
@media (max-width: 640px) { .ba__tag-date { display: none; } }
/* do 600 px štítky nad plochou (nepřekrývají navigaci uvnitř screenshotů): vlevo původní, vpravo současný */
.ba__labels { display: none; }
@media (max-width: 600px) {
  .js .ba__labels { display: flex; justify-content: space-between; gap: 1rem; width: min(100%, calc(78svh * 780 / 1280)); margin: 0 auto .5rem; }   /* šířka jako plocha */
  .ba__labels span { padding: .3rem .45rem; border-radius: 4px; background: rgba(26,26,26,.82); color: #fff; font: 600 .6875rem/1 var(--display); }
  .ba__stage .ba__tag { display: none; }
}
.ba__nojs { display: none; }
html:not(.js) .ba__nojs { display: inline; }
@media (prefers-reduced-motion: reduce) { .ba__handle::after, .ba__tag { transition: none; } .ba__stage.is-drag .ba__handle::after { transform: none; } }
.ba__tag { position: absolute; top: 1rem; padding: .3rem .6rem; border-radius: 4px; background: rgba(26,26,26,.82); color: #fff; font: 600 .8125rem/1 var(--display); pointer-events: none; }
.ba__tag--l { left: 1rem; } .ba__tag--r { right: 1rem; }
.ba figcaption { margin-top: .8rem; font-size: .875rem; color: var(--muted); }
html:not(.js) .ba__range, html:not(.js) .ba__handle, html:not(.js) .rs__hint { display: none; }
html:not(.js) .ba__img--after { clip-path: none; position: relative; margin-top: 1rem; }
html:not(.js) .ba__stage { aspect-ratio: auto; overflow: visible; box-shadow: none; border: 0; }
html:not(.js) .ba__img { position: relative; height: auto; border-radius: 8px; }

/* Projetí webu: rám drží na místě, obsah stránky se posouvá se scrollem */
.tour { background: var(--ink); color: #F0F0F0; padding: clamp(5rem, 9vw, 7rem) var(--pad) clamp(3rem, 6vw, 5rem); view-timeline: --tour block; }
.tour__intro, .tour__body { max-width: var(--max); margin: 0 auto; }
.tour__intro { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(1rem, 2vw, 2rem); align-items: end; margin-bottom: 2rem; }
.tour__intro .chapter { grid-column: 1 / span 6; }
.tour__intro p { grid-column: 1 / span 6; color: rgba(240,240,240,.78); }
.tour__tabs { grid-column: 9 / span 4; justify-self: end; margin: 0; background: #2a2a2a; border-color: var(--line-dark); }
.tour__tabs button { color: rgba(240,240,240,.75); }
.tour__tabs.has-pill::before { background: var(--white); }
.tour__tabs button[aria-selected="true"] { color: var(--ink); }
.tour__body { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(1rem, 2vw, 2rem); }
.tour__stage { grid-column: 1 / span 8; position: sticky; top: 5.5rem; height: calc(100svh - 7rem); display: flex; align-items: center; justify-content: center; }
.tour__frame { --fw: 100%; --fh: min(100%, 520px); width: var(--fw); height: var(--fh); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); display: flex; flex-direction: column; transition: width 550ms var(--ease), height 550ms var(--ease), border-radius 550ms var(--ease); }
.tour__frame:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.tour__chrome { flex: none; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #EDEDED; color: #555; font: 500 .75rem/1 var(--body); transition: height 550ms var(--ease), opacity var(--t-comp) linear; }
.tour__chrome i { width: 9px; height: 9px; border-radius: 50%; background: #CFCFCF; }
.tour__chrome span { margin-left: auto; margin-right: auto; padding-right: 40px; }
.tour__screen { position: relative; flex: 1; overflow: hidden; container-type: size; }
.tour__img { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; transition: opacity var(--t-comp) linear; }
.tour__img--mob { opacity: 0; }
.tour[data-device="mob"] .tour__frame { --fw: min(300px, 70vw); --fh: min(100%, 600px); border-radius: 32px; box-shadow: 0 0 0 8px #0d0d0d, 0 40px 90px -30px rgba(0,0,0,.7); }
.tour[data-device="mob"] .tour__chrome { height: 0; opacity: 0; }
.tour[data-device="mob"] .tour__img--desk { opacity: 0; }
.tour[data-device="mob"] .tour__img--mob { opacity: 1; }
.tour__notes { grid-column: 9 / span 4; padding: 20vh 0 16vh; display: grid; gap: 30vh; }
.tour__notes li { border-top: 1px solid var(--line-dark); padding-top: 1rem; }
.tour__notes h4 { font-family: var(--display); font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: .4rem; }
.tour__notes p { color: rgba(240,240,240,.78); font-size: .9375rem; }
/* Bez scroll-driven animací (nebo s omezeným pohybem): obsah rámu lze posouvat ručně */
.tour__screen { overflow-y: auto; overscroll-behavior: contain; }
.tour__img { position: relative; }
.tour__img--mob { position: absolute; }
.tour[data-device="mob"] .tour__img--desk { position: absolute; }
.tour[data-device="mob"] .tour__img--mob { position: relative; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tour__screen { overflow: hidden; }
    .tour__img, .tour[data-device="mob"] .tour__img--desk, .tour[data-device="mob"] .tour__img--mob { position: absolute; }
    .tour__img { animation: tour-scroll linear both; animation-timeline: --tour; animation-range: contain 0% contain 100%; }
  }
}
@keyframes tour-scroll { from { transform: translateY(0); } to { transform: translateY(calc(-100% + 100cqh)); } }

/* Tmavé kapitoly RESACS */
.langs2, .rs__result { background: var(--ink); color: #F0F0F0; padding: clamp(3rem, 6vw, 5rem) var(--pad); }
.langs2__text p { color: rgba(240,240,240,.78); }

/* Jazykové verze: vějíř se při příjezdu rozloží do řady */
.langs2 { padding-top: clamp(3rem, 6vw, 5rem); }
.langs2__text, .langs2__fan { max-width: var(--max); margin-left: auto; margin-right: auto; }
.langs2__text { max-width: var(--max); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(1rem, 2vw, 2rem); margin-bottom: 2rem; }
.langs2__text > * { grid-column: 2 / span 6; }
.langs2__fan { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; view-timeline: --fan block; }
.langs2__fan li { position: relative; z-index: calc(4 - var(--i)); }
.langs2__fan img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 6px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.8); transition: transform var(--t-comp) var(--ease); }
.langs2__fan b { display: block; margin-top: .7rem; font-family: var(--display); font-weight: 600; }
.langs2__fan span { font-size: .8125rem; color: var(--muted-dark); }
@media (hover: hover) { .langs2__fan li:hover img { transform: translateY(-8px); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 641px) {
    .langs2__fan li { animation: fan-out linear both; animation-timeline: --fan; animation-range: entry 40% cover 45%; }
  }
}
@keyframes fan-out { from { transform: translateX(calc(var(--i) * (-100% - 1rem))) translateY(calc(var(--i) * 10px)) rotate(var(--r)); } to { transform: none; } }

/* Výsledek: slova klienta */
.rs__result { padding-top: clamp(4rem, 8vw, 6rem); padding-bottom: clamp(5rem, 9vw, 7rem); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(1rem, 2vw, 2rem); }
.rs__result > * { min-width: 0; }
.rs__result .chapter { grid-column: 2 / span 10; }
.rs__quote { grid-column: 2 / span 10; }
.rs__quote p { font-family: var(--display); font-weight: 500; font-size: clamp(1.625rem, 3.8vw, 3.25rem); line-height: 1.15; letter-spacing: -0.03em; text-indent: -.45em; }
.rs__quote mark { color: #fff; background: linear-gradient(var(--red), var(--red)) 0 94% / 100% 3px no-repeat; }
.motion [data-reveal="quote"] { opacity: 0; transform: translateY(20px); transition: opacity var(--t-enter) var(--ease), transform var(--t-enter) var(--ease); }
.motion [data-reveal="quote"].is-in { opacity: 1; transform: none; }
.motion [data-reveal="quote"] mark { background-size: 0% 3px; transition: background-size 600ms var(--ease-io) calc(450ms + var(--i, 0) * 250ms); }
.motion [data-reveal="quote"].is-in mark { background-size: 100% 3px; }
.rs__quote footer { margin-top: 1.25rem; color: var(--muted-dark); font-size: .9375rem; }
.rs__close { grid-column: 2 / span 10; margin-top: clamp(3rem, 6vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem 3rem; }
.rs__tech { color: rgba(240,240,240,.78); font-size: .9375rem; max-width: 30rem; }
.rs__tech b { color: #fff; }
.rs__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.rs__cta p { font-family: var(--display); font-weight: 600; font-size: 1.125rem; }

/* Předávka mezi realizacemi: tmavá se rozjasní do pudrové Míkovic */
.handoff { position: relative; height: 45vh; min-height: 260px; background: #F7EEEB; display: flex; align-items: flex-end; padding: 0 var(--pad) 2rem; overflow: hidden; view-timeline: --handoff block; }
.handoff__title { position: relative; z-index: 1; max-width: var(--max); width: 100%; margin: 0 auto; font-family: var(--display); font-weight: 700; font-size: clamp(3rem, 12vw, 180px); line-height: .85; letter-spacing: -0.055em; color: #E6CFC7; white-space: nowrap; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .handoff { background: var(--ink); }
    .handoff::before { content: ""; position: absolute; inset: 0; background: #F7EEEB; transform-origin: bottom; animation: handoff-bg linear both; animation-timeline: --handoff; animation-range: cover 10% cover 55%; }
    .handoff__title { animation: handoff-title linear both; animation-timeline: --handoff; animation-range: cover 20% cover 65%; }
  }
}
@keyframes handoff-bg { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes handoff-title { from { transform: translateY(45%); } to { transform: none; } }

/* ---------- STUDIO MÍKOVICE ---------- */
.mk { background: #F7EEEB; color: #3D2F25; }
.mk__head, .bloom, .mk__type, .mk__mobile, .mk__sum { max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.mk__head { padding-top: clamp(2rem, 4vw, 3rem); text-align: center; }
.mk__kicker { color: #6B5646; }
.mk__title { font-size: clamp(3rem, 9vw, 132px); line-height: .9; letter-spacing: -0.05em; color: #4A3A2E; }
.mk__story { max-width: 36rem; margin: 1.25rem auto 0; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: #5C4A3A; }

.bloom { padding-top: clamp(4rem, 8vw, 6rem); display: grid; justify-items: center; text-align: center; view-timeline: --bloom block; }
.bloom__mark { max-width: 34rem; display: grid; justify-items: center; gap: 1rem; position: relative; z-index: 2; }
.bloom__mark p { color: #5C4A3A; }
.bloom__plate { display: grid; justify-items: center; gap: 1rem; padding: 1.5rem 2.25rem 1.25rem; background: var(--white); border-radius: 10px; box-shadow: 0 20px 50px -30px rgba(92,74,58,.45); }
.bloom__plate img { width: 190px; }
.bloom__dots li { width: 26px; height: 26px; }
.bloom__shot { width: min(100%, 1040px); margin-top: 2.5rem; border-radius: 10px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(92,74,58,.6); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bloom__shot { animation: bloom-open linear both; animation-timeline: --bloom; animation-range: entry 70% cover 55%; }
  }
}
/* kruh vychází z místa, kde jsou barvy loga */
@keyframes bloom-open { from { clip-path: circle(4% at 50% 0%); } to { clip-path: circle(125% at 50% 0%); } }

.mk__type { padding-top: clamp(4rem, 8vw, 6rem); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(1rem, 2vw, 2rem); row-gap: 2rem; align-items: center; }
.mk__type-fig { grid-column: 1 / span 8; }
.mk__type-fig img { border-radius: 8px; box-shadow: 0 30px 60px -40px rgba(92,74,58,.6); }
.mk__type-text { grid-column: 9 / span 4; color: #5C4A3A; }

.mk__mobile { padding-top: clamp(4rem, 8vw, 6rem); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(1rem, 2vw, 2rem); row-gap: 2.5rem; align-items: center; }
.mk__mobile-text { grid-column: 1 / span 4; color: #5C4A3A; }
.phones { grid-column: 5 / span 8; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.75rem, 2vw, 1.75rem); align-items: start; view-timeline: --phones block; }
.phone { border-radius: 26px; border: 6px solid #4A3A2E; box-shadow: 0 30px 60px -30px rgba(60,20,30,.45); background: #fff; }
.phone:nth-child(2) { margin-top: 3rem; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .phone { animation: phone-drift linear both; animation-timeline: --phones; animation-range: cover 0% cover 100%; }
  }
}
@keyframes phone-drift { from { transform: translateY(var(--from)); } to { transform: translateY(var(--to)); } }

.mk__sum { padding-top: clamp(4rem, 8vw, 6rem); padding-bottom: clamp(5rem, 9vw, 7rem); }
.mk__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 2.5rem; border-top: 1px solid #4A3A2E; padding-top: 1.25rem; }
.mk__facts dt { font-size: .8125rem; font-weight: 600; color: #6B5646; margin-bottom: .3rem; }
.mk__facts dd { color: #3D2F25; }
.mk__facts a { color: #4A3A2E; font-weight: 600; }
.mk__cta { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.mk__cta p { font-family: var(--display); font-weight: 600; font-size: 1.125rem; color: #4A3A2E; }

/* ---------- VLASTNÍ TVORBA ---------- */
.own { background: var(--ink); color: #F0F0F0; padding: clamp(5rem, 9vw, 7rem) var(--pad); }
.own > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.own__head { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(1rem, 2vw, 2rem); row-gap: 1rem; align-items: end; margin-bottom: clamp(3rem, 6vw, 4.5rem); padding-top: 1.25rem; border-top: 1px solid var(--line-dark); }
.own__title { grid-column: 1 / span 7; font-size: clamp(2.5rem, 6vw, 88px); line-height: .95; letter-spacing: -0.045em; }
.own__head p { grid-column: 8 / span 5; color: rgba(240,240,240,.78); }
.concept { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(1rem, 2vw, 2rem); row-gap: 1.5rem; align-items: center; }
.concept + .concept { margin-top: clamp(4rem, 8vw, 6rem); }
.concept--lumina .concept__stage { grid-column: 1 / span 8; }
.concept--lumina .concept__text { grid-column: 9 / span 4; }
.concept--reviver .concept__text { grid-column: 1 / span 4; grid-row: 1; }
.concept--reviver .concept__stage { grid-column: 5 / span 8; }
.concept__stage { position: relative; aspect-ratio: 1600 / 872; border-radius: 8px; overflow: hidden; background: #111; }
.concept__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.concept__stage img.is-new { animation: edition-in 700ms var(--ease-io) both; }
.concept__stage[data-tilt] img { transition: transform 600ms var(--ease); }
@keyframes edition-in { from { clip-path: circle(0% at var(--ox, 50%) var(--oy, 100%)); } to { clip-path: circle(150% at var(--ox, 50%) var(--oy, 100%)); } }
.concept__label { font-size: .8125rem; color: var(--muted-dark); margin-bottom: .5rem; }
.concept__name { font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -0.04em; margin-bottom: .75rem; }
.concept__text > p:not(.concept__label):not(.concept__role) { color: rgba(240,240,240,.82); }
.concept__role { margin-top: .75rem; font-size: .875rem; color: var(--muted-dark); }
.editions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.editions button { min-height: 44px; padding: 0 1rem; border-radius: 4px; border: 1px solid rgba(240,240,240,.25); background: transparent; color: #F0F0F0; font: 600 .875rem/1 var(--display); cursor: pointer; transition: background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease); }
.editions button[aria-pressed="true"] { background: #F0F0F0; color: var(--ink); border-color: #F0F0F0; }
@media (hover: hover) { .editions button:hover { border-color: #F0F0F0; } }
html:not(.js) .editions { display: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  .phead__title, .phead__lead { grid-column: 1 / -1; }
  .pindex a { grid-template-columns: 1fr auto; }
  .pindex__what { grid-column: 1; grid-row: 2; }
  .pindex__type { grid-row: 1; }
  .rs__story { grid-column: 1 / -1; }
  .rs__need, .ba { grid-column: 1 / -1; position: static; }
  .tour__intro .chapter, .tour__intro p, .tour__tabs { grid-column: 1 / -1; justify-self: start; }
  .tour__tabs { margin-top: 1rem; }
  .tour__body { display: block; }
  .tour__stage { position: relative; top: auto; height: auto; }
  .tour__frame { --fh: 62svh; view-timeline: --frame block; }
  .tour[data-device="mob"] .tour__frame { --fh: 70svh; }
  .tour__notes { padding: 2rem 0 0; gap: 1.25rem; grid-template-columns: 1fr 1fr; }
  .langs2__text > *, .rs__result .chapter, .rs__quote, .rs__close { grid-column: 1 / -1; }
  .mk__type-fig, .mk__type-text, .mk__mobile-text, .phones { grid-column: 1 / -1; }
  .mk__facts { grid-template-columns: 1fr; }
  .concept--lumina .concept__stage, .concept--lumina .concept__text, .concept--reviver .concept__text, .concept--reviver .concept__stage { grid-column: 1 / -1; grid-row: auto; }
  .concept--reviver .concept__stage { grid-row: 1; }
  .own__title, .own__head p { grid-column: 1 / -1; }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .tour__img { animation-timeline: --frame; animation-range: cover 15% cover 85%; }
    }
  }
}

/* ---------- Mobil ---------- */
@media (max-width: 640px) {
  .phead { padding-top: 3.5rem; }
  .pindex a { padding: .9rem 0; }
  .rs__scope { grid-template-columns: 1fr 1fr; }
  .rs__scope div:first-child { grid-column: 1 / -1; }
  .ba__handle::after { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .tour__notes { grid-template-columns: 1fr; }
  .tour__frame { --fh: 56svh; }
  .langs2__fan { grid-template-columns: 1fr 1fr; row-gap: 1.5rem; }
  .handoff { height: 30vh; min-height: 180px; }
  .phones { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .phone { border-width: 4px; border-radius: 16px; }
  .phone:nth-child(2) { margin-top: 1.5rem; }
}

/* Rejstřík na tabletu a mobilu: název vlevo, typ vpravo, popis pod nimi */
@media (max-width: 1023px) {
  .pindex__name { grid-column: 1; grid-row: 1; }
  .pindex__type { grid-column: 2; grid-row: 1; align-self: center; }
  .pindex__what { grid-column: 1 / -1; grid-row: 2; }
}
/* Mobil: dva čitelnější telefony místo tří drobných */
@media (max-width: 640px) {
  .phones { grid-template-columns: 1fr 1fr; gap: 1rem; padding: 0 .5rem; }
  .phone:nth-child(3) { display: none; }
}

/* Podstránka bez loaderu: vstup nadpisu hned, i bez JS */
html:not(.loader-seen) .page-prace .hero-word { animation-delay: 0s; }
html:not(.loader-seen) .page-prace .hero-line:nth-child(2) .hero-word { animation-delay: .05s; }
html:not(.loader-seen) .page-prace .fade-in { animation-delay: .1s; }
/* Dotykové plochy ≥ 44 px */
.tour__tabs button { min-height: 44px; }
.rs__scope a { padding: .65rem 0; }
.page-prace .path__link { padding: .55rem 0; display: inline-block; }


/* ---------- Finální doladění ---------- */
/* Před a po: varianta bez archivního porovnání (data-compare="off") */
.rs__now { display: none; grid-column: 5 / span 8; }
.rs__now img { border-radius: 8px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.4); border: 1px solid var(--line); }
.rs__now figcaption { margin-top: .8rem; font-size: .875rem; color: var(--muted); }
[data-compare="off"] .ba, [data-compare="off"] .rs__hint { display: none; }
[data-compare="off"] .rs__now { display: block; }
@media (max-width: 1023px) { .rs__now { grid-column: 1 / -1; } }

/* Prohlídka bez JS: přepínač nefunguje, na mobilu rovnou mobilní náhled */
html:not(.js) .tour__tabs { display: none; }
@media (max-width: 640px) {
  html:not(.js) .tour__frame { --fw: min(300px, 78vw); --fh: 70svh; border-radius: 32px; box-shadow: 0 0 0 8px #0d0d0d, 0 40px 90px -30px rgba(0,0,0,.7); margin: 0 auto; }
  html:not(.js) .tour__chrome { height: 0; opacity: 0; }
  html:not(.js) .tour__img--desk { opacity: 0; position: absolute; }
  html:not(.js) .tour__img--mob { opacity: 1; position: relative; }
  .tour__stage { justify-content: center; }
  .tour[data-device="mob"] .tour__frame { --fw: min(300px, 78vw); }
}

/* Míkovice: kratší přechody mezi kapitolami (bez hluchých míst) */
.handoff { height: 32vh; min-height: 220px; }
.mk__head { padding-top: 1.5rem; }
.bloom { padding-top: clamp(3rem, 6vw, 4.5rem); }
.bloom__shot { margin-top: 2rem; }
.mk__type, .mk__mobile { padding-top: clamp(3rem, 6vw, 4.5rem); }
.mk__sum { padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(4rem, 8vw, 6rem); }
.phone:nth-child(2) { margin-top: 2rem; }
@media (max-width: 640px) { .handoff { height: 22vh; min-height: 150px; } }

/* Prohlídka pod 1024 px: poznámky nad rámem, rám se krátce přilepí, aby šel web v klidu přečíst */
@media (max-width: 1023px) {
  .tour__body { display: flex; flex-direction: column; }
  .tour__notes { order: -1; padding: 0 0 1.5rem; gap: 1rem; }
  .tour__notes li { padding-top: .75rem; }
  .tour__notes h4 { font-size: 1.0625rem; }
  .tour__stage { position: sticky; top: 4.75rem; height: calc(100svh - 6rem); display: flex; align-items: center; justify-content: center; }
  .tour__body::after { content: ""; display: block; height: 70svh; }
  .tour__frame { --fh: min(100%, 70svh); }
  .tour[data-device="mob"] .tour__frame { --fh: min(100%, 72svh); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 1023px) {
    .tour__img { animation-timeline: --tour; animation-range: contain 0% contain 100%; }
  }
}

/* Výkon: náhled za kurzorem a předěl před/po jen na kompozitoru (bez překreslování) */
.ipreview { will-change: transform; box-shadow: 0 24px 48px -20px rgba(0,0,0,.6); }
.ba__img--after { clip-path: none; }
.ba__clip { position: absolute; inset: 0; overflow: hidden; transform: translateX(var(--pos)); will-change: transform; }
.ba__clip .ba__img--after { transform: translateX(calc(-1 * var(--pos))); will-change: transform; }
.ba__handle-track { position: absolute; inset: 0; transform: translateX(var(--pos)); will-change: transform; pointer-events: none; }
.ba__handle { left: 0; }
html:not(.js) .ba__clip { position: relative; transform: none; overflow: visible; margin-top: 1rem; }
html:not(.js) .ba__clip .ba__img--after { transform: none; margin-top: 0; }
html:not(.js) .ba__handle-track { display: none; }

/* Desktop: rám drží zhruba 1,1 obrazovky, aby se tři části webu daly v klidu přečíst */
@media (min-width: 1024px) {
  .tour__notes { padding: 24vh 0 30vh; gap: 42vh; }
}

/* Před a po na mobilu: mobilní screenshoty obou verzí (čitelné), ne zmenšený desktop */
.ba__stage picture { display: contents; }
.ba__tag { font-size: .75rem; }
@media (max-width: 640px) {
  .ba__stage { aspect-ratio: 780 / 1280; max-height: 78svh; margin: 0 auto; }
  .ba__tag { top: .6rem; font-size: .6875rem; padding: .3rem .45rem; }
  .ba__tag--l { left: .6rem; } .ba__tag--r { right: .6rem; }
}
.ba figcaption a { color: inherit; }
/* Bez JS jsou verze pod sebou: štítky by popisovaly špatný obrázek, význam nese popisek */
html:not(.js) .ba__tag { display: none; }
html:not(.js) .ba__stage { max-height: none; aspect-ratio: auto; }
html:not(.js) .ba__where { font-size: 0; }
html:not(.js) .ba__where--l::before { content: "Nahoře"; font-size: .875rem; }
html:not(.js) .ba__where--r::before { content: "Dole"; font-size: .875rem; }

/* ============================================================
   REFINEMENT 2026-10-11
   ============================================================ */
/* Jazykové verze: tři aktuální weby (AT dočasně skryto, běží na staré verzi) */
.langs2__fan { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .langs2__fan { grid-template-columns: 1fr 1fr; } }

/* Telefony Míkovice: jednotný moderní rámeček (.device v ss.css) */
.phone.device { border: 0; border-radius: 15% / 7%; background: #1d1d1f; }
@media (max-width: 640px) { .phone.device { border: 0; border-radius: 15% / 7%; } }

/* Prohlídka webu, mobilní náhled: stejný rámeček jako ostatní telefony */
.tour__frame { position: relative; }
.tour[data-device="mob"] .tour__frame { border-radius: 44px; box-shadow: 0 0 0 7px #1d1d1f, 0 0 0 8px rgba(255,255,255,.1), 0 40px 90px -30px rgba(0,0,0,.7); }
.tour__frame::after { content: ""; position: absolute; z-index: 3; left: 50%; top: 10px; width: 30%; aspect-ratio: 3.6 / 1; transform: translateX(-50%); border-radius: 999px; background: #0b0b0c; opacity: 0; transition: opacity var(--t-comp) linear; pointer-events: none; }
.tour[data-device="mob"] .tour__frame::after { opacity: 1; }
@media (max-width: 640px) {
  html:not(.js) .tour__frame { border-radius: 44px; box-shadow: 0 0 0 7px #1d1d1f, 0 0 0 8px rgba(255,255,255,.1), 0 40px 90px -30px rgba(0,0,0,.7); }
  html:not(.js) .tour__frame::after { opacity: 1; }
}

/* ============================================================
   FINÁLNÍ REFINEMENT 11. 10. 2026
   ============================================================ */
/* Prohlídka RESACS: kratší prázdné úseky mezi poznámkami */
@media (min-width: 1024px) {
  .tour__notes { padding: 12vh 0 14vh; gap: 26vh; }
}
/* Předávka do Míkovic: jen barevný přechod, bez ghost titulku */
.handoff { height: 22vh; min-height: 140px; padding-bottom: 0; }
@media (max-width: 640px) { .handoff { height: 14vh; min-height: 100px; } }