/* =============================================================================
   mobile.css — phone-first refinements. Loaded after polish.css.

   Additive only: everything is scoped inside max-width media queries. The v2
   components already stack on phones in concept-1.css (photograph above,
   copy below); this layer only tunes rhythm and touch.

     1. Hero CTAs — stacked, full width, thumb-sized
     2. Spacing and type rhythm
     3. Comfortable tap targets (44px)
     4. No section rail on phones

   v2 (29 Sep 2026) removed the layers for retired components (card tap
   hints, buy buttons, where-to-buy rows, community videos, story gallery,
   the endless product rail, the swipe cue). Recoverable from the microsite-v1-final tag.
============================================================================= */

/* ---------------------------------------------------------------------------
   1. HERO CTAS
--------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .c1-hero__cta[class] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 340px;
  }

  .c1-hero__cta[class] .c1-btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  /* "Buy on:" over two buttons side by side. On a desktop the buy buttons sit
     below Our Products and Our Story (the order in the page); on a phone they
     come first, so they stay on the first screen. */
  .c1-hero__buy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    order: -1;
  }

  .c1-hero__cta[class] [data-sales-closed] {
    order: -1;
  }

  .c1-hero__buylabel {
    grid-column: 1 / -1;
  }

  .c1-hero__cta[class] .c1-hero__buy .c1-btn {
    padding-inline: 10px;
    letter-spacing: 0.12em;
  }

  .c1-hero__buy .c1-btn__arrow {
    display: none;
  }
}

/* Phones, portrait: the buy buttons belong on the first screen (visible
   without scrolling at 390 x 844). The photograph is a little shorter
   (centred on the bottles) and the buttons, with the line under them, follow
   the headline, ahead of the lede and the audience line. */
@media (max-width: 699px) {
  .c1-hero__media img {
    height: 42svh;
    object-fit: cover;
    object-position: 50% 62%;
  }

  .c1-hero__copy {
    display: flex;
    flex-direction: column;
  }

  .c1-hero__cta[class] {
    order: 1;
    margin-bottom: 14px;
  }

  .c1-hero__note {
    order: 1;
    margin: 0 0 22px;
  }

  .c1-hero h1 {
    margin-bottom: 18px;
  }

  .c1-hero__lede {
    order: 2;
  }

  .c1-hero__audience {
    order: 3;
    margin-bottom: 0;
  }
}

/* Phones, portrait: the whole of both bottles shows. The portrait photograph used to be cropped to a wide
   band that cut the shampoo bottle; now it is shown whole, a little smaller (the empty backdrop above the
   products is trimmed, and the height is still 42% of the screen so the buy buttons stay on the first screen),
   centred, with its edges feathered into the page so the smaller picture does not sit in a box. */
@media (max-width: 699px) and (orientation: portrait) {
  .c1-hero__media img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 42svh;
    aspect-ratio: 900 / 1075;
    margin-inline: auto;
    object-fit: cover;
    object-position: 50% 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 13%, #000 87%, transparent),
      linear-gradient(to bottom, transparent, #000 9%, #000 90%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 13%, #000 87%, transparent),
      linear-gradient(to bottom, transparent, #000 9%, #000 90%, transparent);
    mask-composite: intersect;
  }
}

/* ---------------------------------------------------------------------------
   2. SPACING AND TYPE RHYTHM
--------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .c1 {
    --section-y: 52px;
  }

  .c1-h2 {
    font-size: clamp(26px, 7.4vw, 34px);
    line-height: 1.14;
  }

  .c1-lede,
  .c1-story__cell p {
    font-size: 14.5px;
    line-height: 1.72;
  }

  .c1-section__head,
  .c1-community__head,
  .c1-stockists__head {
    margin-bottom: 26px;
  }

  .c1-footer__grid {
    gap: 30px;
  }
}

/* ---------------------------------------------------------------------------
   3. TAP TARGETS — nothing interactive under 44px
--------------------------------------------------------------------------- */
@media (pointer: coarse), (max-width: 999px) {
  .c1-nav a,
  .c1-footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .c1-logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .c1-footer__links--icons a {
    width: 44px;
    height: 44px;
    justify-content: center;
  }

  .c1-footer__links--icons a svg {
    width: 22px;
    height: 22px;
  }

  .c1-announce__close {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

}

/* ---------------------------------------------------------------------------
   4. NO SECTION RAIL ON PHONES
   The header's Stockists link and ordinary scrolling cover navigation here;
   a floating dot rail on a 375px screen covered the text column and could
   not be made accessible without clutter (QA, 27 Sep).
--------------------------------------------------------------------------- */
@media (max-width: 699px) {
  .c1-rail[class] {
    display: none;
  }
}