/* ================================================================
   GALLERY NOIR CHIC — Mobile Responsive Overrides
   Covers: header · hero · banners · archive grids · single pages
           contact · artist · exhibition · footer · masonry · visit
   Breakpoints:  ≤ 768px mobile  |  ≤ 1024px tablet
   ================================================================ */

/* ── 1. HEADER / NAV ─────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Shrink nav bar height */
  .gnc-nav-bar-inner {
    min-height: 64px !important;
    height: 64px !important;
  }

  /* Hide CTA button text in nav on very small screens */
  .gnc-nav-cta-btn {
    padding: 0.4rem 0.9rem !important;
    font-size: 8px !important;
  }

  /* Mobile menu panel full-width */
  .gnc-mobile-nav {
    padding: 1.25rem 1.5rem 2rem !important;
  }
}

/* ── 2. HERO SLIDER ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .gnc-hero-slider {
    min-height: 100svh !important;
    height: 100svh !important;
  }

  .gnc-slide__content {
    padding: 0 1.5rem 3rem !important;
    justify-content: flex-end !important;
  }

  .gnc-slide__line1 {
    font-size: clamp(2rem, 8vw, 3rem) !important;
  }

  .gnc-slide__line2 {
    font-size: clamp(2.4rem, 10vw, 4rem) !important;
  }

  .gnc-slide__sub {
    font-size: 12px !important;
    max-width: 100% !important;
  }

  .gnc-slider__bottom {
    padding: 0 1.5rem 1.5rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  .gnc-slider__counter {
    font-size: 9px !important;
  }

  .gnc-slider__dots {
    gap: 6px !important;
  }
}

/* ── 3. PAGE BANNER ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .gnc-banner {
    padding: calc(var(--gnc-header-h, 64px) + 2.5rem) 1.25rem 2.5rem !important;
  }

  .gnc-banner__title {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1.15 !important;
  }

  .gnc-banner__sub {
    font-size: 0.875rem !important;
    margin-top: 0.75rem !important;
  }
}

/* ── 4. ARCHIVE SECTION ──────────────────────────────────────── */
@media (max-width: 768px) {
  .gnc-archive {
    padding: 3rem 1.25rem 5rem !important;
  }

  .gnc-archive__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem 1rem !important;
  }

  .gnc-archive__grid--4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .gnc-archive__grid,
  .gnc-archive__grid--4 {
    grid-template-columns: 1fr !important;
  }
}

/* ── 5. CARDS ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .gnc-card__title {
    font-size: 1rem !important;
  }

  /* Remove stagger offset on mobile — no room */
  .gnc-card[style*="margin-top:3rem"] {
    margin-top: 0 !important;
  }
}

/* ── 6. MASONRY ──────────────────────────────────────────────── */
/* Already handled in masonry.css — this fills any remaining gaps */
@media (max-width: 768px) {
  .gnc-masonry__meta {
    padding: 0.75rem 0.875rem 1rem !important;
  }

  .gnc-masonry__title {
    font-size: 0.9rem !important;
  }
}

/* ── 7. ARTIST SINGLE PAGE ───────────────────────────────────── */
@media (max-width: 768px) {
  .gnc-artist-single {
    display: block !important;
    padding: 2rem 1.25rem 4rem !important;
  }

  .gnc-artist-portrait {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto 2.5rem !important;
  }

  .gnc-artist-portrait img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3/4 !important;
    object-fit: cover !important;
  }
}

/* ── 8. EXHIBITION SINGLE PAGE ───────────────────────────────── */
@media (max-width: 768px) {
  .gnc-exhibition-hero {
    margin-top: 64px !important;
    aspect-ratio: 16/9 !important;
  }

  .gnc-exhibition-hero img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .gnc-page__inner {
    padding: 2rem 1.25rem 4rem !important;
  }

  .gnc-page__body {
    max-width: 100% !important;
  }
}

/* ── 9. CONTACT PAGE ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .gnc-contact-grid {
    display: block !important;
  }

  .gnc-contact-grid > aside {
    margin-top: 3rem !important;
  }

  .gnc-contact-info__block {
    padding: 1rem 0 !important;
  }

  .gnc-contact-map {
    height: 280px !important;
    margin-top: 2rem !important;
  }

  /* CF7 form fixes */
  .wpcf7-form input[type="text"],
  .wpcf7-form input[type="email"],
  .wpcf7-form textarea {
    font-size: 16px !important; /* prevent iOS zoom */
  }
}

/* ── 10. FOOTER ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .gnc-footer__hero {
    padding: 3rem 1.25rem !important;
  }

  .gnc-footer__statement {
    font-size: clamp(1.5rem, 7vw, 2.5rem) !important;
    line-height: 1.2 !important;
  }

  .gnc-footer__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2.5rem 1.5rem !important;
  }

  .gnc-footer__brand {
    grid-column: 1 / -1 !important;
  }

  .gnc-footer__bottom-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding: 1.25rem !important;
  }

  .gnc-footer__legal {
    gap: 1rem !important;
  }
}

@media (max-width: 480px) {
  .gnc-footer__grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 11. HOMEPAGE SECTIONS ───────────────────────────────────── */
@media (max-width: 768px) {
  /* About section */
  .gnc-about-grid,
  .gnc-about-inner {
    display: block !important;
    padding: 3rem 1.25rem !important;
  }

  /* Collections grid */
  #collections .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  #collections .max-w-7xl {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Exhibitions section */
  .gnc-exhibitions-grid,
  [class*="grid-cols-3"].gnc-exhibitions {
    grid-template-columns: 1fr !important;
  }

  /* Visit section */
  .gnc-visit-grid,
  .gnc-visit-info-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }
}

@media (max-width: 480px) {
  #collections .grid {
    grid-template-columns: 1fr !important;
  }

  .gnc-visit-grid,
  .gnc-visit-info-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 12. SINGLE COLLECTION PAGE ──────────────────────────────── */
@media (max-width: 768px) {
  .gnc-archive[style*="background:#0A0A0A"] {
    padding: 3rem 1.25rem 5rem !important;
  }
}

/* ── 13. FLUID TYPOGRAPHY — works at every viewport ─────────── */
/*
   Strategy: clamp(MIN, FLUID, MAX)
   - MIN  = smallest readable size on 320px phone
   - FLUID= vw-based so it scales between breakpoints
   - MAX  = desktop value from Customizer
   No media queries needed — clamp() handles everything.
*/

/* Base root size — scales the whole rem ladder */
html { font-size: clamp(14px, 1.5vw, 16px); }

/* Headings — already set with clamp in enqueue.php,
   these !important overrides ensure nothing breaks them */
h1 { line-height: 1.1 !important; }
h2 { line-height: 1.15 !important; }
h3 { line-height: 1.2 !important; }
h4, h5, h6 { line-height: 1.3 !important; }

/* ── Hero slider typography ──────────────────────────── */
.gnc-slide__line1 { font-size: clamp(1.5rem,  5vw, 3rem)   !important; }
.gnc-slide__line2 { font-size: clamp(2rem,    8vw, 5.5rem)  !important; }
.gnc-slide__sub   { font-size: clamp(0.7rem,  1.5vw, 0.875rem) !important; }

/* ── Page banners ────────────────────────────────────── */
.gnc-banner__eyebrow { font-size: clamp(8px, 1.2vw, 10px) !important; }
.gnc-banner__title   { font-size: clamp(2rem, 7vw, 5rem)  !important; }
.gnc-banner__sub     { font-size: clamp(0.8rem, 2vw, 1rem) !important; }

/* ── Section labels ──────────────────────────────────── */
.gnc-section-label,
.gnc-section-label--light { font-size: clamp(7px, 1vw, 10px) !important; }

/* ── Nav links ───────────────────────────────────────── */
.gnc-nav-link     { font-size: clamp(7px, 1.1vw, 11px) !important; }
.gnc-nav-cta-btn  { font-size: clamp(7px, 1vw,  10px)  !important; }

/* ── Card titles ─────────────────────────────────────── */
.gnc-card__title       { font-size: clamp(0.9rem, 2.5vw, 1.25rem) !important; }
.gnc-card__subtitle    { font-size: clamp(0.75rem, 1.8vw, 0.875rem) !important; }
.gnc-masonry__title    { font-size: clamp(0.8rem, 2vw, 1.1rem) !important; }
.gnc-masonry__artist   { font-size: clamp(9px, 1.2vw, 11px) !important; }
.gnc-masonry__price    { font-size: clamp(9px, 1.2vw, 11px) !important; }
.gnc-masonry__dims     { font-size: clamp(8px, 1vw, 10px) !important; }

/* ── Services section ────────────────────────────────── */
.gnc-services__heading { font-size: clamp(1.75rem, 4vw, 3.5rem) !important; }
.gnc-services__title   { font-size: clamp(1.1rem, 2.5vw, 1.5rem) !important; }
.gnc-services__desc    { font-size: clamp(0.8rem, 1.6vw, 0.875rem) !important; }
.gnc-services__num     { font-size: clamp(8px, 1vw, 10px) !important; }
.gnc-services__cta     { font-size: clamp(8px, 1vw, 10px) !important; }

/* ── Artist Spotlight ────────────────────────────────── */
.gnc-spotlight__label  { font-size: clamp(7px, 1vw, 9px) !important; }
.gnc-spotlight__name   { font-size: clamp(2.5rem, 7vw, 6rem) !important; }
.gnc-spotlight__medium { font-size: clamp(8px, 1.1vw, 10px) !important; }
.gnc-spotlight__bio    { font-size: clamp(0.8rem, 1.6vw, 0.875rem) !important; }

/* ── Footer ──────────────────────────────────────────── */
.gnc-footer__statement { font-size: clamp(1.5rem, 4vw, 3.5rem) !important; }
.gnc-footer__heading   { font-size: clamp(8px, 1vw, 10px) !important; }
.gnc-footer__link      { font-size: clamp(0.8rem, 1.5vw, 0.875rem) !important; }
.gnc-footer__location  { font-size: clamp(0.75rem, 1.4vw, 0.875rem) !important; }
.gnc-footer__legal-link,
.gnc-footer__copy      { font-size: clamp(9px, 1.1vw, 11px) !important; }

/* ── Exhibition tabs ─────────────────────────────────── */
.gnc-tab               { font-size: clamp(8px, 1.2vw, 11px) !important; }

/* ── Single work page ────────────────────────────────── */
.gnc-work-single__title   { font-size: clamp(1.5rem, 4vw, 2.5rem) !important; }
.gnc-work-single__artist  { font-size: clamp(0.75rem, 1.5vw, 0.875rem) !important; }
.gnc-work-single__price   { font-size: clamp(1.1rem, 2.5vw, 1.5rem) !important; }
.gnc-work-single__label   { font-size: clamp(8px, 1vw, 10px) !important; }
.gnc-work-single__value   { font-size: clamp(0.8rem, 1.6vw, 0.9375rem) !important; }
.gnc-work-action          { font-size: clamp(8px, 1.1vw, 10px) !important; }

/* ── Blog cards ──────────────────────────────────────── */
.gnc-blog-card__title   { font-size: clamp(1rem, 2.5vw, 1.4rem) !important; }
.gnc-blog-card__excerpt { font-size: clamp(0.8rem, 1.6vw, 0.875rem) !important; }
.gnc-blog-card__cat     { font-size: clamp(7px, 1vw, 8px) !important; }
.gnc-blog-card__date    { font-size: clamp(8px, 1.1vw, 10px) !important; }
.gnc-blog-card__more    { font-size: clamp(8px, 1.1vw, 10px) !important; }

/* ── Pagination ──────────────────────────────────────── */
.gnc-pagination a,
.gnc-pagination span    { font-size: clamp(9px, 1.2vw, 12px) !important; }

/* ── Archive / search result count ──────────────────── */
.gnc-search-result-count { font-size: clamp(0.75rem, 1.5vw, 0.875rem) !important; }

/* ── Contact page ────────────────────────────────────── */
.gnc-contact-info__label { font-size: clamp(7px, 1vw, 9px) !important; }
.gnc-contact-info__value { font-size: clamp(0.8rem, 1.6vw, 0.9375rem) !important; }

/* ── Artist single page ──────────────────────────────── */
.gnc-artist-single__name   { font-size: clamp(1.75rem, 5vw, 3.5rem) !important; }
.gnc-artist-single__medium { font-size: clamp(8px, 1.1vw, 11px) !important; }
.gnc-artist-single__bio    { font-size: clamp(0.85rem, 1.8vw, 1rem) !important; }

/* ── Visit section ───────────────────────────────────── */
.gnc-visit__label   { font-size: clamp(7px, 1vw, 9px) !important; }
.gnc-visit__value   { font-size: clamp(0.8rem, 1.6vw, 0.9375rem) !important; }
.gnc-visit__heading { font-size: clamp(1.5rem, 4vw, 2.5rem) !important; }

/* ── Empty states ────────────────────────────────────── */
.gnc-empty__msg { font-size: clamp(0.8rem, 1.6vw, 1rem) !important; }

/* ── 14. GENERAL SPACING ─────────────────────────────────────── */
@media (max-width: 768px) {
  /* Tailwind py-32 → reduce to py-16 equivalent */
  .py-32 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .py-24 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .mb-20 { margin-bottom: 3rem !important; }
  .mb-16 { margin-bottom: 2rem !important; }

  /* Max-width containers */
  .max-w-7xl { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .px-6      { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}

/* ── 15. PAGINATION ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .gnc-pagination {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    justify-content: center !important;
    padding: 1.5rem 1.25rem !important;
  }
}

/* ── 16. IMAGE OVERFLOW FIX ──────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
}

/* ── 17. TABLET (769–1024px) ─────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .gnc-archive__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .gnc-archive__grid--4 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .gnc-masonry {
    columns: 3 !important;
  }

  .gnc-footer__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .gnc-footer__brand {
    grid-column: 1 / -1 !important;
  }
}

/* ── 18. PREVENT HORIZONTAL SCROLL ──────────────────────────── */
html, body {
  overflow-x: hidden;
}

/* ── 18b. KILL NATIVE SMOOTH SCROLL — Lenis owns this ───────── */
/* If scroll-behavior: smooth is set anywhere it fights Lenis    */
html {
  scroll-behavior: auto !important;
}

/* ── 19. SERVICES SECTION (overrides already in components.css) ── */
@media (max-width: 768px) {
  .gnc-services { padding: 4rem 1.25rem 5rem !important; }
}

/* ── 20. SPOTLIGHT ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .gnc-spotlight { padding: 4rem 1.25rem !important; }
  .gnc-spotlight__name { font-size: clamp(2.5rem, 10vw, 4rem) !important; }
}

/* ── 21. EXHIBITION TABS ─────────────────────────────────────── */
@media (max-width: 768px) {
  .gnc-tab { padding: 0.75rem 1rem !important; }
}

/* ── 22. SEARCH BAR ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .gnc-az-filter { gap: 1px !important; }
  .gnc-az-filter__item { width: 28px !important; height: 28px !important; font-size: 10px !important; }
}