/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — grouped by breakpoint, widest first so the cascade
   narrows correctly down to 320px.

   Sizing is fluid by default (clamp + vw in base.css / editorial.css),
   so these blocks only handle real layout changes and the few places
   where a decorative element has to step back to keep content legible
   on a narrow screen.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ ≤ 1024px — small laptops ══════════════════════════════ */
@media (max-width: 1024px) {
  .hero-image-wrap { width: 38%; }
  .booking-wrap { gap: 60px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card { padding: 32px 26px; }
}

/* ═══ ≤ 900px — tablets ═════════════════════════════════════ */
@media (max-width: 900px) {
  /* ── Nav ─────────────────────────────────────────────── */
  .nav-links { display: none; }
  .hamburger { display: flex; }
  nav {
    height: auto;
    padding-top: env(safe-area-inset-top, 14px);
    padding-bottom: 14px;
    padding-left: 20px;
    padding-right: 20px;
    background: rgba(10,10,10,.92);
    backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 rgba(212,168,80,.15);
  }
  nav.scrolled { height: auto; }

  /* ── Hero: image becomes a real background, text sits on top ── */
  #hero {
    align-items: center;
    padding-top: calc(env(safe-area-inset-top, 14px) + 72px);
    padding-bottom: 56px;
    min-height: 100svh;
    position: relative;
  }
  .hero-image-wrap {
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    clip-path: none;
    z-index: 0;
    overflow: hidden;
  }
  .hero-image-wrap::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(180deg,
      rgba(10,10,10,.45) 0%,
      rgba(10,10,10,.55) 45%,
      rgba(10,10,10,.85) 80%,
      var(--dark) 100%);
  }
  .hero-image-fill {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
    animation: none;
    background-position: center 30%;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('https://images.unsplash.com/photo-1599351431202-1e0f0137899a?w=1200&q=80');
  }
  .hero-badge { display: none; }
  .scroll-indicator { display: none; }
  .hero-bg, .hero-grid { z-index: 1; opacity: .35; }
  #hero .container { position: relative; z-index: 3; width: 100%; }
  .hero-content { max-width: 100%; }
  h1.hero-title { text-shadow: 0 2px 24px rgba(0,0,0,.55); }
  .hero-desc { text-shadow: 0 1px 12px rgba(0,0,0,.6); }
  .hero-decor { display: none; }

  /* ── Section layout ──────────────────────────────────── */
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card { padding: 32px 26px; }
  .booking-wrap { grid-template-columns: 1fr; gap: 56px; }
  .location-wrap { grid-template-columns: 1fr; }
  .reviews-header { flex-direction: column; align-items: flex-start; }
  .footer-inner { gap: 16px; }

  /* three cards in a two-column auto-fit grid leave a dead cell —
     stay 3-up until the cards get genuinely too narrow */
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .team-overlay { padding: 24px 20px; }
  .team-name { font-size: 1.25rem; }
  .team-photo-placeholder { font-size: 3.4rem; }

  .reviews-grid { grid-template-columns: 1fr; }
  .review-card { padding: 36px 32px; }
  .review-text { min-height: 0; }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: unset;
    grid-auto-rows: 160px;
  }
  .gallery-item:nth-child(1) { grid-column: 1 / 3; grid-row: span 2; }
  .gallery-item:nth-child(7) { display: block; }

  /* ── Editorial layer ─────────────────────────────────── */
  /* line art crowds a single-column layout */
  .sec-tool { display: none; }

  /* words stay, quieter — photography and copy keep the foreground */
  .sec-word { font-size: clamp(4.5rem, 24vw, 11rem); color: rgba(245,240,232,.024); }
  .sec-word--outline { color: transparent; -webkit-text-stroke-color: rgba(212,168,80,.095); }
  .sec-word--quote { font-size: clamp(13rem, 52vw, 20rem); }

  /* brackets follow the narrower content box */
  .gallery-grid::before,
  .gallery-grid::after { width: 26px; height: 26px; }
  .gallery-grid::before { left: -12px; top: -12px; }
  .gallery-grid::after  { right: -12px; bottom: -12px; }
}

/* ═══ ≤ 680px — large phones: team cards stack ══════════════ */
@media (max-width: 680px) {
  .team-grid { grid-template-columns: 1fr; }
  .team-overlay { padding: 32px; }
  .team-name { font-size: 1.55rem; }
  .team-photo-placeholder { font-size: 5rem; }
}

/* ═══ ≤ 600px — phones ══════════════════════════════════════ */
@media (max-width: 600px) {
  /* ── Layout ──────────────────────────────────────────── */
  .hero-stats { gap: 24px; flex-wrap: wrap; margin-top: 48px; padding-top: 32px; }
  .stat-num { font-size: 1.9rem; }
  /* ── Ceník na mobilu ─────────────────────────────────── */
  /* Ve sloupci nad sebou přestane 1px mřížka fungovat — karty
     splynou v jeden pruh. Místo mřížky dostane každá služba
     vlastní rámeček a přeskládá se do řádku ceníku:
     ikona + název vlevo, cena vpravo, popis přes celou šířku. */
  .services-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    background: none;
    border: 0;
  }
  .service-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "ikona nazev cena"
      "popis popis popis"
      "akce  akce  akce";
    align-items: center;
    column-gap: 14px;
    padding: 20px 20px 16px;
    border: 1px solid rgba(212,168,80,.16);
    border-radius: 5px;
  }
  /* zvýrazněná první služba si drží teplejší podklad, navíc
     dostane výraznější obrys — jinak by se ve stohu ztratila */
  .service-card:first-child { border-color: rgba(212,168,80,.4); }
  /* spodní vlásková linka kopírovala okraj karty, teď je zbytečná */
  .service-card::after { display: none; }

  .service-icon {
    grid-area: ikona;
    width: 38px; height: 38px;
    margin-bottom: 0;
  }
  .service-icon svg { width: 17px; height: 17px; }
  .service-name {
    grid-area: nazev;
    font-size: 1.15rem; margin-bottom: 0;
  }
  .service-price {
    grid-area: cena;
    flex-direction: column; align-items: flex-end; gap: 1px;
    margin-top: 0; padding-top: 0; border-top: 0;
    font-size: 1.5rem;
  }
  .service-price span { font-size: .62rem; letter-spacing: .14em; }
  .service-desc {
    grid-area: popis;
    max-width: none;
    margin: 13px 0 0;
    font-size: .84rem; line-height: 1.55;
  }
  /* justify-self, ne align-self — v gridu by se podtržení odkazu
     roztáhlo přes celou kartu a četlo se jako oddělovací linka */
  .service-book { grid-area: akce; justify-self: start; margin-top: 12px; }

  .form-row { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; gap: 14px; text-align: center; align-items: center; }
  .marquee-item { font-size: 1.3rem; padding: 0 18px; gap: 18px; }
  .booking-form { padding: 36px 24px 30px; }
  .location-info { padding: 44px 32px; }

  /* ── Rezervace na mobilu ─────────────────────────────── */
  /* Na úzké obrazovce se dlouhý souhrn („Holení břitvou · 450 Kč
     · 35 min") vedle popisku nevejde. Místo useknutí třemi tečkami
     se zalomí na druhý řádek — krátké souhrny („Tomáš", „15:30")
     zůstanou vedle popisku a řádek se nezvýší. */
  .krok-souhrn {
    white-space: normal;
    line-height: 1.35;
  }
  /* užší dlaždice, ať se do řádku vejdou tři */
  .casy-mrizka { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }

  /* ── Editorial layer ─────────────────────────────────── */
  /* the caliper scale reads as noise at this width */
  #services .sec-decor::before { display: none; }

  /* textures thin out with the viewport */
  #reviews .sec-decor::before  { background-size: 44px 44px; opacity: .7; }
  #location .sec-decor::before { background-size: 30px 30px; opacity: .7; }

  /* the contact-sheet counter would sit on the photos — coordinates stay */
  #gallery .sec-meta { display: none; }
  .sec-meta { font-size: .62rem; letter-spacing: .2em; }

  #reviews .sec-word--quote { right: -4%; transform: translateY(52%); }
}

/* ═══ ≤ 420px — small phones ════════════════════════════════ */
@media (max-width: 420px) {
  :root { --container-pad: 18px; }
  .service-card { padding: 26px 18px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ═══ Short viewports — keep the hero from swallowing the page ══ */
@media (max-height: 560px) and (min-width: 901px) {
  #hero { min-height: 640px; }
}