/* =========================================================
   Sai Mai — Rozcestník (výběr pobočky)
   Requires css/base.css to be loaded first.

   The choice is the whole first screen: three photographs edge to edge,
   floor to ceiling, one per branch. No header, no navigation. On a
   crossroads page there is exactly one thing to decide — which door —
   and every other control on screen competes with it.

   The page is ONLY this. No section below the fold, no separate footer:
   the copyright and the vouchers link sit inside the gate so nothing has
   to scroll. Everything that used to follow — a "kde nás najdete" grid
   and a "proč Sai Mai" strip with stats and trust cards — is gone at the
   client's decision; the branch pages carry that ground.

   What that costs, recorded here so nobody has to rediscover it: this
   file is the root of the domain, the URL brand searches and external
   links land on, and it now holds one heading and three place names. The
   one thing that keeps it from being an empty room for a crawler is that
   the branch details below really are in the HTML — hidden by opacity
   and a zero-height grid row, never display:none — so they are read
   whether or not anyone hovers. Do not "optimise" that into display:none
   or into JS that injects them on hover.

   Every dimension, gap and line-height here is a multiple of 8.
   ========================================================= */

/* The screen is dark from top to bottom, so the document background
   is dark rather than the usual cream. */
.rozcestnik { background: var(--dark); }
.rozcestnik a:hover { color: var(--gold-light); }

/* =========================================================
   Brána — celá obrazovka, troje dveře
   ========================================================= */
.gate {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--dark);
  /* Placeholder weave in the page's own browns, for a branch whose
     photograph has not been shot yet (Karviná). */
  --stripe-dark: repeating-linear-gradient(-45deg, #241A11, #241A11 18px, #2C2117 18px, #2C2117 36px);
}

.gate__doors { display: flex; height: 100%; }

/* ---------------------------------------------------------
   Dveře
   --------------------------------------------------------- */
.door {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  color: inherit;
  /* The width change is the hover, so it gets the long, calm curve. */
  transition: flex-grow .7s var(--ease-out);
}
.door:hover { color: inherit; }

/* The seam between two doors, drawn as a gold hairline that fades out at
   both ends so it reads as light catching an edge rather than as a
   border. It draws itself downward on load, one after another — the same
   idea as the draw-in hairlines in base.css, just vertical and on a
   timer instead of on scroll, because the gate is above the fold and
   there is no scroll to hang it on. */
.door + .door::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    rgba(197, 160, 89, 0) 0%,
    rgba(197, 160, 89, .7) 18%,
    rgba(197, 160, 89, .7) 82%,
    rgba(197, 160, 89, 0) 100%);
  transform: scaleY(0);
  transform-origin: top;
  animation: seamDraw 1.1s var(--ease-out) .45s forwards;
}
.door:nth-child(3)::before { animation-delay: .6s; }

@keyframes seamDraw { to { transform: scaleY(1); } }

/* --pos re-frames a shot per branch: Opava's reception desk and lotus
   mural sit on the right of the photograph, so the crop is pulled over.

   The photographs are named here rather than passed in from the markup
   as --img. Browsers disagree about what a relative URL inside a custom
   property is relative to — Chrome resolves it against the stylesheet
   that *uses* the variable, the spec says the one that *declares* it —
   and for a page sitting at the site root those two are different
   directories, so an inline --img silently 404s. Declared and used in
   the same file, the path is unambiguous everywhere. */
.door__art {
  position: absolute;
  inset: 0;
  background-image: var(--stripe-dark);
  background-size: cover;
  background-position: 0 0;
  background-repeat: repeat;
  /* Two studios shot years apart under different light — pulled toward
     one warm, slightly held-back register so the three doors match.
     Hovering restores the photograph to itself. */
  filter: saturate(.86) brightness(.86);
  transform: scale(1.04);
  transition: transform 1s var(--ease-out), filter .6s var(--ease-out);
}
.door--ostrava .door__art,
.door--opava .door__art,
.door--karvina .door__art {
  background-size: cover, auto;
  background-position: var(--pos, center), 0 0;
  background-repeat: no-repeat, repeat;
}
/* Ostrava měla recepci se stolem a notebookem. Na fotce je ošoupaná zeď
   (žlutá skvrna vpravo od monitoru) a odřené křeslo v levém dolním rohu
   — obojí klientka reklamovala a retuší se to spolehlivě neopraví.
   Místo toho tu stojí masážní pokoj: ručníkové labutě, lotos a thajská
   rohož. Na dveřích rozcestníku dává navíc větší smysl — člověk vybírá
   pobočku podle toho, co ho uvnitř čeká, ne podle recepčního pultu.

   Původní fotka zůstává v assets/rozcestnik/ostrava.webp. Až budou nové
   snímky recepce, stačí sem vrátit tenhle soubor.

   --pos je posunutý mírně dolů: labutě i lotos leží v dolní třetině
   snímku a ve svislém výřezu dveří by z centrálního crop vypadly. */
.door--ostrava .door__art {
  --pos: center 62%;
  background-image: url("../assets/rozcestnik/ostrava-masazovna.webp"), var(--stripe-dark);
}
.door--opava .door__art {
  --pos: 68% center;
  background-image: url("../assets/rozcestnik/opava.webp"), var(--stripe-dark);
}
/* Karviná zatím nemá nafocené studio. Interiér Ostravy nebo Opavy by tu
   lhal, takže dveře nesou detail masáže — ruce a horký olej, nic, podle
   čeho by šlo poznat, ve kterém studiu fotka vznikla. Po focení sem
   patří assets/rozcestnik/karvina.webp. */
.door--karvina .door__art {
  --pos: center 38%;
  background-image: url("../assets/spolecne/Masáž_horkým_kokosovým_olejem.webp"), var(--stripe-dark);
}

/* Bottom-weighted, because that is where the name sits. Deliberately
   light at the top: the whole point of a floor-to-ceiling photograph is
   that you can see the studio in it. */
.door__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(20, 12, 5, .28) 0%,
    rgba(20, 12, 5, .18) 34%,
    rgba(20, 12, 5, .58) 68%,
    rgba(20, 12, 5, .88) 100%);
  transition: background .6s var(--ease-out);
}

.door__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: var(--s6) var(--s4) var(--s12);
  text-align: center;
}
/* Kapitálkový štítek „Pobočka“ nad jménem byl pryč — jméno města se
   ohlásí samo. Stav pobočky („Brzy otevíráme“) je skutečná informace,
   tak stojí POD jménem jako tichý podpis v kurzívě, ne nad ním. */
.door__note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: var(--lh3);
  color: var(--gold-light);
}
.door__name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 56px;
  line-height: var(--lh7);
  color: var(--cream-hi);
  text-shadow: 0 2px 24px rgba(20, 12, 5, .55);
  transition: transform .5s var(--ease-out);
}

/* ---------------------------------------------------------
   Ornament pod jménem

   Byla to holá zlatá čárka, která se na hover roztáhla — čistá, ale
   naprosto zaměnitelná; přesně to, čemu klientka říkala „moc basic".
   Teď je to dvojitá vlásková linka s kosočtvercem uprostřed: tentýž
   kosočtverec, kterým na branch stránkách začíná promo lišta, takže
   rozcestník mluví stejným jazykem jako zbytek webu.

   Kosočtverec je otočený čtverec z ::after, obě ramena jsou gradienty
   na ::before — nic z toho není znak z fontu ani SVG, takže to vypadá
   všude stejně.
   --------------------------------------------------------- */
.door__lotus {
  position: relative;
  display: block;
  width: 128px;
  height: 8px;
  /* Vyrůstá ze středu jména, stejně jako předtím čárka. */
  transform: scaleX(0);
  transition: transform .55s var(--ease-out);
}
.door__lotus::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right,
    rgba(197, 160, 89, 0) 0%,
    rgba(197, 160, 89, .85) 22%,
    rgba(197, 160, 89, .85) 78%,
    rgba(197, 160, 89, 0) 100%);
}
.door__lotus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--gold);
  transform: rotate(45deg);
  /* Zakrývá linku pod sebou, aby kosočtverec nebyl „navlečený" na drát. */
  box-shadow: 0 0 0 4px rgba(20, 12, 5, .55);
}

/* ---------------------------------------------------------
   Zlatý rám uvnitř dveří

   Tenká linka odsazená od hrany, která se na hover rozsvítí. Dělá ze
   tří fotek vedle sebe tři dveře — bez ní to byly jen tři výřezy.
   Nekreslí se přes celou plochu ani na mobilu: pointer-events: none,
   aby nikdy nesebral klik určený dveřím pod ním.
   --------------------------------------------------------- */
.door__frame {
  position: absolute;
  z-index: 1;
  inset: var(--s3);
  border: 1px solid rgba(197, 160, 89, .22);
  pointer-events: none;
  transition: border-color .6s var(--ease-out), inset .6s var(--ease-out);
}
/* ---------------------------------------------------------
   Odklápěcí panel s údaji o pobočce

   Height is animated with a grid row going 0fr -> 1fr rather than with
   max-height. max-height needs a guessed ceiling, and the guess is wrong
   the moment an address wraps to two lines at some width — either it
   clips the last line or it leaves the easing sitting on empty air. The
   grid row resolves to exactly the content's height at every width.

   Where support for interpolating fr is missing the panel still opens,
   just without the slide. That is the right way for this to fail: the
   address is information, not decoration.

   Padding lives on the children, never on .door__panel — padding on the
   clipped box would survive the row collapsing to zero and leave a gap
   under the rule at rest.
   --------------------------------------------------------- */
.door__reveal {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  transition: grid-template-rows .55s var(--ease-out);
}
.door__panel {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.door__facts {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  /* Odsazení nahoře drží text pod ornamentem, dole odděluje od tlačítka,
     které od téhle úpravy stojí pod panelem a je vidět pořád. */
  padding: var(--s2) 0 var(--s1);
  max-width: 30ch;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: var(--lh2);
  color: rgba(246, 236, 225, .78);
}

/* ---------------------------------------------------------
   Tlačítko Vstoupit

   Dvě věci se tu změnily oproti první verzi a obě na přání klientky:

   1. Je to tlačítko, ne slovo. Předtím to byl řádek verzálek uvnitř
      odklápěcího panelu — vypadal stejně jako popisky nad ním a nešlo
      poznat, že je to cíl kliknutí.
   2. Je vidět pořád, i bez najetí myší. Leží proto mimo .door__reveal:
      panel s adresou se pořád odklápí až na hover, ale tlačítko z něj
      vystoupilo ven a stojí pod ním natrvalo.

   Klikací zůstávají celé dveře (celý <a>), tlačítko je jen viditelný
   terč — proto nemá vlastní odkaz a nesmí mít pointer-events, jinak by
   dělal druhý cíl uvnitř prvního.
   --------------------------------------------------------- */
.door__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 56px;
  padding: 0 var(--s5);
  border-radius: 9999px;
  border: 1px solid rgba(197, 160, 89, .8);
  background: rgba(20, 12, 5, .34);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  line-height: var(--lh1);
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--cream-hi);
  white-space: nowrap;
  transition: background .4s var(--ease-out),
              border-color .4s var(--ease-out),
              color .4s var(--ease-out),
              transform .4s var(--ease-out);
}
/* Firemní šipka (--arrow v base.css), stejná jako na tlačítkách uvnitř
   webu — rozcestník byl jediné místo, kde chyběla. */
.door__cta::after {
  content: "";
  flex: none;
  width: 22px;
  height: 11px;
  background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
          mask: var(--arrow) center / contain no-repeat;
  transition: transform .35s var(--ease);
}
/* ---------------------------------------------------------
   Hover — pointer only

   Everything moves at once and it all says the same thing: this door is
   the one you are about to open. It widens, its photograph comes back to
   full colour and pushes in, the name lifts, the rule draws out from its
   middle, and the address, hours and phone unfold underneath. The other
   two step back rather than staying put, so the gate always reads as one
   choice being made.

   The panel's fade is held back by a beat (transition-delay) so the box
   is already opening when the type arrives, rather than both starting
   together and reading as one soft blur. The text itself never reflows
   during the widening: .door__facts is capped at 30ch, which is narrower
   than a door at every width where hover exists.

   Below 861px the doors are stacked rows and there is no pointer, so
   none of this applies — every door simply shows its details.
   --------------------------------------------------------- */
@media (hover: hover) and (min-width: 861px) {
  .gate__doors:hover .door { flex-grow: .86; }
  .gate__doors:hover .door .door__veil { background: linear-gradient(180deg,
    rgba(20, 12, 5, .5) 0%,
    rgba(20, 12, 5, .44) 34%,
    rgba(20, 12, 5, .74) 68%,
    rgba(20, 12, 5, .92) 100%); }

  .gate__doors .door:hover,
  .gate__doors .door:focus-within { flex-grow: 1.42; }

  .door:hover .door__art,
  .door:focus-within .door__art {
    filter: saturate(1) brightness(1);
    transform: scale(1.1);
  }

  .gate__doors:hover .door:hover .door__veil,
  .gate__doors:hover .door:focus-within .door__veil {
    background: linear-gradient(180deg,
      rgba(20, 12, 5, .2) 0%,
      rgba(20, 12, 5, .1) 34%,
      rgba(20, 12, 5, .52) 68%,
      rgba(20, 12, 5, .86) 100%);
  }

  .door:hover .door__name,
  .door:focus-within .door__name { transform: translateY(-4px); }

  .door:hover .door__lotus,
  .door:focus-within .door__lotus { transform: scaleX(1); }

  /* Rám se rozsvítí a povolí o kousek ven — dveře se otevírají. */
  .door:hover .door__frame,
  .door:focus-within .door__frame {
    inset: var(--s2);
    border-color: rgba(197, 160, 89, .6);
  }

  .door:hover .door__reveal,
  .door:focus-within .door__reveal { grid-template-rows: 1fr; }

  .door:hover .door__panel,
  .door:focus-within .door__panel {
    opacity: 1;
    transform: none;
    transition-delay: .14s;
  }

  /* Zlaté, plné, s dojezdem šipky. Jediný prvek na obrazovce, který
     na hover úplně změní barvu — tím se z „jednoho ze tří" stane
     „tenhle". */
  .door:hover .door__cta,
  .door:focus-within .door__cta {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--brown-deep);
    transform: translateY(-2px);
  }
  .door:hover .door__cta::after,
  .door:focus-within .door__cta::after { transform: translateX(4px); }

}

/* No pointer: nothing is ever hovered, so every door shows its full hand. */
@media (hover: none), (max-width: 860px) {
  .door__lotus { transform: scaleX(1); }
  .door__reveal { grid-template-rows: 1fr; }
  .door__panel { opacity: 1; transform: none; }
}

/* The mask-free layout means a normal focus ring works again — it just
   has to sit above the photograph. */
.door:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: -6px;
}

/* ---------------------------------------------------------
   Značka a pobídka ke scrollu — plavou nad dveřmi

   The logo is brand, not navigation, so it survives the header being
   removed. pointer-events: none keeps it from stealing a click that was
   meant for the door underneath it.
   --------------------------------------------------------- */
.gate__brand {
  position: absolute;
  z-index: 4;
  top: var(--s8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  width: max-content;
  max-width: calc(100% - 2 * var(--s5));
  text-align: center;
  pointer-events: none;
}
.gate__logo {
  height: 64px;
  width: auto;
  /* The logo lands on three different photographs at once; without this
     it dissolves into whichever one is brightest. */
  filter: drop-shadow(0 2px 12px rgba(20, 12, 5, .65));
}
.gate__claim {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: var(--lh1);
  letter-spacing: 2.24px;
  text-transform: uppercase;
  color: rgba(246, 236, 225, .68);
  text-shadow: 0 1px 8px rgba(20, 12, 5, .8);
}

/* Návod, ne claim — proto Lora kurzívou a bez verzálek: má se číst jako
   poznámka pod čarou, ne jako druhý slogan pod tím prvním. */
.gate__hint {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  line-height: var(--lh2);
  color: rgba(246, 236, 225, .5);
  text-shadow: 0 1px 8px rgba(20, 12, 5, .8);
}

/* The footer, such as it is. Bottom left rather than centre: the middle
   door's name block owns the centre line and the two would collide.
   Sitting inside the gate is what lets the page be exactly one screen
   with nothing to scroll to. */
.gate__foot {
  position: absolute;
  z-index: 4;
  left: var(--s6);
  bottom: var(--s5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
  max-width: calc(100% - 2 * var(--s6));
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: var(--lh1);
  text-shadow: 0 1px 8px rgba(20, 12, 5, .85);
}
.gate__footLink {
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold);
}
.gate__copy { color: rgba(246, 236, 225, .45); }

/* =========================================================
   Responsive — type steps down, line-heights stay on the 8px grid
   ========================================================= */
@media (max-width: 1180px) {
  .door__name { font-size: 44px; line-height: var(--lh5); }
}

@media (max-width: 980px) {
  .door__name { font-size: 36px; line-height: var(--lh5); }
  .door__body { padding-bottom: var(--s10); }
  .door__facts { font-size: 12px; }
  .door__lotus { width: 104px; }
  .door__cta { min-height: 48px; padding: 0 var(--s4); font-size: 14px; letter-spacing: 1.4px; }
  .gate__logo { height: 52px; }
}

/* Stacked: three rows instead of three columns. The gate stops being
   one screen here — three full-bleed photographs squeezed into a phone's
   height would be three letterbox slots with a word in each. */
@media (max-width: 860px) {
  .gate { height: auto; min-height: 0; }
  .gate__doors { flex-direction: column; height: auto; }
  /* Vyšší než dřív (288px): dveře teď nesou i tlačítko, které je tu
     vidět pořád, ne až po najetí myší. */
  /* flex-basis auto: dveře rostou s obsahem. S nulovým základem a pevnou
     min-height by se delší obsah (Karviná má řádek „Brzy otevíráme“
     navíc) ořízl nahoře — overflow:hidden a obsah přitlačený dolů. */
  .door { flex: 0 0 auto; min-height: 360px; min-height: 44svh; }
  .door__body { padding: var(--s6) var(--s4) var(--s6); }
  .door__frame { inset: var(--s2); }

  /* The seam turns horizontal and draws left to right, like every other
     hairline on the site. */
  .door + .door::before {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
    background: linear-gradient(to right,
      rgba(197, 160, 89, 0) 0%,
      rgba(197, 160, 89, .7) 18%,
      rgba(197, 160, 89, .7) 82%,
      rgba(197, 160, 89, 0) 100%);
    transform: scaleX(0);
    transform-origin: left;
    animation-name: seamDrawH;
  }

  /* Značka stojí NAD dveřmi, ne přes ně.
     Absolutní pozicování dává smysl jen na širokém displeji, kde dveře
     stojí vedle sebe a nad jejich jmény je uprostřed prázdno. Ve sloupci
     blok dosedl na první dveře a překryl jim „Pobočka / Ostrava".
     Odsazovat první dveře odshora nestačí: čím užší displej, tím víc
     řádků se claim i hláška zalomí, takže žádná pevná hodnota nesedí
     na všech šířkách. V normálním toku si blok řekne o přesně tolik
     místa, kolik zabere — na 320 px i na 860 px.
     Pořadí řeší order: v HTML jsou dveře první, aby na ně čtečka
     i vyhledávač narazily dřív než na dekoraci. */
  .gate { display: flex; flex-direction: column; }
  .gate__brand {
    position: static;
    order: -1;
    transform: none;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
    padding: var(--s6) var(--s4) var(--s5);
  }

  /* Stacked, the gate is taller than the window, so the footer stops
     floating and simply follows the last door. */
  .gate__foot {
    position: static;
    max-width: 100%;
    justify-content: center;
    padding: var(--s5) var(--s4) var(--s6);
    text-shadow: none;
  }
}

@keyframes seamDrawH { to { transform: scaleX(1); } }

@media (max-width: 640px) {
  .gate__logo { height: 44px; }
  .gate__claim { font-size: 12px; letter-spacing: 1.4px; }
  .gate__hint { font-size: 12px; }
  .door { min-height: 328px; min-height: 40svh; }
  .door__name { font-size: 32px; line-height: var(--lh4); }
  /* Přes celou šířku dveří — na telefonu je to jediný ovládací prvek
     na obrazovce, tak ať se do něj nedá netrefit. */
  .door__cta { align-self: stretch; justify-content: center; }
}

/* Short windows: the name block is the only thing that has to fit, so it
   simply sits closer to the floor. */
@media (max-height: 720px) and (min-width: 861px) {
  .gate { min-height: 480px; }
  .gate__brand { top: var(--s5); }
  .gate__logo { height: 48px; }
  .gate__hint { display: none; }
  .door__name { font-size: 40px; line-height: var(--lh5); }
  .door__body { padding-bottom: var(--s9); }
  .door__cta { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  /* The seams are simply there. */
  .door + .door::before { transform: none; }
}

/* Mobil: odkazy v patičce brány měřily 16 px na výšku — na prst málo. */
@media (max-width: 640px) {
  .gate__footLink { display: inline-flex; align-items: center; min-height: 40px; }
}