/* =========================================================
   Sai Mai — Ostrava / O nás
   Load after base.css and branch.css.

   The page leans on two Thai motifs that repeat across sections
   so the design reads as one system rather than a stack of blocks:
   the LOTUS ARCH, a pointed temple-window silhouette, framing every
   portrait.

   A CSS gold lattice used to sit behind the hero, the figures band and
   the owner card. It was removed — at full width it read as a visible
   crosshatch over the photography rather than as texture. Thai
   character now comes from the gold vector set instead.
   ========================================================= */

:root {
  /* Lotus arch: pointed at the top, square-ish at the base.
     Used sparingly — portraits only. Applying it to gallery tiles too
     made the page read as a gimmick rather than a motif. */
  --arch: 50% 50% 12px 12px / 62% 62% 12px 12px;
}

/* =========================================================
   Hero — photo, bottom-weighted scrim, floating gold motes
   ========================================================= */
.ohero {
  position: relative;
  min-height: 560px;   /* matches the Kontakt hero */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--s13) var(--edge);
  background: var(--hero-dark);
  overflow: hidden;
  isolation: isolate;
}
.ohero__bg {
  position: absolute;
  inset: -6% 0;
  z-index: -3;
  background-image: var(--hero-img), var(--stripe);
  background-size: cover, auto;
  background-position: center 30%, 0 0;
  background-repeat: no-repeat, repeat;
  transform: scale(1.06);
}
/* Scrim darkens from the bottom so the headline sits on shadow while
   the top of the photo stays readable. The previous version was a flat
   radial wash that muddied the whole image. */
.ohero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(to top, rgba(31, 22, 13, .92) 0%, rgba(31, 22, 13, .62) 45%, rgba(31, 22, 13, .38) 100%);
}

.ohero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  max-width: 840px;
  text-align: center;
}
.js .ohero__inner > * { animation: heroRise .9s var(--ease) both; }
.js .ohero__inner > *:nth-child(2) { animation-delay: .1s; }
.js .ohero__inner > *:nth-child(3) { animation-delay: .2s; }
.js .ohero__inner > *:nth-child(4) { animation-delay: .3s; }
.js .ohero__inner > *:nth-child(5) { animation-delay: .4s; }

.ohero__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 60px;
  line-height: var(--lh7);
  color: var(--cream-hi);
}
.ohero__lede {
  max-width: 600px;
  font-size: 17px;
  line-height: var(--lh3);
  color: var(--cream-mid);
}

/* The drifting gold motes that floated over the hero were removed —
   animated specks read as decoration for its own sake. */

/* Náš příběh now uses the shared .split component from branch.css.
   The "9 let praxe" medallion that sat on the photo was removed — the
   headline already says "Devět let", so the badge just repeated it. */


/* =========================================================
   Tým — owner banner + masérka cards
   ========================================================= */
.team { padding-bottom: var(--s4); }
/* Místo mřížky masérek, dokud tým pobočky není známý (Karviná před
   otevřením). Jedna klidná věta pod portrétem majitelky, ne prázdný
   rámeček s „foto brzy“. */
.team__note {
  margin: var(--s6) auto 0;
  max-width: 560px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  line-height: var(--lh3);
  text-align: center;
  color: var(--muted);
}
/* Three cards, capped so they don't stretch thin on wide screens. */
.team__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5);
  max-width: 1120px;
  margin: var(--s8) auto 0;
}
/* Opava má čtyři masérky, Ostrava tři. Na třísloupcové mřížce by
   čtvrtá karta zůstala trčet sama na druhém řádku, takže si Opava
   přidá tenhle modifikátor navíc — základní pravidlo výš zůstává,
   jak bylo, a ostravská stránka se nehne. Přepisují se jen sloupce
   a strop šířky (na 4 karty by 1120px bylo těsné).

   Musí zůstat NAD media queries — ty pak stejnou specificitou
   přepnou mřížku na 2 a 1 sloupec i téhle variantě. */
.team__grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: var(--content);
}
/* Karviná: dvě masérky zatím bez fotek — užší mřížka a karty jen
   s textem, aby dvě karty nestály osamocené v šíři pro tři. */
.team__grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
}
.tcard--text { padding: var(--s6) var(--s5); justify-content: center; }

/* ---------- Owner: dark banner, portrait left ---------- */
.owner {
  position: relative;
  display: grid;
  grid-template-columns: 380fr 900fr;
  align-items: center;
  gap: var(--s10);
  margin-top: var(--s8);
  padding: var(--s9) var(--s10);
  border-radius: var(--radius);
  background: var(--hero-dark);
  overflow: hidden;
}
.owner > * { position: relative; }

.owner__portrait { position: relative; }
.owner__photo {
  aspect-ratio: 3 / 4;
  border-radius: var(--arch);
  background-image: var(--img), var(--stripe);
  background-size: cover, auto;
  background-position: center, 0 0;
  background-repeat: no-repeat, repeat;
}
.owner__frame {
  position: absolute;
  inset: calc(-1 * var(--s2));
  border: 1px solid var(--gold);
  border-radius: var(--arch);
  opacity: .55;
  pointer-events: none;
}

.owner__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.owner__name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: var(--lh5);
  color: var(--cream-hi);
}
/* Role nestojí jako kapitálkový štítek NAD jménem, ale jako podpis pod
   ním — jméno je nadpis a ohlášení nepotřebuje. */
.owner__role {
  margin-top: calc(var(--s1) * -1);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: var(--lh3);
  color: var(--gold);
}
.owner__quote {
  margin: var(--s1) 0 0;
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: var(--lh4);
  color: var(--cream-mid);
}
.owner__text { max-width: 640px; color: rgba(246, 243, 238, .72); }

/* ---------- Masérka card ---------- */
.tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3) var(--s3) var(--s4);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-card);
}

.tcard__portrait { position: relative; padding: var(--s2) var(--s2) 0; }
.tcard__photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--arch);
  background-image: var(--img), var(--stripe);
  background-size: cover, auto;
  background-position: center top, 0 0;
  background-repeat: no-repeat, repeat;
  filter: saturate(.92);
}
/* Vlasový oblouk za portrétem. */
.tcard__frame {
  position: absolute;
  inset: 0 var(--s4) var(--s3) 0;
  border: 1px solid var(--gold);
  border-radius: var(--arch);
  opacity: .5;
  pointer-events: none;
}

/* Quiet ordinal marker instead of a badge — keeps the arch clean. */
.tcard__index {
  position: absolute;
  left: var(--s2);
  bottom: calc(-1 * var(--s1));
  font-family: var(--font-num);
  font-style: italic;
  font-size: 34px;
  line-height: 1;
  color: var(--gold);
  opacity: .35;
}

/* flex:1 lets the body fill the card so cards of differing text length
   still align to equal height across the row. */
.tcard__body { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--s1); text-align: center; }
/* Thai script watermark — decorative, aria-hidden in the markup. */
.tcard__thai {
  font-size: 15px;
  line-height: var(--lh2);
  letter-spacing: 1px;
  color: var(--gold);
  opacity: .75;
}
.tcard__name {
  font-family: var(--font-note);
  font-weight: 400;
  font-size: 22px;
  line-height: var(--lh3);
  color: var(--ink);
}
.tcard__role {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12px;
  line-height: var(--lh1);
  letter-spacing: 1.8px;
  color: var(--muted);
  text-transform: uppercase;
}
.tcard__desc { font-size: 15px; line-height: var(--lh2); color: var(--body); }

/* =========================================================
   Galerie — expanding film strip + lightbox

   A row of panels that each rest at flex: 1. Hovering (or focusing)
   one grows it to ~4.5× while the rest shrink to fill the row; the
   transition animates flex-grow, so the panels slide open smoothly.
   Collapsed panels sit slightly darkened; the active one brightens,
   zooms a touch, and reveals its caption. Pure CSS — the click-to-zoom
   lightbox is the same js/main.js handler as before (data-gallery).
   ========================================================= */
/* No closing padding: the section that follows opens with its own --s13,
   and two of them stacked read as a hole in the page. */
.efilm {
  display: flex;
  gap: var(--s1);
  height: 460px;
  margin-top: var(--s8);
}
.efilm__item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border-radius: 12px;
  background: var(--cream-mid);
  overflow: hidden;
  cursor: zoom-in;
  transition: flex-grow .6s var(--ease-out), box-shadow .4s var(--ease-out);
}
.efilm__item:hover,
.efilm__item:focus-visible { flex-grow: 4.5; box-shadow: var(--shadow-2); }

.efilm__img {
  display: block;
  width: 100%;
  height: 100%;
  background-image: var(--img), var(--stripe);
  background-size: cover, auto;
  background-position: center, 0 0;
  background-repeat: no-repeat, repeat;
  filter: saturate(.9) brightness(.9);
  transform: scale(1.02);
  transition: filter .6s var(--ease-out), transform .6s var(--ease-out);
}
.efilm__item:hover .efilm__img,
.efilm__item:focus-visible .efilm__img { filter: saturate(1.03) brightness(1); transform: scale(1); }

/* Bottom scrim + caption, revealed only on the expanded panel. */
.efilm__cap {
  position: absolute;
  left: var(--s3);
  right: var(--s3);
  bottom: var(--s3);
  padding-top: var(--s6);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
  line-height: var(--lh2);
  letter-spacing: 1.2px;
  color: var(--cream-hi);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s var(--ease-out) .08s, transform .5s var(--ease-out) .08s;
  pointer-events: none;
}
/* The darkening that makes the caption legible, tied to the same reveal. */
.efilm__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(31, 22, 13, .82), rgba(31, 22, 13, 0) 42%);
  opacity: 0;
  transition: opacity .5s var(--ease-out);
  pointer-events: none;
}
.efilm__item:hover .efilm__cap,
.efilm__item:focus-visible .efilm__cap { opacity: 1; transform: none; }
.efilm__item:hover::after,
.efilm__item:focus-visible::after { opacity: 1; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s6) var(--s4);
  background: rgba(26, 18, 10, .94);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
/* `display: flex` above outranks the UA rule for [hidden], so restate it. */
.lightbox[hidden] { display: none; }
.lightbox__fig { display: flex; flex-direction: column; align-items: center; gap: var(--s3); max-width: 1100px; }
.lightbox__img {
  max-width: 100%;
  max-height: 74vh;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-dark);
}
.lightbox__cap {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: var(--lh2);
  letter-spacing: 1.2px;
  color: var(--cream-mid);
  text-transform: uppercase;
}
.lightbox__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  border: 1px solid rgba(197, 160, 89, .5);
  font-size: 20px;
  color: var(--cream-hi);
  transition: background .25s ease, border-color .25s ease;
}
.lightbox__btn:hover { background: var(--gold-soft); border-color: var(--gold); }
.lightbox__btn--prev  { left: var(--s4);  top: 50%; transform: translateY(-50%); }
.lightbox__btn--next  { right: var(--s4); top: 50%; transform: translateY(-50%); }
.lightbox__btn--close { right: var(--s4); top: var(--s4); }

/* =========================================================
   Závěrečné CTA — rozptýlená koláž. Komponenta (.scatter) žije
   v branch.css a sdílí ji s domovskou stránkou; tahle stránka si v HTML
   určuje jen vlastní sadu fotek a jejich rozsazení.
   ========================================================= */

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1180px) {
  .ohero__title { font-size: 48px; line-height: var(--lh6); }

  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .owner { grid-template-columns: 320fr 700fr; gap: var(--s7); padding: var(--s7); }
}

@media (max-width: 860px) {
  .ohero { min-height: 520px; padding-top: var(--s10); padding-bottom: var(--s10); }
  .ohero__title { font-size: 40px; line-height: var(--lh5); }

  .owner { grid-template-columns: 1fr; gap: var(--s5); }
  .owner__portrait { max-width: 320px; }

  /* Below ~860px five side-by-side panels get too thin and there is no
     hover on touch — stack them into a simple full-width gallery with
     the captions always shown. */
  .efilm { flex-direction: column; height: auto; gap: var(--s2); }
  .efilm__item { flex: none; height: 240px; }
  .efilm__item:hover, .efilm__item:focus-visible { flex-grow: 0; }
  .efilm__img { filter: saturate(.98); transform: none; }
  .efilm__cap { opacity: 1; transform: none; }
  .efilm__item::after { opacity: 1; }
}

@media (max-width: 640px) {
  .ohero__title { font-size: 32px; line-height: var(--lh4); }
  .ohero__lede { font-size: 16px; line-height: var(--lh2); }

  .team__grid { grid-template-columns: 1fr; }

  /* Mobil — fotky se ořezávají odshora (proč, viz branch.css).
     .tcard__photo tohle dělá odjakživa — portréty masérek měly ořez
     `center top` už na desktopu, protože u portrétu je to jediné
     rozumné místo. Tady se stejným pravidlem řídí i zbytek stránky. */
  .ohero__bg,
  .owner__photo,
  .efilm__img { background-position: center top, 0 0; }

  .efilm__item { height: 200px; }
  .lightbox__btn { width: 44px; height: 44px; }
  .lightbox__btn--prev  { left: var(--s1); }
  .lightbox__btn--next  { right: var(--s1); }
  .lightbox__btn--close { right: var(--s1); top: var(--s1); }
}