/* GYC Naturals — Responsive Styles */

/* ═══════════════════════════════════════════════════
   TABLET  768–1023px
═══════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }

  .styles-grid { grid-template-columns: repeat(2, 1fr); }

  .gallery-grid { columns: 2; }

  .services-grid { grid-template-columns: 1fr 1fr; }

  .about-strip { grid-template-columns: 1fr; gap: 2rem; }
  .about-strip-img { max-height: 380px; aspect-ratio: 16/9; }

  .product-detail { grid-template-columns: 1fr; }
  .product-detail-img { max-width: 420px; }

  .dashboard-layout { grid-template-columns: 180px 1fr; }

  .quiz-options { grid-template-columns: repeat(3, 1fr); }

  .style-selector-grid { grid-template-columns: repeat(2, 1fr); }

  .social-strip-grid { grid-template-columns: repeat(4, 1fr); }

  .hero-bg { grid-template-columns: repeat(2, 1fr); }
  .hero-bg > *:nth-child(n+5) { display: none; }
}

/* ═══════════════════════════════════════════════════
   MOBILE  < 768px
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Prevent horizontal overflow on any mobile page */
  html, body { overflow-x: hidden; }
  img, video, iframe { max-width: 100%; height: auto; }
  table { display: block; overflow-x: auto; }
  /* Default grid items to min-width:0 so long content doesn't blow out tracks */
  [class*="grid"] > *, .booking-stepper > * { min-width: 0; }

  /* Header on mobile: give logo enough room to show wordmark, drop secondary icons */
  .nav-inner { gap: 0.4rem !important; padding: 0 0.6rem !important; }
  .nav-logo { flex: 0 0 auto !important; min-width: 0; }
  .nav-logo img { height: 32px !important; max-width: none !important; width: auto !important; }
  .nav-actions { gap: 0.25rem !important; flex-shrink: 0; }
  /* Hide search + account + logout icons on mobile — they live in the hamburger menu */
  .nav-actions .nav-icon-btn[aria-label="Search"],
  .nav-actions .nav-icon-btn[aria-label="Account"],
  .nav-actions .nav-icon-btn[aria-label="Logout"] { display: none !important; }
  .nav-actions .nav-icon-btn { width: 32px !important; height: 32px !important; }
  /* Compact Login button so the hamburger fits within the viewport */
  .nav-actions a.btn,
  .nav-actions a.btn-green {
    padding: 0.4rem 0.7rem !important;
    font-size: 0.78rem !important;
    height: 32px !important;
    line-height: 1 !important;
  }
  .nav-hamburger { width: 32px !important; height: 32px !important; flex-shrink: 0; padding: 0 !important; }

  /* Stack inline-styled 2-column page layouts (sidebar + main) on mobile.
     Covers shop, gallery, customer-dashboard, my-orders, my-wishlist,
     order-details, book-appointment, product, bundle, etc. */
  div[style*="grid-template-columns:240px"],
  div[style*="grid-template-columns: 240px"],
  div[style*="grid-template-columns:280px"],
  div[style*="grid-template-columns: 280px"],
  div[style*="grid-template-columns:300px"],
  div[style*="grid-template-columns: 300px"],
  div[style*="grid-template-columns:320px"],
  div[style*="grid-template-columns:340px"],
  div[style*="grid-template-columns:380px"],
  div[style*="grid-template-columns:2fr 1fr"],
  div[style*="grid-template-columns: 2fr 1fr"],
  div[style*="grid-template-columns:1fr 2fr"],
  div[style*="grid-template-columns:1.4fr 1fr"],
  div[style*="grid-template-columns:1fr 320px"],
  div[style*="grid-template-columns:1fr 300px"],
  div[style*="grid-template-columns:1fr 280px"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  /* Booking page 2fr 1fr grid: stack form + summary on mobile */
  .booking-page-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .booking-page-grid > * { min-width: 0; }

  /* Inline 2-col 1fr 1fr grids: stack to single column on mobile.
     Used by about.php (origin story text+image), clothing brand strip,
     and other places that put two columns side-by-side. */
  section > .container > div[style*="grid-template-columns:1fr 1fr"],
  section > .container > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  section > .container > div[style*="grid-template-columns:1fr 1fr"] > *,
  section > .container > div[style*="grid-template-columns: 1fr 1fr"] > * { min-width: 0; }

  /* About hero: center text + stats */
  section[style*="background:linear-gradient(135deg,var(--gyc-green-900)"] > .container,
  section[style*="background:linear-gradient(135deg, var(--gyc-green-900)"] > .container { text-align: center; }
  section[style*="background:linear-gradient"] > .container > div[style*="flex-wrap:wrap"] { justify-content: center; }

  /* About origin story: center text on mobile (image stacks below) */
  .about-origin-text { text-align: center !important; }
  .about-origin-text p, .about-origin-text h2 { text-align: center !important; }

  /* Contact page: stack form + sidebar; tighten card padding; map fits */
  .contact-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .contact-grid > div { min-width: 0; }
  .contact-grid > div[style*="padding:2.5rem"] { padding: 1.5rem !important; }
  .contact-grid form div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  /* Contact methods 4-col → 2-col on mobile */
  .contact-methods {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 0.75rem !important;
  }
  .contact-methods > * {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
  }
  .contact-methods > * > span,
  .contact-methods > * > p { word-break: break-word; min-width: 0; }

  /* Booking stepper: stack number above label vertically per step,
     short connecting lines, all 3 steps visible within viewport */
  .booking-stepper {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0 !important;
    padding: 0 0.25rem;
    margin-bottom: 1.5rem !important;
  }
  .booking-step-item {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
  }
  .booking-step-item > div { display: flex; flex-direction: column; align-items: center; gap: 4px !important; }
  .booking-step-line { flex: 1 1 auto; min-width: 0 !important; height: 1px !important; align-self: center; margin-bottom: 20px; }
  .booking-step-label { font-size: 0.65rem !important; line-height: 1.2; white-space: nowrap; }
  .booking-step-num { width: 24px !important; height: 24px !important; font-size: 0.72rem !important; flex-shrink: 0; }
  /* Inline 4-col grids: stack to 2-col on mobile. The services grid wants 1-col
     and uses .home-services-grid to override this further (higher than attribute
     specificity via :where() in home-additions.css). */
  div[style*="grid-template-columns:repeat(4,1fr)"]:not(.home-services-grid),
  div[style*="grid-template-columns: repeat(4, 1fr)"]:not(.home-services-grid),
  div[style*="grid-template-columns:repeat(4, 1fr)"]:not(.home-services-grid) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  /* Inline 3-col grids: stack to 2 on mobile */
  div[style*="grid-template-columns:repeat(3,1fr)"]:not(.home-services-grid),
  div[style*="grid-template-columns: repeat(3, 1fr)"]:not(.home-services-grid) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Services grid: full single column at <=767px (overrides above attribute rule
     since this selector includes both element and class) */
  div.home-services-grid[style] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  aside { position: static !important; top: auto !important; }
  /* Booking service-type buttons: stack to 1 column under 480, keep 2-col 480-767 */
  .svc-type-grid { grid-template-columns: 1fr !important; }
  /* Booking style selector grid: 1 col under 480 */
  .style-selector-grid { grid-template-columns: 1fr !important; }

  /* Shop filter: collapse to a toggle button + collapsible body on mobile */
  .shop-filter-card { padding: 0.85rem 1rem !important; position: static !important; }
  .shop-filter-toggle { display: flex !important; }
  .shop-filter-heading { display: none !important; }
  .shop-filter-body { display: none; padding-top: 1rem; border-top: 1px solid var(--gyc-green-100); margin-top: 0.5rem; }
  .shop-filter-card.is-open .shop-filter-body { display: block; }
  .shop-filter-card.is-open #shop-filter-chevron { transform: rotate(180deg); }

  /* Clothing.php: centralize hero, brand strip, collection header.
     Table gets horizontal scroll inside its own card. */
  .clothing-hero-text { max-width: none !important; text-align: center !important; margin: 0 auto; }
  .clothing-hero-text p, .clothing-hero-text h1 { text-align: center !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; }
  .clothing-hero-ctas { justify-content: center !important; }
  .clothing-hero-ctas .btn { flex: 1 1 auto; min-width: 180px; }

  .clothing-brand-strip { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .clothing-brand-text { text-align: center !important; }
  .clothing-brand-text p, .clothing-brand-text h2 { text-align: center !important; }
  .clothing-brand-perks { justify-content: center !important; flex-wrap: wrap !important; gap: 1.25rem !important; }

  .clothing-collection-head { flex-direction: column !important; align-items: center !important; text-align: center !important; }
  .clothing-collection-head > div { text-align: center !important; }
  .clothing-collection-cta { align-self: center !important; }

  /* Size guide table: tighter cells so all 4 columns fit within 320px viewport
     without horizontal scroll. Header labels are short ('Bust' not 'Bust (cm)')
     and the section subtitle above the card already says all measurements are
     in cm so no information is lost. */
  /* Size guide table: rebuild as a CSS grid on each row so the four
     columns truly distribute equally across the card width. The
     <table>/<thead>/<tbody>/<tr> still parse semantically, we just
     swap their display modes. */
  .clothing-size-table,
  .clothing-size-table thead,
  .clothing-size-table tbody { display: block !important; width: 100%; }
  .clothing-size-table tr {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    width: 100%;
  }
  .clothing-size-table th,
  .clothing-size-table td {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 11px 6px !important;
    font-size: 0.78rem;
    box-sizing: border-box !important;
    width: auto !important;
    text-align: center;
  }
  .clothing-size-table thead th:first-child,
  .clothing-size-table tbody td:first-child {
    justify-content: flex-start;
    padding-left: 14px !important;
    text-align: left;
  }
  .clothing-size-table thead th:last-child,
  .clothing-size-table tbody td:last-child { padding-right: 14px !important; }

  .section    { padding: 2.5rem 0; }
  .section-lg { padding: 3rem 0; }

  .container { padding: 0 1rem; }

  /* Nav */
  .nav-inner { padding: 0 1rem; }
  .nav-hamburger { display: flex; }

  /* Hero */
  .hero-bg { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .hero-bg > *:nth-child(n+2) { display: none; }
  .hero-bg > *:first-child { height: 100vh; }
  .hero-ctas { flex-direction: column; align-items: center; }

  /* Grids */
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

  .styles-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }

  .gallery-grid { columns: 1; }

  .services-grid { grid-template-columns: 1fr; }

  /* Proverb */
  .proverb-strip { flex-direction: column; text-align: center; padding: 1.25rem 1rem; }
  .proverb-strip .adinkra-icon { display: none; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 0.5rem; }

  /* Bundles */
  .bundle-strip-scroll {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
  }
  .bundle-strip-scroll .bundle-card { min-width: 280px; }

  /* Booking */
  .booking-stepper { gap: 0; }
  .booking-step-line { min-width: 30px; }
  .booking-step-label { font-size: 0.65rem; }
  .style-selector-grid { grid-template-columns: repeat(2, 1fr); }

  /* Quiz */
  .quiz-options { grid-template-columns: repeat(2, 1fr); }

  /* Cart */
  .cart-item { grid-template-columns: 64px 1fr; }
  .cart-item-price { grid-column: 2; }

  /* Dashboard */
  .dashboard-layout { grid-template-columns: 1fr; }
  .dashboard-nav {
    position: static;
    display: flex;
    overflow-x: auto;
    gap: 0.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gyc-green-100);
    margin-bottom: 1.5rem;
  }
  .dashboard-nav a { white-space: nowrap; }

  /* Product detail */
  .product-detail { grid-template-columns: 1fr; gap: 1.5rem; }

  /* Social strip */
  .social-strip-grid { grid-template-columns: repeat(3, 1fr); }

  /* Clothing strip */
  .clothing-thumb { width: 150px; height: 200px; }

  /* Typography */
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.2rem; }

  /* Before/after slider */
  .before-after-slider { border-radius: 8px; }

  /* Buttons */
  .btn { padding: 0.65rem 1.25rem; }
  .btn-lg { padding: 0.75rem 1.5rem; font-size: 0.95rem; }

  /* Moodboard */
  .moodboard-grid { grid-template-columns: 1fr; }

  /* About */
  .about-strip { grid-template-columns: 1fr; }
  .about-strip-img { max-height: 300px; aspect-ratio: 4/3; }

  /* Quiz CTA */
  .quiz-cta-strip { padding: 2.5rem 1rem; }

  /* Filter chips */
  .filter-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.5rem; }
  .filter-chip  { flex-shrink: 0; }

  /* Tab bar */
  .tab-bar { overflow-x: auto; }
  .tab-btn  { white-space: nowrap; padding: 0.6rem 1rem; }

  /* WhatsApp float + scroll-top: avoid overlap */
  .scroll-top { right: 1.25rem; bottom: 4.5rem; }
  .whatsapp-float { bottom: 1.25rem; right: 1.25rem; }
}

/* ═══════════════════════════════════════════════════
   SMALL MOBILE  < 380px
═══════════════════════════════════════════════════ */
@media (max-width: 379px) {
  .styles-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .quiz-options { grid-template-columns: 1fr; }
  .style-selector-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 2rem; }
}

/* ═══════════════════════════════════════════════════
   PRINT
═══════════════════════════════════════════════════ */
@media print {
  .site-header, .site-footer, .whatsapp-float,
  .scroll-top, .cookie-banner, .toast-container { display: none; }
}

/* ═══════════════════════════════════════════════════
   CLOTHING PAGE — RESPONSIVE
═══════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .clothing-brand-story  { grid-template-columns: 1fr !important; }
  .clothing-lookbook     { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 767px) {
  .clothing-lookbook     { grid-template-columns: 1fr !important; }
  .clothing-cat-strip    { grid-template-columns: repeat(3, 1fr) !important; }
  .clothing-perks        { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 479px) {
  .clothing-cat-strip    { grid-template-columns: repeat(2, 1fr) !important; }
  .clothing-perks        { grid-template-columns: 1fr !important; }
  /* About page values grid + any inline repeat(3,1fr): single column on
     small mobile so cards don't overflow */
  div[style*="grid-template-columns:repeat(3,1fr)"]:not(.home-services-grid),
  div[style*="grid-template-columns: repeat(3, 1fr)"]:not(.home-services-grid) {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════
   EMAIL TEMPLATE RESPONSIVE (used in admin preview)
═══════════════════════════════════════════════════ */
@media (max-width: 620px) {
  .email-container { width: 100% !important; }
  .email-body      { padding: 20px !important; }
}

/* ═══════════════════════════════════════════════════
   PERFORMANCE — CONTENT VISIBILITY
   Defer off-screen rendering for below-the-fold sections
═══════════════════════════════════════════════════ */
.cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;  /* best-guess placeholder height */
}
.cv-auto-tall {
  content-visibility: auto;
  contain-intrinsic-size: 0 900px;
}

/* ═══════════════════════════════════════════════════
   LAZY-IMAGE FADE-IN
═══════════════════════════════════════════════════ */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.4s ease;
}
img[loading="lazy"].loaded {
  opacity: 1;
}
/* For browsers that already have it cached — instant */
img[loading="lazy"].instantly-visible {
  opacity: 1;
  transition: none;
}

/* ═══════════════════════════════════════════════════
   FOCUS VISIBLE — keyboard accessibility
═══════════════════════════════════════════════════ */
:focus-visible {
  outline: 3px solid var(--gyc-green-600);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* ═══════════════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  img[loading="lazy"] { opacity: 1; transition: none; }
}

/* ═══════════════════════════════════════════════════
   DARK MODE SUPPORT (system preference)
═══════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  /* Applied only to elements that opt in via .dark-aware class */
  .dark-aware {
    --_bg:   #1a1a1a;
    --_text: #f0f0f0;
    background: var(--_bg);
    color: var(--_text);
  }
}

/* ═══════════════════════════════════════════════════
   UTILITY ADDITIONS
═══════════════════════════════════════════════════ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Safe area padding for iOS notch */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
.safe-top    { padding-top: env(safe-area-inset-top); }