/**

 * Homepage-only styles. Framework CSS remains untouched.

 * Linked from pages/home.js via layout extraHead.

 */



.page-home .template-landing__hero {

  min-height: auto;

  align-items: stretch;

  padding-block: 0;

}



/* ——— Editorial hero — Brand → Headline → Description → CTA → Image ——— */

.home-hero {

  width: 100%;

  padding-block: var(--hero-pad-block);

}



/* Same brand rail as header / sections / footer (--container-xl / --brand-max) */

.page-home .home-hero .container {

  width: min(100% - (2 * var(--gutter)), var(--container-xl));

}



@media (min-width: 1024px) {

  .home-hero {

    padding-block: var(--hero-pad-block);

  }

}



.home-hero__grid {

  display: grid;

  gap: var(--space-8);

  align-items: center;

  max-width: none;

  width: 100%;

}



@media (min-width: 900px) {

  .home-hero__grid {

    /* Copy leads; image is a strong supporting plane */

    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);

    gap: var(--space-10);

  }

}



@media (min-width: 1440px) {

  .home-hero__grid {

    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);

    gap: var(--space-12);

  }

}



.home-hero__content {

  max-width: 38rem;

  order: 1;

}



.home-hero__visual {

  order: 2;

}



.home-hero__brand {

  margin: 0 0 var(--space-3);

  font-family: var(--font-display);

  font-size: clamp(1.75rem, 3.5vw, 2.5rem);

  font-weight: var(--font-weight-bold);

  letter-spacing: -0.03em;

  line-height: var(--leading-tight);

  color: var(--color-text-primary);

}



.home-hero__eyebrow {

  margin: 0 0 var(--space-4);

  font-family: var(--font-display);

  font-size: var(--text-caption);

  font-weight: var(--font-weight-semibold);

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--color-text-secondary);

}



.home-hero__headline {

  margin: 0 0 var(--space-5);

  font-family: var(--font-display);

  font-size: clamp(2.25rem, 4.6vw, 3.75rem);

  font-weight: var(--font-weight-bold);

  letter-spacing: -0.03em;

  line-height: var(--leading-tight);

  color: var(--color-text-primary);

  max-width: 15ch;

}



.home-hero__lede {

  margin: 0 0 var(--space-8);

  max-width: 40ch;

  font-size: var(--text-body-lg);

  line-height: var(--leading-relaxed);

  color: var(--color-text-secondary);

}



.home-hero__actions {

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-3);

}

/* Mobile: equal-width stacked actions — primary dominant, secondary clearly
   secondary, one consistent gap and a comfortable touch target each. */
@media (max-width: 560px) {

  .home-hero__actions {

    flex-direction: column;

    align-items: stretch;

  }

  .home-hero__actions .btn {

    width: 100%;

  }

}



.home-hero__visual {

  width: 100%;

  max-width: 26rem;

  margin-inline: auto;

}



@media (min-width: 900px) {

  .home-hero__visual {

    max-width: none;

    margin-inline: 0;

  }

}



.home-hero__media {

  margin: 0;

  overflow: hidden;

  border-radius: var(--radius-xl);

  background: var(--color-bg-elevated);

  box-shadow: inset 0 0 0 1px var(--color-border-subtle);

  aspect-ratio: 4 / 3;

  /* Mobile / tablet: contained; desktop overrides below raise impact */

  max-height: min(48vh, 420px);

  width: 100%;

}



.home-hero__image {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

}



@media (min-width: 900px) {

  .home-hero__media {

    max-height: min(54vh, 480px);

  }

}



@media (min-width: 1024px) {

  .home-hero__media {

    max-height: min(58vh, 520px);

  }

}



@media (min-width: 1440px) {

  .home-hero__media {

    max-height: min(62vh, 560px);

  }

}



.home-section-actions {

  margin-top: var(--space-6);

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-3);

}



/* ——— Featured products ——— */

/* Product card media rules live in components.css — do not re-declare here. */

/* ——— Collections: one lead + supporting ——— */

.home-collections {

  display: grid;

  gap: var(--space-6);

}



@media (min-width: 900px) {

  .home-collections {

    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);

    gap: var(--space-6);

    align-items: stretch;

  }

}



.home-collections__support {

  display: grid;

  gap: var(--space-4);

  grid-template-columns: 1fr;

}



@media (min-width: 600px) {

  .home-collections__support {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}



.home-collections__lead .collection-card--lead .card__media img {

  aspect-ratio: 16 / 10;

  min-height: 0;

}



.home-collections__support .collection-card--support .card__media img {

  aspect-ratio: 16 / 10;

}



/* ——— Materials photography cards ——— */

.home-material-card .card__media img {

  aspect-ratio: 4 / 3;

  object-fit: cover;

}



/* ——— Journal ——— */

.home-journal-grid .card--blog .card__media img {

  aspect-ratio: 16 / 9;

}



/* Homepage section rhythm — tighter continuity */

.page-home .section {

  padding-block: var(--space-8);

}



.page-home .section--md {

  padding-block: var(--space-8);

}



.page-home .section--lg {

  padding-block: var(--space-8);

}



@media (min-width: 1024px) {

  .page-home .section,

  .page-home .section--md,

  .page-home .section--lg {

    padding-block: var(--space-10);

  }

}



/* NFC education band */
.home-nfc-edu {
  display: grid;
  gap: var(--space-6);
  max-width: var(--layout-measure-wide, 56rem);
}

.home-nfc-edu__features {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--text-body);
}

.home-nfc-edu__features li strong {
  color: var(--color-text-primary);
}

.home-nfc-edu__hint {
  margin: 0;
}