/*
 * Prime Clothing — home page.
 * Hero, collection grid, fabric spec sheet and the service strip.
 * Shared components (buttons, product cards, care label) live in styles.css.
 */

/* ------------------------------------------------------------------- hero */
/*
 * Phones: the tall photo, then the headline on chalk underneath.
 * 760px and up: the wide photo is a full-bleed band and the headline sits on
 * the empty plaster wall to the left of the two models.
 */

.home-hero {
  position: relative;
}
.home-hero__media {
  display: block;
  background: var(--stone);
}
.home-hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.home-hero__content {
  padding: var(--s-6) var(--gutter) var(--s-7);
}
.home-hero__eyebrow {
  min-height: 1.5em; /* reserved so the line filled by home.js doesn't shift the headline */
  margin-bottom: var(--s-4);
  color: var(--ink-soft);
}
.home-hero__title {
  font-size: var(--fs-hero);
}
.home-hero__line {
  display: block;
}
.home-hero__lede {
  margin-top: var(--s-5);
  max-width: 34rem;
  text-wrap: pretty;
}
.home-nowrap {
  white-space: nowrap;
}
.home-hero__actions {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
@media (min-width: 480px) {
  .home-hero__actions {
    display: flex;
    flex-wrap: wrap;
  }
}
/* Phones held sideways: keep the whole 4:5 photo on one screen. */
@media (max-width: 759.98px) and (min-aspect-ratio: 1 / 1) {
  .home-hero__media img {
    width: auto;
    max-width: 100%;
    max-height: calc(100vh - var(--header-h) - var(--s-4));
    max-height: calc(100svh - var(--header-h) - var(--s-4));
    margin-inline: auto;
  }
}

@media (min-width: 760px) {
  .home-hero {
    /* The text column has to stay on the bare wall, which runs from just past
       the window to the hoodie at about 40% across the photo.
       --hero-x: where the column starts; --hero-w: how wide it may get. */
    --hero-x: max(6.5vw, 48px);
    /* Below ~1000px the band is taller than 16:9, so the photo is enlarged and
       the models move right; the column can be relatively wider there. */
    --hero-w: calc(175px + 13vw);
    display: grid;
    align-items: center;
    min-height: max(min(88vh, 56.25vw), 560px);
    overflow: hidden;
    background: var(--stone);
  }
  .home-hero__media {
    position: absolute;
    inset: 0;
  }
  .home-hero__media img {
    height: 100%;
    aspect-ratio: auto;
    /* Anchored left of centre so any side crop keeps both models in frame. */
    object-position: 20% 50%;
  }
  .home-hero__content {
    position: relative;
    box-sizing: content-box;
    width: var(--hero-w);
    padding: var(--s-6) 0 var(--s-7) var(--hero-x);
  }
  .home-hero__eyebrow {
    color: var(--ink);
  }
  /* "CLOTHES" is about 6.1em wide in this face; size the headline to the column. */
  .home-hero__title {
    font-size: calc(var(--hero-w) / 6.3);
  }
  .home-hero__lede {
    max-width: 30em;
    color: var(--ink);
    font-size: var(--fs-base);
  }
  .home-hero__actions {
    margin-top: var(--s-5);
  }
  /* The ghost button may sit over the darker floor on short screens. */
  .home-hero__ghost {
    --btn-bg: color-mix(in srgb, var(--chalk) 78%, transparent);
  }
}
@media (min-width: 1000px) {
  .home-hero {
    --hero-w: 30vw;
  }
  .home-hero__content {
    padding-block: var(--s-7) var(--s-8);
  }
  .home-hero__title {
    font-size: min(var(--fs-hero), 4.85vw);
  }
  .home-hero__lede {
    font-size: var(--fs-md);
  }
  .home-hero__actions {
    margin-top: var(--s-6);
  }
}

/* The one orchestrated moment: the headline rises in, line by line, once. */
@media (prefers-reduced-motion: no-preference) {
  .home-hero__line {
    animation: home-rise 800ms var(--ease) both;
  }
  .home-hero__line:nth-child(2) {
    animation-delay: 90ms;
  }
  .home-hero__line:nth-child(3) {
    animation-delay: 180ms;
  }
}
@keyframes home-rise {
  from {
    opacity: 0;
    transform: translateY(0.3em);
  }
}

/* ---------------------------------------------------- shared section head */

.home-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
  margin-bottom: var(--s-6);
}
.home-head__eyebrow {
  margin-bottom: var(--s-3);
}
.home-more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.home-more__icon {
  display: inline-grid;
}
.home-more .icon {
  width: 18px;
  height: 18px;
  transition: transform var(--dur-fast) var(--ease);
}
.home-more:hover .icon {
  transform: translateX(3px);
}

/* ----------------------------------------------------------------- fabric */

.home-fabric {
  padding-top: 0;
}
.home-fabric__grid {
  display: grid;
  gap: var(--s-6);
}
.home-fabric__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--stone);
  border-radius: 2px;
}
.home-fabric__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-fabric__body .eyebrow {
  margin-bottom: var(--s-3);
}
.home-fabric__copy {
  margin-top: var(--s-5);
  max-width: 54ch;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.home-fabric__copy p + p {
  margin-top: var(--s-4);
}
@media (min-width: 900px) {
  .home-fabric__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--s-8);
    align-items: center;
  }
}

/* Spec sheet: a sewn-in care label listing each piece and its fabric. */
.home-spec {
  margin-top: var(--s-6);
  padding-block: var(--s-4);
}
.home-spec .care-label__title {
  margin-bottom: 0;
  padding-bottom: var(--s-2);
}
.home-spec__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-spec__list li {
  border-top: 1px solid var(--line);
}
.home-spec__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'name arrow'
    'value arrow';
  align-items: center;
  column-gap: var(--s-3);
  row-gap: 2px;
  min-height: 60px;
  padding-block: var(--s-3);
  color: var(--ink);
  text-decoration: none;
}
.home-spec__name {
  grid-area: name;
  font-weight: 500;
}
.home-spec__leader {
  display: none;
}
.home-spec__value {
  grid-area: value;
  color: var(--graphite);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.home-spec__arrow {
  grid-area: arrow;
  width: 18px;
  height: 18px;
  color: var(--graphite);
  transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.home-spec__row:hover .home-spec__name {
  color: var(--cobalt);
}
.home-spec__row:hover .home-spec__arrow {
  color: var(--cobalt);
  transform: translateX(3px);
}
@media (min-width: 560px) {
  .home-spec__row {
    grid-template-columns: auto minmax(var(--s-5), 1fr) auto auto;
    grid-template-areas: 'name leader value arrow';
    min-height: 52px;
  }
  .home-spec__leader {
    display: block;
    grid-area: leader;
    align-self: center;
    margin-top: 0.4em;
    border-bottom: 1px dotted var(--stone-deep);
  }
}

/* ---------------------------------------------------------------- service */

.home-service__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.home-service__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  padding-block: var(--s-5);
}
.home-service__item + .home-service__item {
  border-top: 1px solid var(--line);
}
.home-service__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
}
.home-service__title {
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.3;
  padding-top: 2px;
}
.home-service__text {
  margin-top: 4px;
  font-size: var(--fs-sm);
  color: var(--graphite);
}
.home-service__text a {
  color: var(--ink);
}
.home-service__text a:hover {
  color: var(--cobalt);
}
@media (min-width: 760px) {
  .home-service__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .home-service__item {
    padding: var(--s-6) var(--s-5);
  }
  .home-service__item:first-child {
    padding-left: 0;
  }
  .home-service__item:last-child {
    padding-right: 0;
  }
  .home-service__item + .home-service__item {
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}

/* "See the fabrics" glides down to the fabric section. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}