/* ═══════════════════════════════════════════════════════════════
   Homepage — Key Affiliates section
   Mobile & tablet (≤1024px) overrides for the AccordionGallery.
   ─────────────────────────────────────────────────────────────
   Goal: on phones/tablets the affiliate accordion collapses into
   a vertical stack of full-bleed image cards, each with the
   company name as an editorial overlay INSIDE the image
   (no capsule badge below). Desktop layout is untouched — the
   AccordionGallery's own horizontal hover-expand behavior stays.
   Scoped to `.key-affiliates-accordion-wrap` so About us and
   any other pages that reuse AccordionGallery aren't affected.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  /* Re-order the section on mobile: title (head) → "— KEY AFFILIATES ─"
     hairline label → the accordion. Desktop keeps its native flow
     (title → accordion → label). We switch the .container to flex
     column and use `order` to promote the label above the gallery. */
  .section.key-affiliates > .container {
    display: flex;
    flex-direction: column;
  }
  .section.key-affiliates > .container > .key-affiliates-head {
    order: 1;
  }
  .section.key-affiliates > .container > .key-affiliates[aria-label="Key Affiliates"] {
    order: 2;
    margin-top: 0;
    margin-bottom: clamp(14px, 3vw, 22px);
  }
  .section.key-affiliates > .container > .key-affiliates-accordion-wrap {
    order: 3;
  }

  /* Full-bleed the accordion so images run edge-to-edge to the
     viewport. The parent .container has side padding, so we cancel
     it with negative margins and stretch the width back out. */
  .key-affiliates-accordion-wrap {
    margin-left: calc(-1 * var(--gutter, 20px));
    margin-right: calc(-1 * var(--gutter, 20px));
    width: calc(100% + 2 * var(--gutter, 20px));
  }

  /* Each panel becomes a tall image card. Kill radius/border/gap
     so cards butt against each other as one continuous strip. */
  .key-affiliates-accordion-wrap .ag-panel {
    display: block !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    position: relative;
  }
  .key-affiliates-accordion-wrap .ag-panel + .ag-panel {
    border-top: 0 !important; /* no hairline between cards */
  }

  /* Image frame — bigger, cinematic 4:3 crop. Fills the card. */
  .key-affiliates-accordion-wrap .ag-panel__frame {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #0a0a0f;
  }
  .key-affiliates-accordion-wrap .ag-panel__media {
    width: 100% !important;
    height: 100% !important;
    transform: translate(-50%, -50%) !important;
  }
  .key-affiliates-accordion-wrap .ag-panel__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    background: transparent !important;
  }
  /* Kill any grayscale/overlay from the shared component. */
  .key-affiliates-accordion-wrap .ag-panel__media { filter: none !important; }

  /* Dark gradient scrim on the bottom half of the image so the
     white overlay title stays readable no matter what the photo
     underneath looks like (bright sky, light logos, etc). */
  .key-affiliates-accordion-wrap .ag-panel__overlay {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0.55) 100%
    ) !important;
    opacity: 1 !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none;
    z-index: 1;
  }
  .key-affiliates-accordion-wrap .ag-panel__overlay::after {
    display: none !important;
  }

  /* ── Label as bottom-left editorial overlay ── */
  .key-affiliates-accordion-wrap .ag-panel__label {
    /* Reset the mobile capsule styles (white pill under image)
       and re-position the label ON TOP of the image, bottom-left. */
    display: flex !important;
    position: absolute !important;
    left: clamp(20px, 5vw, 32px) !important;
    right: clamp(20px, 5vw, 32px) !important;
    bottom: clamp(20px, 5vw, 28px) !important;
    top: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: auto !important;
    max-width: none !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    z-index: 2;
    pointer-events: none;
  }
  .key-affiliates-accordion-wrap .ag-panel__bar { display: none !important; }
  .key-affiliates-accordion-wrap .ag-panel__text {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    white-space: normal !important;
    color: #ffffff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55) !important;
    text-align: left !important;
    font-family: "Montserrat", "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: clamp(24px, 5.6vw, 34px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
  }
  .key-affiliates-accordion-wrap .ag-panel__name {
    display: inline !important;
    color: inherit;
  }
  .key-affiliates-accordion-wrap .ag-panel__name::after {
    display: none !important;
  }

  /* Arrow — small white circle on the right, matching the ref
     screenshot ("→" pill on each row). Reuses the existing SVG
     the AccordionGallery already renders. */
  .key-affiliates-accordion-wrap .ag-panel__arrow {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 10px;
    color: #ffffff;
    box-sizing: border-box;
  }
  .key-affiliates-accordion-wrap .ag-panel__arrow line,
  .key-affiliates-accordion-wrap .ag-panel__arrow polyline {
    stroke: #ffffff !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Homepage — mobile ScrollExpand (Intro / model video)
   ─────────────────────────────────────────────────────────────
   Mobile-only (≤900px):
   dvh+contain wasn't enough on some Android browsers. The scroll
   between the sticky Intro and the following Affiliates section
   still visibly jittered every time the URL bar animated.

   Radical fix: on mobile we DROP the sticky pin entirely. The
   video becomes a normal block that scrolls with the page — no
   pin, no track height, no reflow trigger. An inline
   IntersectionObserver (in DSMADE Homepage.html) plays the video
   whenever it enters the viewport and pauses when it leaves, so
   the model reel still plays without the desktop scroll-expand.

   Desktop (>900px) keeps the sticky scroll-expand untouched.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Kill the sticky pin — stage becomes a normal, static block. */
  .intro-section .scroll-expand__stage {
    position: static !important;
    height: auto !important;
    aspect-ratio: 16 / 10;
    overflow: hidden;
  }
  /* Collapse the extra-tall scroll track back to just the stage. */
  .intro-section .scroll-expand__track {
    height: auto !important;
  }
  /* Frame fills the (now static) stage as a normal video card;
     no clip-path reveal on mobile. */
  .intro-section .scroll-expand__frame {
    position: absolute !important;
    inset: 0 !important;
    clip-path: none !important;
  }
  /* No cover-zoom transform — plays 1:1 like any inline video. */
  .intro-section .scroll-expand__media {
    transform: none !important;
    opacity: 1 !important;
  }
  /* Hide the "scroll to expand" hint + scrim (no gesture on mobile). */
  .intro-section .scroll-expand__hint,
  .intro-section .scroll-expand__scrim {
    display: none !important;
  }
  /* Contain paint so anything that DOES nudge here can't affect
     surrounding sections. */
  .intro-section {
    contain: layout paint;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Homepage — mobile nav pill contrast (aggressive override)
   ─────────────────────────────────────────────────────────────
   On mobile (≤900px), FORCE the nav pill to be a solid white pill
   with dark ink — always. Ignores the JS-driven auto-theme
   (nav-wrap--light / --dark) which flips it to #0e0e11 on dark
   sections; that variant becomes invisible on a dark backdrop
   (and worse in system dark mode).

   Uses html-scoped selectors + !important so it wins over both
   main.min.css and any inline styles the React nav might set.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  html body .nav-wrap .nav-pill,
  html body .nav-wrap--light .nav-pill,
  html body .nav-wrap--dark .nav-pill {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0a0a0a !important;
    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.35),
      0 2px 6px rgba(0, 0, 0, 0.20),
      0 0 0 1px rgba(0, 0, 0, 0.08) inset !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: none !important;
    opacity: 1 !important;
  }
  /* Logo — cancel any invert() filter (light-mode logo image is dark, so no filter needed). */
  html body .nav-wrap .nav-logo img,
  html body .nav-wrap--light .nav-logo img,
  html body .nav-wrap--dark .nav-logo img {
    filter: none !important;
  }
  /* Hamburger bars — solid black. */
  html body .nav-wrap .nav-hamburger span,
  html body .nav-wrap--light .nav-hamburger span,
  html body .nav-wrap--dark .nav-hamburger span {
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
  }
  /* All nav links / labels inside the pill — dark ink. */
  html body .nav-wrap .nav-item > a,
  html body .nav-wrap--light .nav-item > a,
  html body .nav-wrap--dark .nav-item > a,
  html body .nav-wrap .nav-login,
  html body .nav-wrap--light .nav-login,
  html body .nav-wrap--dark .nav-login {
    color: #0a0a0a !important;
  }
}