/* ==========================================================================
   THE DIAMOND ART GALLERY — responsive.css
   --------------------------------------------------------------------------
   Loaded AFTER style.css.
   Strategy: scale the root variables first (typography + spacing + layout),
   then only re-flow the few layouts that cannot adapt from variables alone.

   Breakpoints
   01. Desktop            : max-width 1440px
   02. Small desktop      : max-width 1240px
   03. Tablet landscape   : max-width 1024px
   04. Tablet portrait    : max-width  900px
   05. Mobile             : max-width  640px
   06. Small mobile       : max-width  420px
   07. Touch devices      : hover: none
   ========================================================================== */


/* ==========================================================================
   01. DESKTOP — 1440px and below
   ========================================================================== */
@media (max-width: 1440px) {
  :root {
    --gutter-width: 40px;
    --brand-logo-width: 240px;
  }

  .why__row,
  .circle__row,
  .referral__row {
    gap: var(--space-48);
  }
}


/* ==========================================================================
   02. SMALL DESKTOP — 1240px and below
   ========================================================================== */
@media (max-width: 1240px) {
  :root {
    --fs-h1: 45px;
    --fs-h2: 38px;
    --fs-h3: 30px;
    --gutter-width: 32px;
    --section-padding-y: 80px;
    --brand-logo-width: 220px;
  }

  /* rails : 4 across */
  .rail__item {
    flex-basis: calc((100% - var(--space-24) * 3) / 4);
  }

  /* instagram : 4-up */
  .ig-tile {
    flex: 0 0 calc((100% - var(--space-12) * 3) / 4);
  }

  /* mega menu narrows with the viewport */
  .mega {
    padding: var(--space-24);
  }
}


/* ==========================================================================
   03. TABLET LANDSCAPE — 1024px and below
   ========================================================================== */
@media (max-width: 1024px) {

  /* ---------- Scaled tokens ---------- */
  :root {
    /* typography */
    --fs-h1: 40px;
    --fs-h2: 34px;
    --fs-h3: 28px;
    --fs-h4: 22px;
    --fs-h5: 19px;
    --fs-h6: 15px;

    /* spacing */
    --space-96: 72px;
    --space-80: 60px;
    --space-64: 48px;
    --space-56: 44px;
    --space-48: 36px;
    --space-40: 32px;
    --space-32: 26px;

    /* layout */
    --gutter-width: 24px;
    --section-padding-y: 72px;
    --header-height: 66px;

    /* components */
    --brand-logo-width: 200px;
    --corner-ornament-size: 48px;
    --hero-min-height: 80vh;
    --hero-copy-width: 560px;
  }

  /* ---------- Header : swap to hamburger ---------- */
  .nav { display: none; }
  .burger { display: flex; }

  /* ---------- Why Choose Us : stack, image first ---------- */
  .why__row {
    flex-direction: column;
    align-items: stretch;
  }

  .why__media,
  .why__content {
    flex: 1 1 auto;
  }

  /* ---------- Shop : the sidebar folds away behind a Filters button ---------- */
  .shop {
    flex-direction: column;
    gap: var(--space-24);
  }

  .toolbar__toggle { display: inline-flex; }

  /* the sidebar becomes a drawer : same markup, same open/close machinery
     as the cart, just a different set of box rules below this width */
  .facets {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-drawer);
    flex: none;
    width: 100%;
    max-width: var(--drawer-width);
    padding: 0 var(--space-24) var(--space-32);
    overflow-y: auto;
    clip-path: none;
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform var(--sweep-curve), visibility var(--transition-base);
  }

  .facets.is-open { visibility: visible; transform: translateX(0); }

  /* it is a layer over the page now, so it needs to read as one */
  .facets { box-shadow: var(--shadow-menu); }

  .facets__drawer-head {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--color-card);
  }

  /* ---------- Product page : gallery above the buy box ---------- */
  .pdp__row {
    flex-direction: column;
    align-items: stretch;
  }

  .pdp__gallery {
    position: static;
    flex: 1 1 auto;
  }

  .pdp__info { flex: 1 1 auto; }

  /* ---------- About the artist : stack ---------- */
  .artist {
    flex-direction: column;
    align-items: stretch;
  }

  .artist__frame { flex: 1 1 auto; }

  /* ---------- Collector's Circle : stack ---------- */
  .circle__row {
    flex-direction: column;
    align-items: stretch;
  }

  .circle__media,
  .circle__content {
    flex: 1 1 auto;
  }

  /* ---------- Referral : stack ---------- */
  .referral__row {
    flex-direction: column;
    align-items: stretch;
  }

  .referral__intro,
  .referral__steps {
    flex: 1 1 auto;
  }

  /* ---------- Categories : five across drops to three ---------- */
  .category-grid { grid-template-columns: repeat(3, 1fr); }

  /* ---------- Product grids : 4-up drops to 3-up ---------- */
  .row--4 > .col {
    flex: 0 1 calc((100% - var(--space-24) * 2) / 3);
  }

  /* ---------- Rails : 3 across ---------- */
  .rail__item {
    flex-basis: calc((100% - var(--space-24) * 2) / 3);
  }

  /* ---------- Instagram : 3-up ---------- */
  .ig-tile {
    flex: 0 0 calc((100% - var(--space-12) * 2) / 3);
  }

  /* ---------- Footer : brand above the link columns ---------- */
  .footer__top {
    flex-direction: column;
    gap: var(--space-40);
  }

  .footer__brand {
    flex: 1 1 auto;
  }
}


/* ==========================================================================
   04. TABLET PORTRAIT — 900px and below
   ========================================================================== */
@media (max-width: 900px) {

  .row--3 > .col {
    flex: 1 1 100%;
  }

  .row--4 > .col {
    flex: 0 1 calc((100% - var(--space-24)) / 2);
  }

  .rail-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .rail__item {
    flex-basis: calc((100% - var(--space-24)) / 2);
  }

  /* categories : one row of five is too tight here */
  .category-grid { grid-template-columns: repeat(2, 1fr); }

  /* newsletter : copy above the form */
  .panel {
    padding: var(--space-48) var(--space-32);
  }

  .newsletter__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-24);
  }

  .newsletter__action {
    max-width: none;
  }

  .footer__col {
    flex: 1 1 calc((100% - var(--space-40)) / 2);
  }

  .footer__nav {
    gap: var(--space-32);
  }
}


/* ==========================================================================
   05. MOBILE — 640px and below
   ========================================================================== */
@media (max-width: 640px) {

  /* ---------- Scaled tokens ---------- */
  :root {
    /* typography */
    --fs-h1: 34px;
    --fs-h2: 28px;
    --fs-h3: 24px;
    --fs-h4: 20px;
    --fs-h5: 18px;
    --fs-h6: 15px;
    --fs-20: 20px;
    --fs-19: 19px;
    --fs-18: 18px;
    --fs-17: 17px;

    /* spacing */
    --space-96: 56px;
    --space-80: 48px;
    --space-64: 40px;
    --space-56: 36px;
    --space-48: 28px;
    --space-40: 24px;
    --space-32: 20px;
    --space-24: 16px;

    /* layout */
    --gutter-width: 20px;
    --section-padding-y: 56px;
    --header-height: 60px;
    /* the notice wraps to two lines in this width */
    --announcement-height: 44px;

    /* components */
    --bevel-size: 6px;
    --icon-button-size: 36px;
    --icon-box-size: 36px;
    --brand-logo-width: 210px;
    --corner-ornament-size: 34px;
    --hero-min-height: 70vh;
    --hero-copy-width: 100%;
    --bracket-size: 16px;
  }

  .announcement {
    letter-spacing: var(--ls-normal);
  }

  /* ---------- Hero : picture above the copy ----------
     A background-cover banner crops to almost nothing in a portrait viewport,
     so on mobile the artwork becomes a real image in the flow and the section
     keeps only its hairline. */
  .hero {
    min-height: 0;
    padding-top: calc(var(--space-24) + var(--header-height));
    padding-bottom: var(--space-48);
    background-image: linear-gradient(90deg, transparent, var(--color-line), transparent);
    background-size: 100% 1px;
  }

  .hero__media { display: flex; }

  .container > .hero__media,
  .container > .hero__inner {
    width: 100%;
  }

  /* header runs out of room — wishlist and account move into the menu */
  .icon-btn--optional {
    display: none;
  }

  /* ---------- All grids : single column ---------- */
  .row--2 > .col,
  .row--3 > .col,
  .row--4 > .col {
    flex: 1 1 100%;
  }

  /* ---------- Rails : 1 card + a peek of the next ---------- */
  .rail__item {
    flex-basis: 82%;
  }

  /* ---------- Kit details : one column ----------
     Two columns leave each value about a dozen characters wide, so the canvas
     size broke across lines while the column beside it sat half empty. */
  .specs { grid-template-columns: 1fr; }

  /* the chips get their own line rather than a ragged run beside the label */
  .spec--wide { flex-wrap: wrap; }
  .spec--wide .drills { flex-basis: 100%; }

  /* ---------- Why Choose Us : one feature per row ---------- */
  .feature-row {
    flex: 1 1 100%;
  }

  .row--center .btn,
  .row--tight .btn {
    width: 100%;
  }

  /* ---------- Collector's Circle : less room given to the overlap ---------- */
  .circle__media {
    padding-bottom: var(--space-32);
    padding-left: var(--space-32);
  }

  /* ---------- Tiers : swipeable row ----------
     Four stacked rows ate a screen on their own, so the list becomes a
     snapping rail and each tier turns into a small card. */
  .tier-list {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--space-12);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  .tier-list::-webkit-scrollbar { display: none; }

  .tier {
    flex: 0 0 58%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-16);
    scroll-snap-align: start;
    background-color: var(--color-card);
    /* the divider only made sense while these were stacked rows */
    border-bottom: 0;
  }

  .tier__rate {
    min-width: 0;
    text-align: left;
  }

  /* ---------- Newsletter : stacked ---------- */
  .newsletter__form {
    flex-direction: column;
  }

  /* ---------- Product page ---------- */
  .pdp__cart { flex: 1 1 100%; }

  /* thumbnails move under the stage : a column of them would eat the width.
     they come first in the markup for keyboard order, so the stage is pulled
     above them with order rather than by reversing the source */
  .pdp__gallery { flex-direction: column; }

  .pdp__stage { order: 1; }

  .pdp__thumbs {
    order: 2;
    flex-direction: row;
    flex: 1 1 auto;
  }

  /* capped, otherwise three thumbs across a phone are nearly as tall as the
     stage they belong to */
  .pdp-thumb {
    flex: 1 1 0;
    min-width: 0;
    max-width: 96px;
  }

  /* less inset : the artwork has far less room to give away here */
  .pdp__stage > img { padding: var(--space-16); }
  .pdp-thumb img { padding: var(--space-4); }

  /* the section links are the first thing to go : the product and the cart
     are what the bar is for */
  .buybar__nav { display: none; }
  .buybar__product { margin-left: 0; flex: 1 1 auto; }
  .buybar__inner { gap: var(--space-16); }

  /* ---------- Referral steps ---------- */
  .step { padding: var(--space-16); }
  .step:hover { transform: none; }

  /* ---------- Instagram : 2-up ---------- */
  /* two and a peek of the third, so the swipe is discoverable */
  .ig-tile {
    flex: 0 0 44%;
  }

  /* ---------- Footer : two columns, not one long stack ---------- */
  .footer__col {
    flex: 0 1 calc((100% - var(--space-24)) / 2);
  }

  .footer__nav {
    gap: var(--space-32) var(--space-24);
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* ---------- Chat widget ---------- */
  .chat-fab {
    right: var(--space-16);
    bottom: var(--space-16);
  }

  .chat-panel {
    right: var(--space-16);
    left: var(--space-16);
    bottom: calc(var(--chat-fab-size) + var(--space-32));
    width: auto;
    max-width: none;
  }
}


/* ==========================================================================
   06. SMALL MOBILE — 420px and below
   ========================================================================== */
@media (max-width: 420px) {
  :root {
    --fs-h1: 30px;
    --fs-h2: 26px;
    --gutter-width: 16px;
    --section-padding-y: 48px;
    --brand-logo-width: 180px;
  }

  .rail__item {
    flex-basis: 100%;
  }

  /* ---------- Categories : swipeable row ----------
     A single column would make five tall tiles to scroll past, so the grid
     becomes a snapping rail with the next tile peeking in, the same pattern
     the product rails use. */
  .category-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--space-16);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  .category-grid::-webkit-scrollbar { display: none; }

  .category-grid > .category-tile {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }

  .ig-tile {
    flex: 0 0 72%;
  }
}


/* ==========================================================================
   07. TOUCH DEVICES — no hover, so hover-only affordances stay visible
   ========================================================================== */
@media (hover: none) {
  /* it keeps its centring transform, it just becomes visible */
  .product-card__cart {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  .product-card__media::after {
    opacity: 1;
  }
}

/* ==========================================================================
   08. LONG-FORM LEGAL / INFO PAGES
   ========================================================================== */
@media (max-width: 640px) {
  .legal { gap: var(--space-40); }
  .legal__title { font-size: var(--fs-h5); }
}

/* ==========================================================================
   09. ARTISTS INDEX
   ========================================================================== */
@media (max-width: 640px) {
  .artist-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-24) var(--space-16);
  }

  .artist-groups { gap: var(--space-48); }
}

/* ==========================================================================
   10. CONTACT PAGE
   ========================================================================== */
@media (max-width: 900px) {
  /* the details stop being a sidebar and become a pair of cards on top */
  .contact__row {
    flex-direction: column;
    gap: var(--space-24);
  }

  .contact__aside {
    flex-direction: row;
    flex: 1 1 auto;
    width: 100%;
    position: static;
  }

  .contact__aside > .contact-card { flex: 1 1 0; }

  .panel--form { padding: var(--space-40) var(--space-32); }
}

@media (max-width: 640px) {
  .contact__aside { flex-direction: column; }

  .contact-form__row { flex-direction: column; gap: var(--space-20); }

  .panel--form { padding: var(--space-32) var(--space-24); }

  .contact-form__foot > .btn { width: 100%; }
}

/* ==========================================================================
   11. POLICY PAGES — the sticky jump list folds back on top
   ========================================================================== */
@media (max-width: 900px) {
  .legal-layout {
    flex-direction: column;
    gap: var(--space-32);
  }

  .legal-toc {
    flex: 1 1 auto;
    width: 100%;
    position: static;
  }

  /* back to wrapping chips once it is a full-width band again */
  .legal-toc__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-8) var(--space-16);
  }

  .legal-toc__link {
    font-size: var(--fs-12);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
  }
}

@media (max-width: 640px) {
  .legal-toc { padding: var(--space-16); }
}

/* ==========================================================================
   12. ABOUT : founder story panel
   ========================================================================== */
@media (max-width: 1024px) {
  /* stacked, so the portrait is capped rather than pinned to a column width */
  .panel--story .why__media {
    flex: 1 1 auto;
    max-width: 300px;
  }
}

@media (max-width: 640px) {
  .section--story { padding-top: var(--space-40); }
}