/* =========================================================
   Sai Mai — Ostrava / Kontakt
   Load after base.css and branch.css.

   Ostrava is the primary branch, so it gets a full-width card with
   an embedded map; Opava sits beside it as a compact secondary card.
   The open/closed badge is computed from the real clock in
   js/main.js (initOpenNow) rather than being a static green dot.
   ========================================================= */

/* =========================================================
   Hero — details up front, no scrolling for a phone number
   ========================================================= */
.khero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  padding: var(--s12) var(--edge);
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
}
.khero__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 60px;
  line-height: var(--lh7);
  color: var(--ink);
}
.khero__lede { max-width: 620px; font-size: 17px; line-height: var(--lh3); color: var(--body); }

.khero__quick {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2) var(--s5);
  margin-top: var(--s1);
}
.khero__quick a,
.khero__quick span {
  display: flex;
  align-items: center;
  gap: var(--s1);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: var(--lh2);
  color: var(--ink);
}
.khero__quick a { transition: color .25s ease; }
.khero__quick a:hover { color: var(--gold); }
.khero__quick .ico { color: var(--copper); }
.khero__quick em { font-style: normal; font-size: 13px; color: var(--muted); }

.khero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-top: var(--s2); }

/* =========================================================
   Photo variant — full-bleed image behind the contact hero.
   Turns the cream block into a dark photo hero like .ohero: a bottom-
   weighted scrim keeps every line legible over the photograph, and all
   text flips to light. Base.css handles the breathing lotus + z-index.
   ========================================================= */
.khero--photo {
  position: relative;
  isolation: isolate;
  min-height: 560px;
  justify-content: center;
  background: var(--hero-dark);
  border-bottom: 0;
  overflow: hidden;
}
.khero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hero-img), var(--stripe);
  background-size: cover, auto;
  background-position: center 30%, 0 0;
  background-repeat: no-repeat, repeat;
}
.khero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(31, 22, 13, .90) 0%,
    rgba(31, 22, 13, .62) 46%,
    rgba(31, 22, 13, .48) 100%);
}
/* Light text over the photo. */
.khero--photo .khero__title { color: var(--cream-hi); }
.khero--photo .khero__lede  { color: rgba(246, 243, 238, .82); }
.khero--photo .khero__quick a,
.khero--photo .khero__quick span { color: var(--cream-hi); }
.khero--photo .khero__quick a:hover { color: var(--gold); }
.khero--photo .khero__quick .ico { color: var(--gold); }
.khero--photo .khero__quick em { color: rgba(246, 243, 238, .6); }
/* On the photo the ornament sits on the darker breath, like the other
   dark heroes, instead of the faint cream one. */
.khero--photo::after { opacity: .3; animation-name: lotusBreath; }

/* =========================================================
   Open-now badge
   ========================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 4px var(--s2);
  border-radius: 9999px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12px;
  line-height: var(--lh2);
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: currentColor;
}
/* Neutral until JS resolves it, so a stale state never flashes. */
.badge { background: var(--cream-mid); color: var(--muted); }
.badge.is-open   { background: rgba(16, 137, 90, .12);  color: #10895A; }
.badge.is-closed { background: rgba(140, 132, 120, .16); color: var(--grey); }

/* =========================================================
   Pobočky
   ========================================================= */
.places { padding-bottom: var(--s12); }
.places__grid {
  display: grid;
  grid-template-columns: 760fr 520fr;
  align-items: start;
  gap: var(--s4);
  margin-top: var(--s8);
}
/* Jedna pobočka, jeden sloupec. Karta se ale nenatahuje přes celých
   1280 px — v tu chvíli by se dvousloupcové .place__rows roztáhly do
   dvou širokých pruhů s adresou v levém rohu a půlkou obrazovky
   prázdna vedle. 880 px je šířka, ve které řádky drží pohromadě. */
.places__grid--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 880px;
  margin-inline: auto;
}

.place {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.place__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s2);
  padding: var(--s4) var(--s5) 0;
}
.place__city {
  padding: 4px var(--s2);
  border-radius: 9999px;
  background: var(--copper);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  line-height: var(--lh2);
  letter-spacing: 1.1px;
  color: #fff;
  text-transform: uppercase;
}
.place__name {
  padding: var(--s2) var(--s5) 0;
  font-family: var(--font-note);
  font-weight: 300;
  font-size: 26px;
  line-height: var(--lh5);
  color: var(--ink);
}
/* Karta bez hlavičky (pobočka před otevřením nemá odznak „otevřeno“). */
.place > .place__name:first-child { padding-top: var(--s4); }
/* Údaj, který ještě není — tišší, ale čitelný, ne šedý placeholder. */
.place__soon { font-family: var(--font-serif); font-style: italic; color: var(--muted); }

.place__rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  margin: var(--s3) var(--s5) 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--line-soft);
}
.place__row { display: flex; flex-direction: column; gap: 2px; }
.place__row dt {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: var(--lh2);
  letter-spacing: 1.1px;
  color: var(--muted);
  text-transform: uppercase;
}
.place__row dd {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: var(--lh2);
  color: var(--ink);
}
.place__row dd a { color: var(--ink); transition: color .25s ease; }
.place__row dd a:hover { color: var(--gold); }

/* Opening-hours mini table. */
.hours { display: flex; flex-direction: column; gap: 2px; }
.hours div { display: flex; justify-content: space-between; gap: var(--s2); }
.hours dt { font-family: var(--font-ui); font-size: 14px; color: var(--body); text-transform: none; letter-spacing: 0; }
.hours dd { font-family: var(--font-ui); font-size: 14px; color: var(--ink); }
.hours .is-today dt, .hours .is-today dd { color: var(--gold); font-weight: 600; }

.place__pays { margin: var(--s4) var(--s5) 0; padding-top: var(--s3); border-top: 1px solid var(--line-soft); }
.place__paysLabel {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: var(--lh2);
  letter-spacing: 1.1px;
  color: var(--muted);
  text-transform: uppercase;
}
.pays { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s1); }
.pays li {
  padding: 5px var(--s2);
  border-radius: 9999px;
  border: 1px solid var(--line-soft);
  background: #fff;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: var(--lh2);
  color: var(--body);
}
.place__note {
  margin: var(--s2) var(--s5) 0;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: var(--lh2);
  color: var(--muted);
}

.place__actions { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s4) var(--s5) var(--s5); }
.place__actions .btn { min-height: 48px; font-size: 14px; }

/* Embedded map. Loaded lazily — it is below the fold on every size. */
.place__map { position: relative; height: 320px; background: var(--cream-mid); }
.place__map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------
   Odkaz na druhou pobočku

   Záměrně to není druhá .place. Karta by znamenala „vyberte si z
   dvojice" a přesně kvůli tomu lidé volali do Opavy na ostravský
   dotaz. Tenhle proužek říká „tohle je jinde" — světlejší pozadí,
   žádná mapa, žádné číslo, jen dveře ven.
   --------------------------------------------------------- */
.elsewhere {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  max-width: 880px;
  margin: var(--s4) auto 0;
  padding: var(--s4) var(--s5);
  border-radius: var(--radius);
  border: 1px dashed var(--line);
  background: var(--cream);
}
.elsewhere__text {
  flex: 1 1 320px;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: var(--lh2);
  color: var(--body);
}
.elsewhere__text strong { font-weight: 600; color: var(--ink); }
/* Kapitálkový štítek „Druhá pobočka“ nad větou je pryč — se třemi
   pobočkami už nebyl pravdivý a věta se ohlásí sama. */
.elsewhere__actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.elsewhere .btn { flex: none; min-height: 48px; font-size: 14px; }

/* =========================================================
   Praktické info — parkování, doprava, platby
   ========================================================= */
.practical { padding-bottom: var(--s12); }
.practical__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  margin-top: var(--s8);
}
.tip {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s6);
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line-soft);
}
.tip__icon { width: 36px; height: 36px; color: var(--gold); }
.tip__title {
  font-family: var(--font-note);
  font-weight: 400;
  font-size: 20px;
  line-height: var(--lh3);
  color: var(--ink);
}
.tip__desc { font-size: 15px; line-height: var(--lh2); color: var(--body); }
.tip__desc strong { color: var(--brown); }

/* =========================================================
   Firemní údaje
   ========================================================= */
.legal {
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
  padding: var(--s8) var(--edge);
}
.legal__inner {
  max-width: var(--content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
}
.legal__item { display: flex; flex-direction: column; gap: 2px; }
.legal__item dt {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: var(--lh2);
  letter-spacing: 1.1px;
  color: var(--muted);
  text-transform: uppercase;
}
.legal__item dd {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: var(--lh2);
  color: var(--ink);
}

/* =========================================================
   FAQ band
   ========================================================= */
.kfaq { padding: var(--s11) var(--edge) 0; }
.kfaq__inner { max-width: var(--content); margin: 0 auto; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1180px) {
  .khero__title { font-size: 48px; line-height: var(--lh6); }
  .places__grid { grid-template-columns: 1fr; }
  .practical__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
}

@media (max-width: 860px) {
  .khero { padding-top: var(--s10); padding-bottom: var(--s10); }
  .khero__title { font-size: 40px; line-height: var(--lh5); }
  .place__rows { grid-template-columns: 1fr; gap: var(--s3); }
}

@media (max-width: 640px) {
  .khero__title { font-size: 32px; line-height: var(--lh4); }
  .khero__lede { font-size: 16px; line-height: var(--lh2); }
  .khero__quick { gap: var(--s2); flex-direction: column; align-items: center; }

  .place__head, .place__name, .place__rows, .place__pays, .place__note { margin-inline: var(--s3); padding-inline: 0; }
  .place__head { padding: var(--s3) 0 0; }
  .place__actions { padding: var(--s3); }
  .place__actions .btn { width: 100%; }
  .place__map { height: 240px; }

  .practical__grid { grid-template-columns: 1fr; }
  .legal__inner { grid-template-columns: 1fr; }

  /* Mobil — fotka v heru se ořezává odshora (proč, viz branch.css).
     Na širokém rámu je ořez na 30 % výšky, tady jde až k horní hraně. */
  .khero__bg { background-position: center top, 0 0; }
}