/**

 * 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(--space-6) var(--space-8);

}



@media (min-width: 1024px) {

  .home-hero {

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

  }

}



.home-hero__grid {

  display: grid;

  gap: var(--space-8);

  align-items: center;

  max-width: var(--container-xl);

}



@media (min-width: 900px) {

  .home-hero__grid {

    /* Copy leads; image supports (~10% less visual weight than prior 0.85fr / 52vh) */

    grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);

    gap: var(--space-10);

  }

}



.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);

}



.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;

  max-height: min(47vh, 396px);

  width: 100%;

}



.home-hero__image {

  display: block;

  width: 100%;

  height: 100%;

  max-height: min(47vh, 396px);

  object-fit: cover;

  object-position: center;

}



/* ——— Section headers ——— */

.home-section-header {

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

  max-width: 40rem;

}



/* Tighter rhythm: featured products heading → grid */

.page-home #featured-products .home-section-header {

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

}



.home-section-header h2 {

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

}



.home-section-header p {

  margin: 0;

  max-width: 42ch;

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

}



.home-section-actions {

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

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-3);

}



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

.page-home .product-card .card__media img,

.home-featured-products .product-card .card__media img {

  aspect-ratio: auto;

  max-height: none;

  width: 100%;

  height: 100%;

  max-width: none;

  object-fit: cover;

  object-position: center center;

  border-radius: 0;

  display: block;

  margin: 0;

}



/* ——— 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);

  }

}