/* ============================================================
   DiBeauTy — kompaktné zobrazenie pre nízke telefóny
   ============================================================
   Cieľ: 360×600 viditeľnej plochy (s lištami prehliadača).
   Pripojené LEN v index.html a kalendar.html, za dibeauty-rezervacie-extra.css.
   VRÁTENIE: zmaž <link> na tento súbor v oboch stránkach — nič iné
   (žiadny JS) na ňom nezávisí.

   PRAVIDLO: písmo sa NEZMENŠUJE (čitateľnosť aj pre staršie klientky).
   Šetrí sa len na medzerách, výške prvkov a rozložení.

   A) spodný pruh v jednom riadku: cena │ čas │ tlačidlo    (index)
   B) pás s ponukou doplnkov — celý text, menšie okraje      (index)
   +  úvod — fotka a nadpis v riadku (centrované), dôvery 2×2 (index)
   C) nižší kalendár a detail dňa                            (kalendar)
   D) časy po 4 v riadku                                     (kalendar, všetky mobily)
   ============================================================ */

/* Nízky telefón na výšku, alebo akýkoľvek telefón otočený na šírku.
   Prah 775 px = VIDITEĽNÁ výška (bez stavového riadka a líšt prehliadača).
   Podľa StatCounter SK (8/2025–8/2026) majú najčastejšie telefóny viditeľnú
   výšku ~490–763 px (Redmi Note, iPhone 11–16, Galaxy A, A55) a veľké
   ~782 px a viac (Galaxy S Ultra, Pixel XL) — prah je v tej medzere.
   Overenie na telefóne: pridaj do adresy ?vp (štítok s rozmermi okna). */
@media (max-width: 767px) and (max-height: 775px), (max-height: 480px) {

  /* ── A) Spodný pruh v jednom riadku: cena │ čas │ tlačidlo vpravo ─ */
  .rez-sticky-bar {
    flex-direction: row;
    align-items: center;
    gap: .75rem;
    padding-top: .5rem;
    padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
  }
  .rez-sticky-bar-summary {
    width: auto;
    flex: 0 0 auto;
    justify-content: flex-start;
    align-items: flex-start;
    gap: .9rem;
  }
  .rez-sticky-bar .rez-btn-lg {
    margin-left: auto;
    flex: 0 1 auto;
    min-width: 0;
    padding: .55rem .8rem;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }
  body:has(.rez-sticky-bar:not(.hidden)) {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Menej miesta nad obsahom kroku */
  .rez-steps { margin-bottom: 1rem; }
  .rez-back-row { margin-bottom: .5rem; }

  /* ── B) Pás s ponukou: celý text v pôvodnej veľkosti ──────────── */
  .rez-addon-hero {
    margin-bottom: .75rem;
    padding: .7rem .9rem .8rem;
  }
  .rez-addon-eyebrow { margin-bottom: .2rem; }
  .rez-addon-title { margin-bottom: .3rem; line-height: 1.2; }
  .rez-addon-lead { line-height: 1.35; }
  .rez-addon-savings { margin-top: .5rem; }

  /* ── Úvod rezervácie: fotka + nadpis v jednom riadku, vycentrované ─
     Stredné stĺpce (fotka, nadpis) sa centrujú okrajovými 1fr stĺpcami.
     Na úzkom telefóne sa nadpis zalomí na 2 riadky; jeho šírka 9.6em = najdlhší
     riadok „Vitajte v rezervačnom" (v em, lebo písmo nadpisu rastie so šírkou).
     Širší stĺpec by nechal vpravo prázdno a skupina by nebola v strede.
     Od 620 px sa nadpis zmestí do jedného riadka (nižšie). */
  .rez-hero {
    display: grid;
    grid-template-columns: 1fr auto auto 1fr;
    column-gap: 0;
    align-items: center;
    padding: .25rem 0 .75rem;
    margin-bottom: .75rem;
  }
  .rez-hero-avatar {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 56px;
    height: 56px;
    margin: 0 .75rem 0 0;
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 4px rgba(31, 100, 71, 0.18);
  }
  .rez-hero-avatar-fallback { font-size: 1.5rem; }
  .rez-hero-eyebrow {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
    margin: 0;
    text-align: left;
  }
  .rez-hero .rez-section-title {
    grid-column: 3;
    grid-row: 2;
    align-self: start;
    max-width: 9.6em;
    margin: .15rem 0 0;
    text-align: left;
  }
  .rez-hero-greeting,
  .rez-trust-bar { grid-column: 1 / -1; justify-self: center; }
  .rez-trust-bar { width: 100%; max-width: 34rem; }
  .rez-hero-greeting { margin-top: .6rem; line-height: 1.45; }
  .rez-trust-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem .75rem;
    margin-top: .75rem;
    text-align: left;
  }
  .rez-trust-item { white-space: normal; line-height: 1.25; }
  .rez-trust-icon { flex-shrink: 0; }

  /* ── C) Kalendár a detail dňa: nižšie políčka, písmo bez zmeny ── */
  .rez-calendar-header { padding: .5rem .75rem; }
  .rez-calendar-weekday { padding: .3rem 0; }
  .rez-calendar-grid > .rez-calendar-day {
    aspect-ratio: auto;
    height: 42px;
    min-height: 42px;
    padding: 0;
  }
  #day-detail { margin-top: -1rem; }          /* sekcia kalendára má pod sebou 32 px */
  #day-title { margin-bottom: .2rem; }
  #day-subtitle { margin-bottom: 0; }
  .rez-time-slots { margin-top: .5rem; }
}

/* Širšie nízke obrazovky (tablet/telefón na šírku): nadpis úvodu v jednom riadku.
   Až od 620 px — písmo nadpisu rastie so šírkou (na 547 px má 25,6 px) a pod
   620 px by sa jeden riadok zmestil len tesne; pri zalomení by ostal v širokom
   stĺpci vľavo. Pod 620 px sa preto vždy zalomí na 2 vycentrované riadky. */
@media (min-width: 620px) and (max-width: 767px) and (max-height: 775px), (min-width: 620px) and (max-height: 480px) {
  .rez-hero .rez-section-title { max-width: none; }
}

/* ── D) Časy po 4 v riadku (všetky mobily) ─────────────────────── */
@media (max-width: 767px) {
  .rez-time-slots {
    grid-template-columns: repeat(4, 1fr);
    gap: .4rem;
  }
  .rez-time-slot { padding: .5rem .25rem; }
}