/* ══════════════════════════════════════════════════════════════════════
   BDK — RESPONSIVE / MOBILE FIXES
   ----------------------------------------------------------------------
   Loaded LAST (after main.css, header.css and every page stylesheet) so it
   only tops up the cascade. Everything here is scoped to tablet / mobile
   breakpoints or to genuinely safe global guards — the desktop design is
   left untouched.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Global overflow / media guards ─────────────────────────────── */
/* "clip" hides sideways overflow like "hidden" did, but — unlike hidden on
   both html and body — doesn't turn <body> into a scroll box, which had
   stopped the sticky category / gemstone bars from sticking. Browsers that
   don't know "clip" keep using "hidden". */
html { overflow-x: hidden; overflow-x: clip; }
body { overflow-x: hidden; overflow-x: clip; }

/* Never let a raw media element push the viewport wider than the screen.
   (Class-based rules like .slide-img{height:100%} keep winning on specificity,
   so aspect-ratio behaviour is unchanged — this only clamps the max width.) */
img,
video,
iframe,
svg {
  max-width: 100%;
}

/* On touch devices bring the real cursor back (the site hides it for the
   desktop custom-cursor effect). Pointer devices are unaffected. */
@media (hover: none) {
  * { cursor: auto !important; }
}

/* ── 2. Detail / product quick-view panel ──────────────────────────── */
/* main.css forces .dp-img-main img { min-width:500px } which overflows the
   slide-in panel on phones. */
@media (max-width: 768px) {
  .dp-img-main img {
    min-width: 0;
    padding: 20px;
  }
  .dp-inner { grid-template-columns: 1fr; }
  .dp-right { padding: 32px 20px; }
}

/* ── 3. Homepage — Founder section image ───────────────────────────── */
/* Below 1024px the founder photo container has no height (its 600px height is
   only declared in a min-width:1024 query), so the image collapsed to nothing. */
@media (max-width: 1023px) {
  .section-founder { min-height: 0; }
  .founder-img-block { min-height: 0; }
  .founder-img-placeholder { display: none; }
  .founder-img-edge {
    height: auto;
    width: 100%;
  }
  .founder-img-edge img {
    position: static;
    width: 100%;
    height: auto;
    display: block;
  }
}

/* ── 4. Homepage — Bridal full-bleed banner ────────────────────────── */
/* .excl-media is only positioned (absolute) at >=1024px; below that its
   images (height:100%) had no box to fill. Stack the banner above the copy. */
@media (max-width: 1023px) {
  .excl-bridal { min-height: 0; }
  .excl-media {
    position: relative;
    display: block;
    width: 100%;
    min-height: 320px;
  }
  .excl-media .excl-img-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .excl-bridal-content {
    position: relative;
    z-index: 2;
    padding: 48px 24px 56px;
  }
}

/* ── 5. Homepage — Moon / Emerald exclusive images ─────────────────── */
/* main.css gives these a fixed 400px height on mobile but no object-fit,
   which stretched the artwork. */
@media (max-width: 768px) {
  .excl-img-moon,
  .excl-img-emerald {
    object-fit: cover;
    width: 100%;
  }
  .excl-block-img { height: auto; }
}

/* ── 6. Homepage — Hero slider controls on small screens ───────────── */
@media (max-width: 768px) {
  .slider-arrow {
    width: 38px;
    height: 38px;
    font-size: 14px;
    opacity: .78;
  }
  .slider-prev { left: 10px; }
  .slider-next { right: 10px; }
  .slide-content { bottom: 12%; }
}

/* ── 7. Touch-target sizing ────────────────────────────────────────── */
@media (max-width: 768px) {
  .fb-social a {
    width: 40px;
    height: 40px;
  }
  .footer-links a,
  .bdk-m-section-links a {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* ── 8. Legacy safety: stop any grid section forcing a horizontal scrollbar */
@media (max-width: 768px) {
  .section-open,
  .section-story,
  .section-bespoke,
  .stone-bar {
    max-width: 100%;
  }
}

/* ── Responsive images (includes/image-helpers.php) ─────────────────────────
   <picture class="bdk-pic"> wraps an <img> only to offer WebP + sized copies.
   display:contents takes the wrapper out of layout, so the <img> sits in its
   parent's flex/grid/absolute layout exactly as it did before. */
.bdk-pic { display: contents; }
/* …and its <source> must not become a (zero-size) flex/grid item that adds a
   gap. Hiding it doesn't affect which image the browser picks. */
.bdk-pic > source { display: none; }

/* Responsive CSS backgrounds set by bdk_bg(): phones get the smaller copy,
   larger screens the bigger one; WebP where the browser supports it. */
.bdk-bg { background-image: var(--bj-l) !important; }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .bdk-bg { background-image: image-set(var(--bw-l) type("image/webp"), var(--bj-l) 1x) !important; }
}
@media (max-width: 767px) {
  .bdk-bg { background-image: var(--bj-s) !important; }
  @supports (background-image: image-set(url("x.webp") type("image/webp"))) {
    .bdk-bg { background-image: image-set(var(--bw-s) type("image/webp"), var(--bj-s) 1x) !important; }
  }
}

/* Sticky category bars (fine jewellery) and gemstone bars sit directly under
   the fixed header: the phone/tablet header (.bdk-mobile, below 1280px) is
   84px tall, the pinned desktop header 54px. */
.bdk-mobile .cat-nav,
.bdk-mobile .gem-nav { top: 83px; }

/* "Explore the Collections" (bridal pages) and "Other Collections" (gemstone
   pages): every collection visible at once instead of a sideways carousel —
   one row on tablet/desktop, a two-column grid on phones (an odd last tile
   spans the full width). */
.other-carousel-arrow { display: none; }
@media (min-width: 769px) {
  .other-grid .other-panel { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 768px) {
  .other-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    overflow: visible;
    scroll-snap-type: none;
  }
  .other-grid .other-panel { height: 240px; }
  .other-grid .other-panel:last-child:nth-child(odd) { grid-column: 1 / -1; }
}