/* ==============================================================
   responsive.css — breakpoint overrides (tablet + mobile)
   Loaded AFTER styles.css so these rules win.
   Breakpoints (desktop-first, max-width):
     1023px → tablet & laptop
      900px → mid-tablet (gallery only)
      767px → small tablet
      640px → mobile
   ============================================================== */


/* ── Accessibility ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .accordion-panel,
  .accordion-chevron { transition: none; }
  .reveal { transition: none; }
  .service-card,
  .price-card,
  .ref-card,
  .g-thumb,
  .nav-logo,
  .btn-primary,
  .btn-outline { transition: none; }
  .ref-slot,
  .ref-slot-inner,
  .ref-nav-btn { transition: none; }
}


/* ── ≤1023px — tablet & laptop ───────────────────────────────── */
@media (max-width: 1023px) {
  /* Contact: collapse map+form to single column */
  .contact-grid { grid-template-columns: 1fr; }
  .map-wrap     { min-height: 360px; height: 360px; }

  /* O mně hero image flips to a wider, capped aspect */
  .omne-hero-img { aspect-ratio: 16 / 10; max-height: 420px; }

  /* Reference carousel: narrower slots so 3 cards + peeks fit */
  .ref-slot             { flex-basis: 230px; width: 230px; }
  .ref-slot[data-pos="0"] { flex-basis: 250px; width: 250px; }
  .ref-track       { gap: 14px; }
  .ref-nav-btn     { width: 42px; height: 42px; }
}


/* ── 768–1023px — tablet bento (3 cols)  ─────────────────────
   [ 1   1 ][ 2 ]
   [ 3 ][ 4   4 ]
   [ 5   5 ][ 6 ]                                              */
@media (min-width: 768px) and (max-width: 1023px) {
  .gallery-compact {
    --row: 180px;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .gallery-compact .g-thumb:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .gallery-compact .g-thumb:nth-child(2) { grid-column: span 1; grid-row: span 1; }
  .gallery-compact .g-thumb:nth-child(3) { grid-column: span 1; grid-row: span 1; }
  .gallery-compact .g-thumb:nth-child(4) { grid-column: span 2; grid-row: span 1; }
  .gallery-compact .g-thumb:nth-child(5) { grid-column: span 2; grid-row: span 1; }
  .gallery-compact .g-thumb:nth-child(6) { grid-column: span 1; grid-row: span 1; }
}

/* ── 641–767px — small tablet bento (3 cols, tighter row)  ─── */
@media (min-width: 641px) and (max-width: 767px) {
  .gallery-compact {
    --row: 150px;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .gallery-compact .g-thumb:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .gallery-compact .g-thumb:nth-child(2) { grid-column: span 1; grid-row: span 1; }
  .gallery-compact .g-thumb:nth-child(3) { grid-column: span 1; grid-row: span 1; }
  .gallery-compact .g-thumb:nth-child(4) { grid-column: span 2; grid-row: span 1; }
  .gallery-compact .g-thumb:nth-child(5) { grid-column: span 2; grid-row: span 1; }
  .gallery-compact .g-thumb:nth-child(6) { grid-column: span 1; grid-row: span 1; }
}


/* ── ≤767px — small tablet ───────────────────────────────────── */
@media (max-width: 767px) {
  .contact-grid { gap: 20px; }
  .map-wrap     { min-height: 300px; height: 300px; }

  /* Pricing cards: tighter padding on small tablets */
  .price-card { padding: 26px 22px; }

  /* Section vertical rhythm: trim oversized desktop padding */
  section.py-20,
  section.py-24 { padding-top: 56px; padding-bottom: 56px; }

  /* Reference carousel: hide the far peeks, keep center + one side each way */
  .ref-slot[data-pos="-2"],
  .ref-slot[data-pos="2"]  { display: none; }
  .ref-slot             { flex-basis: 150px; width: 150px; }
  .ref-slot[data-pos="0"] { flex-basis: 220px; width: 220px; }
  .ref-track       { gap: 12px; }
  .ref-carousel    { gap: 10px; }
}


/* ── ≤640px — mobile ─────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Typography */
  h1 { font-size: 2.2rem !important; line-height: 1.15; }
  h2 { font-size: 1.7rem !important; line-height: 1.2;  }
  h3 { font-size: 1.2rem !important; }

  /* Hero buttons stack full-width */
  .btn-primary,
  .btn-outline { width: 100%; justify-content: center; }
  .hero-btns   { flex-direction: column; }

  /* Generic horizontal padding on phones */
  section { padding-left: 16px; padding-right: 16px; }

  /* Cards / surfaces: tighter padding */
  .price-card     { padding: 22px 18px; }
  .glass-card     { padding: 20px; }
  .ref-card       { padding: 22px 20px; }
  .service-card   { border-radius: 18px; }
  .accordion-trigger { padding: 16px 18px; font-size: 0.94rem; }
  .accordion-panel-content { padding: 0 18px 18px; }

  /* Pills / badges scale down */
  .pill           { font-size: 0.62rem; padding: 4px 10px; }

  /* Quote block — tighter */
  .quote-block    { padding: 22px 22px 22px 26px; }
  .quote-block p  { font-size: 0.98rem; }
  .quote-block::before { font-size: 4rem; }

  /* Gallery: 2-col bento on phones
     [ 1   1 ]
     [ 2 ][ 3 ]
     [ 4   4 ]
     [ 5 ][ 6 ]                          */
  .gallery-compact {
    --row: 130px;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .gallery-compact .g-thumb:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .gallery-compact .g-thumb:nth-child(2) { grid-column: span 1; grid-row: span 1; }
  .gallery-compact .g-thumb:nth-child(3) { grid-column: span 1; grid-row: span 1; }
  .gallery-compact .g-thumb:nth-child(4) { grid-column: span 2; grid-row: span 1; }
  .gallery-compact .g-thumb:nth-child(5) { grid-column: span 1; grid-row: span 1; }
  .gallery-compact .g-thumb:nth-child(6) { grid-column: span 1; grid-row: span 1; }

  /* Smaller zoom badge on phones */
  .g-thumb::before { width: 32px; height: 32px; top: 10px; right: 10px; background-size: 14px 14px; }

  /* Lightbox controls: smaller, edge-tight */
  .lb-prev  { left: 8px;  width: 42px; height: 42px; }
  .lb-next  { right: 8px; width: 42px; height: 42px; }
  .lb-close { top: 14px;  right: 14px; width: 42px; height: 42px; }
  .lightbox img { max-width: 96vw; max-height: 80vh; border-radius: 14px; }

  /* About-me image: shrink + center */
  .about-img { max-width: 260px; margin: 0 auto; }

  /* Nav: tighten logo + hide tagline if it overflows */
  /* Width-driven (not height-driven) so the wide 8.4:1 wordmark can never
     push the hamburger off-screen on narrow phones — see mobile nav-overflow
     bug found 2026-07-08: fixed height + flex-shrink-0 forced ~319px width
     at 375px viewport, pushing the hamburger button off-canvas entirely. */
  .logo-img { width: clamp(180px, 50vw, 280px); height: auto; }
  .nav-logo { gap: 6px; }

  /* Map: keep readable height */
  .map-wrap { min-height: 280px; height: 280px; border-radius: 18px; }

  /* Footer: stack columns automatically via Tailwind grid; tighten gap */
  footer .grid { gap: 24px; }

  /* Reference carousel — phone: full-width card, arrows move BELOW it.
     Fixed slot heights clipped long quotes on narrow cards (text overlap),
     and the inline arrows + 34px peeks + side padding starved the card of
     width — so: viewport wraps to its own full-width row, center slot grows
     to fill it (12px side slivers keep the slide motion readable), heights
     go auto so the card sizes to its text. */
  .ref-carousel    { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .ref-viewport    { order: -1; flex-basis: 100%;
                     mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
                     -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%); }
  .ref-nav-btn     { width: 44px; height: 44px; }
  .ref-track       { gap: 8px; padding: 8px 0; }
  /* Slivers keep a fixed height: their clipped card content would otherwise
     wrap at ~0 width and stretch the whole track vertically */
  .ref-slot[data-pos="-1"],
  .ref-slot[data-pos="1"]  { flex-basis: 12px; width: 12px; height: 300px; }
  .ref-slot[data-pos="0"]  { flex: 1 1 auto; width: auto; }
  .ref-slot,
  .ref-slot[data-pos="0"]  { height: auto; }
  .ref-slot-inner          { height: auto; }
  .ref-slot-inner .ref-card { height: auto; min-height: 300px; }
  /* scale(1.04) would clip a full-width card against the slot's overflow:hidden */
  .ref-slot[data-pos="0"] .ref-slot-inner { transform: none; }
}


/* ── ≤420px — narrow phones ──────────────────────────────────── */
/* Nav at the lg breakpoint: the desktop links + CTA switch on at 1024px while
   the 8.4:1 wordmark still claims 437px, cutting "Objednat se" off the right
   edge by 31px at exactly 1024px (iPad Pro landscape). Same width-driven fix
   as .logo-img below — found 2026-08-20. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .logo-img { width: clamp(220px, calc(220px + (100vw - 1024px) * 0.85), 437px); height: auto; }
  .nav-mark { height: clamp(34px, calc(34px + (100vw - 1024px) * 0.031), 42px); }
}

@media (max-width: 420px) {
  h1 { font-size: 1.95rem !important; }
  h2 { font-size: 1.5rem  !important; }
  .price-num { font-size: 1.7rem; }
  .pill       { font-size: 0.6rem; }

  /* Footer lockup: same width-driven rule as .logo-img above — a fixed height
     on the 8.4:1 wordmark overflowed 320/375px phones by 26/10px. */
  .footer-mark     { height: 30px; }
  .footer-wordmark { width: clamp(140px, 44vw, 200px); height: auto; }
}