/*
 * Divya Stones — Mobile / Responsive Fixes
 * Loaded after style.css. Scoped overrides only — no base styles changed.
 */

/* ============================================================
   1. MOBILE NAV — fix white text on light drawer background
   ============================================================ */
@media (max-width: 1100px) {
  /* The drawer bg = var(--bg) = off-white.
     .site-header .nav__link is white by default → invisible. Override: */
  .site-header .nav.is-open .nav__link {
    color: var(--ink-2) !important;
  }
  .site-header .nav.is-open .nav__link:hover {
    color: var(--ink) !important;
    background: var(--bg-2);
    border-radius: var(--radius);
  }
  .site-header .nav.is-open .nav__link.is-active {
    color: var(--ink) !important;
  }
  .site-header .nav.is-open .nav__link.is-active::after {
    background: var(--ink) !important;
  }
  .site-header .nav.is-open .caret {
    color: var(--muted) !important;
  }
  .site-header .nav.is-open .nav__sub a {
    color: var(--muted) !important;
  }
  .site-header .nav.is-open .nav__sub a:hover {
    color: var(--ink) !important;
    background: var(--bg-2);
  }
  /* Products accordion: hide sub by default on mobile */
  .nav.is-open .nav__has-sub .nav__sub {
    display: none;
  }
  .nav.is-open .nav__has-sub.sub-open .nav__sub {
    display: block;
  }
  /* Hide the old desktop caret (›) inside nav drawer — use the caret-btn instead */
  .nav.is-open .nav__has-sub > .nav__link > .caret {
    display: none;
  }
  .nav__caret-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    cursor: pointer;
    color: var(--muted);
    font-size: 18px;
    user-select: none;
    border-radius: var(--radius);
    transition: background .15s, color .15s;
    flex-shrink: 0;
  }
  .nav__caret-btn:hover { background: var(--bg-2); color: var(--ink); }
  .sub-open .nav__caret-btn { transform: rotate(90deg); color: var(--ink); }
  /* Make Products row flex so caret sits right */
  .nav__has-sub > .nav__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /* Indent sub-items */
  .nav.is-open .nav__sub {
    padding-left: calc(var(--pad-x) + 8px);
    border-left: 2px solid var(--line);
    margin: 0 var(--pad-x) 8px;
    padding-top: 6px; padding-bottom: 6px;
  }
  /* Prevent the nav bar from going over page content */
  .nav { z-index: 50; }
}

/* ============================================================
   2. SPECIMEN SECTION — fix massive blank gap on mobile
   ============================================================ */
@media (max-width: 880px) {
  .specimen--sm .specimen__inner {
    grid-template-columns: 1fr !important;
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    gap: 28px;
    text-align: center;
  }
  .specimen--sm .specimen__rail--left { display: none !important; }
  .specimen--sm .specimen__rail--right {
    align-items: center;
    padding-top: 0;
  }
  .specimen--sm .specimen__stage {
    max-width: 70% !important;
    margin: 0 auto;
  }
  /* Shrink the ghost watermark that overflows on mobile */
  .specimen__mark {
    font-size: clamp(80px, 28vw, 180px) !important;
    white-space: normal !important;
  }
  /* Ensure section doesn't overflow horizontally */
  .specimen { overflow: hidden; }
  .specimen__inner { overflow: hidden; }
}

/* ============================================================
   3. CATEGORY HERO (m-hero) — fix pop overlap on mobile
   ============================================================ */
@media (max-width: 760px) {
  .m-hero { overflow: hidden; }
  .m-hero__inner {
    padding-top: clamp(110px, 15vh, 140px) !important;
    gap: 20px !important;
  }
  .m-hero__pop {
    max-width: 200px !important;
    margin: 0 auto !important;
  }
  .m-hero__pop-img {
    max-height: 270px;
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
  }
  .m-hero__info { min-height: 200px !important; }
  .m-hero__title { font-size: clamp(32px, 9vw, 52px); }
}
@media (max-width: 480px) {
  /* Hide the pop on tiny screens — keeps hero clean */
  .m-hero__pop { display: none !important; }
  .m-hero__title-col { padding-top: 0; }
  .m-hero__eyebrow { margin-bottom: 8px; }
}

/* ============================================================
   4. HERO SLIDES — prevent banner merging
   ============================================================ */
@media (max-width: 720px) {
  .hero { min-height: 580px !important; overflow: hidden; }
  .hero__slides, .hero__slide { height: 100%; }
  .hero__slide-img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
}

/* ============================================================
   5. COLLECTIONS GRID — better mobile layout
   ============================================================ */
@media (max-width: 760px) {
  #collections .coll-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
}
@media (max-width: 480px) {
  #collections .coll-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   6. VENEER SECTION — stack on mobile
   ============================================================ */
@media (max-width: 880px) {
  .vnr__grid { grid-template-columns: 1fr !important; gap: 36px; }
  .vnr__tiles { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .vnr__lede { max-width: 100%; }
}
@media (max-width: 480px) {
  .vnr__tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   7. PRODUCT GRID — fix overflow on mobile
   ============================================================ */
@media (max-width: 720px) {
  .prod-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
}
@media (max-width: 380px) {
  .prod-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   8. GALLERY ("Where our stone lives") — single col on mobile
   ============================================================ */
@media (max-width: 520px) {
  .projects .gallery { grid-template-columns: 1fr !important; }
  .gallery__item { aspect-ratio: 4 / 3 !important; }
}

/* ============================================================
   9. SECTION / TYPOGRAPHY overflow prevention
   ============================================================ */
@media (max-width: 720px) {
  .wrap { overflow-x: hidden; }
  .display { word-break: break-word; }
  .hero__title { font-size: clamp(36px, 10vw, 62px); }
  .hero__sub { font-size: 15px; }
  /* Announcement bar — show fewer items */
  .announce__list { gap: 10px; }
  .announce__item:nth-child(n+3) { display: none; } /* Show only 2 items on small */
}

/* ============================================================
   10. ABOUT / PROCESS / TESTIMONIALS — column stacking
   ============================================================ */
@media (max-width: 720px) {
  .about__grid { gap: 40px; }
  .about__media-stack { aspect-ratio: 4/3; }
  .t-grid { grid-template-columns: 1fr !important; }
  .t-card { width: 100% !important; }
}

/* ============================================================
   11. CTA SECTION — form stacking
   ============================================================ */
@media (max-width: 720px) {
  .cta__grid { gap: 40px; }
  .contact-form { width: 100%; }
}

/* ============================================================
   12. FOOTER
   ============================================================ */
@media (max-width: 480px) {
  .footer__top { grid-template-columns: 1fr !important; }
  .footer__col { width: 100%; }
}

/* ============================================================
   13. PROD CARD images — ensure cover works cleanly
   ============================================================ */
.prod__img {
  background-size: cover;
  background-position: center;
  image-rendering: auto; /* browser default — allows smooth downscaling */
}

/* ============================================================
   14. COLLECTION CARD — ensure poster fills portrait card
   ============================================================ */
.coll-card::before {
  background-size: cover !important;
  background-position: center !important;
}