/* ==========================================================================
   home.css — homepage only (index.html)

   Layout for the hero, the drop grid and the brand statement.
   Colours, type, buttons, product cards and the image reveal come from
   base.css / motion.css; this file only places things on the page.

   Owner edits:
   - Hero height: see .hero (min/max height).
   - Hero zoom: see "Hero zoom" (amount and duration).
   - Space between product cards: see .drop__grid gaps.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Hero
   Full-width image with the text placed bottom-left on top of it.
   Height = visible screen minus the header (svh with a vh fallback).
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  min-height: 520px;
  max-height: 1000px;
  color: var(--color-text);
}

.hero__media.media--hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  /* the .container gives max width + side padding; bottom padding added here */
  padding-bottom: var(--space-7);
  pointer-events: none; /* clicks pass through the empty area */
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: auto;
}

.hero__eyebrow {
  margin: 0 0 var(--space-4);
  color: inherit;
}

.hero__title {
  margin: 0 0 var(--space-6);
}

.hero__btn {
  margin: 0;
}

@media (min-width: 760px) {
  .hero__content {
    padding-bottom: var(--space-9);
  }

  /* Move the text off the window frame on the left of images/hero.jpg
     and onto the plain wall. Set to 0 if you change the hero photo. */
  .hero__text {
    margin-left: clamp(0px, 14vw - var(--gutter), 160px);
  }
}

/* Phones: a shorter 4:5 hero, so the whole model fits beside the text
   and the products start sooner. */
@media (max-width: 759px) {
  .hero {
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 4 / 5;
  }

  .hero__content {
    padding-bottom: var(--space-6);
  }
}

/* Light variant: add class "hero--light" to the hero section for dark photos.
   home.js also adds .btn--light to the button. */
.hero--light {
  color: var(--color-bg);
}

.hero--light .hero__eyebrow {
  color: var(--color-bg);
}

/* Hero zoom
   Very slow push-in (1 -> 1.06 over 18s, once). It starts only after the
   image has loaded (.is-loaded, set by motion.js), so it follows the reveal.
   Uses the separate `scale` property so it does not fight the reveal's
   transform transition in motion.css. */
.js .hero__media.is-loaded img {
  animation: home-hero-zoom 18s cubic-bezier(0.3, 0.1, 0.3, 1) both;
}

@keyframes home-hero-zoom {
  from { scale: 1; }
  to   { scale: 1.06; }
}

@media (prefers-reduced-motion: reduce) {
  .js .hero__media.is-loaded img {
    animation: none;
  }
}


/* --------------------------------------------------------------------------
   Drop section — header row + product grid
   1 column on small screens, 3 columns from 760px. No 2-column step.
   -------------------------------------------------------------------------- */
.drop__head {
  max-width: 36rem;
  margin-bottom: var(--space-7);
}

.drop__head .eyebrow {
  margin: 0 0 var(--space-3);
}

.drop__title {
  margin: 0 0 var(--space-3);
}

.drop__note {
  margin: 0;
}

.drop__grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-8);
}

@media (min-width: 760px) {
  .drop__head {
    margin-bottom: var(--space-8);
  }

  .drop__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
    row-gap: var(--space-9);
  }
}

@media (min-width: 1200px) {
  .drop__grid {
    column-gap: var(--space-7);
  }
}

.drop__noscript {
  margin: 0;
}


/* --------------------------------------------------------------------------
   Brand statement
   Two or three calm lines. On wider screens it starts at the second grid
   column so it lines up with the product cards above.
   -------------------------------------------------------------------------- */
/* Vertical space comes from .section (base.css); the gap between the
   products and this statement is kept smaller than a full section break. */
.drop.section {
  padding-bottom: var(--space-6);
}

.statement.section {
  padding-top: var(--space-6);
}

@media (min-width: 900px) {
  .drop.section {
    padding-bottom: var(--space-8);
  }

  .statement.section {
    padding-top: var(--space-8);
    padding-bottom: var(--space-9);
  }
}

.statement__inner {
  max-width: 34rem;
}

.statement__text {
  margin: 0 0 var(--space-6);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  line-height: 1.45;
  font-weight: var(--weight-regular);
}

.statement__more {
  margin: 0;
}

@media (min-width: 760px) {
  .statement__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-6);
  }

  .statement__inner {
    grid-column: 2 / 4;
  }
}

@media (min-width: 1200px) {
  .statement__grid {
    column-gap: var(--space-7);
  }
}

/* Keep the model in view when the hero is cropped (narrow screens):
   he stands at about 70% from the left in images/hero.jpg.
   If you change the hero photo, adjust or remove this. */
.hero__media img {
  object-position: 68% center;
}

/* Image beside the brand statement (fills the left column on wide screens) */
.statement__media {
  max-width: 260px;
  margin-bottom: var(--space-7);
}

@media (min-width: 760px) {
  .statement__grid {
    align-items: center;
  }

  .statement__media {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    margin-bottom: 0;
  }

  .statement__inner {
    grid-row: 1;
  }
}