/* =============================================
   HERYERPARKOUR — Responsive Breakpoints
   Sadece YAPISAL degisiklikler: grid kolon, hamburger, layout yonu
   Fluid scaling: clamp() ile variables.css + header.css'te
   ============================================= */

/* ——— Min 1920px (27" & 24" FHD+ Monitors) ——— */
@media (min-width: 1920px) {
  :root {
    --container-max: 1440px;
  }

  .nav-inner { max-width: 1440px; }

  .hero { min-height: 100vh; }
}

/* ——— Min 2560px (27" QHD) ——— */
@media (min-width: 2560px) {
  :root {
    --container-max: 1600px;
  }
}

/* ——— Max 1440px (24" Monitor / MacBook Pro) ——— */
@media (max-width: 1440px) {
  :root { --container-max: 1200px; }
}

/* ——— Max 1280px (21" Monitor) ——— */
@media (max-width: 1280px) {
  :root { --container-max: 1100px; }
}

/* ——— Max 1024px (Tablet Landscape / 15" Laptop) ——— */
@media (max-width: 1024px) {
  .act-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .act-card { grid-column: span 1; transform: none !important; }

  .vid-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  .vid-main { grid-column: 1 / -1; }
  .vid-side { grid-column: span 1; }
  .vid-sm-1,
  .vid-sm-2 { grid-column: span 1; }
  .vid-full { grid-column: 1 / -1; }

  .rev-grid { gap: 24px; }
  .price-grid { gap: 20px; }

}

/* ——— Max 900px (Small Tablet) ——— */
@media (max-width: 900px) {
  .act-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .rev-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .price-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

}

/* ——— Max 768px (Tablet Portrait) ——— */
@media (max-width: 768px) {
  /* Nav mobile — styles in header.css, structural overrides here */
  .nav-mob { display: flex; }

  /* Hero — slide 1 kurallari hero.css'te, slide 2-4 kurallari asagida */
  .slide-text-col > .btn-street {
    font-size: 13px;
    padding: 14px 28px;
    letter-spacing: 1.5px;
  }

  .slide-visual {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding-top: 80px;
    padding-bottom: 60px;
  }
  .slide-visual.reverse { grid-template-columns: 1fr 1fr; direction: ltr; }
  .slide-img-col {
    overflow: hidden;
  }
  .asym-inner { height: 100%; }
  .frame-accent { display: none; }

  /* Activities */
  .act-card {
    grid-column: span 1 !important;
    transform: none !important;
  }

  /* Video — styles in video-gallery.css */

  /* Photo wall — 2-col grid */
  .wall-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    height: auto;
    position: relative;
  }
  .polaroid {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
  }

  /* Reviews — 3 column */
  .rev-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .rev-inner { transform: none !important; }

  /* Pricing — styles in pricing.css */
  .price-pop { transform: none; }

  /* Schedule */
  .sched-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sched-table { min-width: 600px; }

  /* FAQ */
  .faq-q { font-size: 1rem; padding: 16px 20px; }

  /* CTA */
  .cta-btns {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  .cta-btns .btn-street { max-width: 360px; width: 100%; text-align: center; }

  .foot-bottom { flex-direction: column; gap: 8px; text-align: center; }

  /* Cross banners */
  .cross-banners { padding: 40px 0; }
  .cross-strip { font-size: 0.9rem; }
}

/* ——— Max 640px (Large Phone Landscape) ——— */
@media (max-width: 640px) {
  .act-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  /* Map sticker — stack vertically */
  .map-sticker-inner {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}

/* ——— Max 480px (Phone) ——— */
@media (max-width: 480px) {
  .act-grid {
    grid-template-columns: 1fr;
  }

  .wall-gallery {
    grid-template-columns: 1fr;
  }

  .slider-dots { gap: 6px; }
  .dot { width: 24px; height: 6px; }

  .sched-table { font-size: 0.8rem; min-width: 500px; }
  .st { padding: 2px 6px; font-size: 0.65rem; }

  /* FABs — tighter on small screens */
  .wa-fab { bottom: 20px; right: 16px; width: 52px; height: 52px; }
  .phone-fab { bottom: 20px; left: 16px; width: 48px; height: 48px; }
}

/* ——— Max 360px (Small Phone — iPhone SE, Galaxy S) ——— */
@media (max-width: 360px) {
  .faq-q { font-size: 0.9rem; padding: 14px 16px; }

  .cta-section h2 { font-size: 1.6rem; }

  .sched-table { min-width: 440px; font-size: 0.75rem; }

}

/* ——— Touch-friendly: ensure minimum tap targets ——— */
@media (pointer: coarse) {
  .nav-links a { min-height: 44px; display: flex; align-items: center; }
  .faq-q { min-height: 48px; }
  .btn-street { min-height: 48px; }
  .slider-arrow { min-width: 44px; min-height: 44px; }
  .blog-card-tag { min-height: 32px; display: inline-flex; align-items: center; }
  .sidebar-all-tag { min-height: 36px; display: inline-flex; align-items: center; }
}

/* ——— Landscape phone orientation ——— */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 100vh; }
  .hero-inner { padding-bottom: 40px; }

  /* Nav mobile menu — horizontal scroll friendly */
  .nav-links {
    padding: 60px 20px 20px;
    gap: 4px;
  }
  .nav-links a { font-size: 16px; padding: 8px 16px; }
}

/* ——— Reduced Motion ——— */
@media (prefers-reduced-motion: reduce) {
  .letter,
  .slide,
  .act-card,
  .vid-card,
  .rev-card,
  .price-card,
  .faq-item,
  .polaroid {
    animation: none !important;
    transition: none !important;
  }
  .marquee-track,
  .cross-track { animation: none !important; }
}