/* ================================================================
   GALLERY NOIR CHIC — iOS / Cross-Browser Compatibility Fixes
   Loaded last so these always win.
   ================================================================ */

/* ── 1. GLOBAL BASELINE ─────────────────────────────────────── */

/* Prevent iOS from auto-resizing text in landscape */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Smooth font rendering on all WebKit/Blink */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Kill tap highlight on all interactive elements */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ── 2. SAFE AREA INSETS (notch / Dynamic Island / home bar) ─ */

/* Header must clear the status bar on notched devices */
.gnc-header {
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(var(--gnc-header-h, 90px) + env(safe-area-inset-top, 0px));
}

/* Nav overlay covers full screen including notch */
.gnc-nav-overlay {
  padding-top: env(safe-area-inset-top, 0px);
}

/* Floater stays above home-indicator bar */
.gnc-floater {
  bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
  right:  calc(2rem + env(safe-area-inset-right,  0px));
}
@media (max-width: 480px) {
  .gnc-floater {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    right:  calc(1rem + env(safe-area-inset-right,  0px));
  }
}

/* ── 3. HERO HEIGHT — svh fallback for iOS < 15.4 ───────────── */
.gnc-hero-slider {
  height: 100vh;       /* fallback */
  height: 100svh;      /* modern — excludes browser chrome */
  min-height: 600px;
}

/* ── 4. FIT-CONTENT PREFIX ───────────────────────────────────── */
.gnc-slide__cta {
  width: -webkit-fit-content;
  width: fit-content;
}

/* ── 5. USER-SELECT PREFIX ───────────────────────────────────── */
.gnc-hero-slider,
.gnc-home-card,
.gnc-floater__toggle {
  -webkit-user-select: none;
  user-select: none;
}

/* ── 6. MARGIN-INLINE FALLBACK (iOS < 14.5) ─────────────────── */
.gnc-banner__inner,
.gnc-home-section__inner,
.gnc-header__inner {
  margin-left: auto;
  margin-right: auto;
}

/* ── 7. INPUTS — prevent iOS auto-zoom (font-size must be 16px) */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea,
select {
  font-size: 16px !important;
  -webkit-appearance: none;
  border-radius: 0;
}

/* ── 8. BUTTONS — remove iOS default button styling ─────────── */
button,
[type="submit"],
[type="button"],
[type="reset"] {
  -webkit-appearance: none;
  border-radius: 0;
  touch-action: manipulation;
}

/* ── 9. OVERLAY SCROLL — contain bounce to overlay, not page ── */
.gnc-nav-overlay {
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── 10. TOUCH ACTION — hero slider swipe + card taps ───────── */
.gnc-hero-slider {
  touch-action: pan-y pinch-zoom;
}

.gnc-home-card,
.gnc-floater__toggle,
.gnc-hamburger {
  touch-action: manipulation; /* faster tap, no 300ms delay */
}

/* ── 11. POSITION:FIXED — header stays put when overlay opens ─ */
/* (JS handles scroll-lock via position:fixed on body — see nav.js) */
body.gnc-nav-open {
  position: fixed;
  width: 100%;
  overflow-y: scroll; /* keep scrollbar width so layout doesn't shift */
}

.gnc-slider__arrow {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ── 13. TRANSITION / ANIMATION — force GPU layer on iOS ────── */
.gnc-slide,
.gnc-nav-overlay,
.gnc-home-card__img {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

/* ── 14. OBJECT-FIT — already supported on iOS 10+ ─────────── */
/* No fix needed — listed here for audit completeness */

/* ── 15. GAP IN FLEX — supported iOS 14.5+ ─────────────────── */
/* Fallback for older iOS using margins */
@supports not (gap: 1rem) {
  .gnc-header__right > * + * { margin-left: 0.25rem; }
  .gnc-home-grid { gap: 0; }
  .gnc-home-grid > * { margin: 1rem 0.875rem; }
}

/* ── 16. ASPECT-RATIO FALLBACK — iOS < 15 ───────────────────── */
@media (max-width: 768px) {
  @supports not (aspect-ratio: 1/1) {
    .gnc-spotlight__img,
    .gnc-spotlight__img-placeholder {
      height: 0;
      padding-bottom: 100%; /* 1:1 square */
      position: relative;
      width: 100%;
    }
    .gnc-spotlight__img {
      position: absolute;
      top: 0; left: 0;
      height: 100%;
      padding-bottom: 0;
    }
  }
}

@supports not (aspect-ratio: 4/5) {
  .gnc-home-card__img,
  .gnc-home-card__img-placeholder {
    height: 0;
    padding-bottom: 125%; /* 4:5 ratio */
    position: relative;
    width: 100%;
  }
  .gnc-home-card__img {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    padding-bottom: 0;
  }
}