/*
 * Temperfield Group homepage presentation
 * Phase F.2 — Hero visual composition
 *
 * Page-specific composition belongs here. Shared layout and component
 * foundations remain in layout.css and components.css.
 */

.hero {
  overflow: clip;
  border-block-end: var(--border-width-thin) solid var(--color-border-default);
  background: var(--color-background-page);
}

.hero__layout {
  display: grid;
  align-items: center;
  gap: var(--space-12);
}

.hero__content {
  --section-header-gap: var(--space-6);
  --section-header-title-size: var(--font-size-h1);

  position: relative;
  z-index: 1;
}

.hero__content .section-header__title {
  max-inline-size: 19ch;
}

.hero__content::before {
  inline-size: var(--space-10);
  block-size: var(--border-width-strong);
  margin-block-end: var(--space-2);
  background: var(--color-decoration-copper);
  content: "";
}

.hero__composition {
  position: relative;
  min-block-size: clamp(18rem, 70vw, 28rem);
  overflow: hidden;
  border: var(--border-width-thin) solid var(--color-green-800);
  border-radius: var(--radius-small);
  background: var(--color-background-brand-deep);
  isolation: isolate;
}

.hero__composition::before,
.hero__composition::after,
.hero__material-field,
.hero__material-field::before,
.hero__material-field::after {
  position: absolute;
  content: "";
}

.hero__composition::before {
  inset-block: 8%;
  inset-inline-end: 9%;
  inline-size: 22%;
  border-inline: var(--border-width-thin) solid var(--color-green-700);
}

.hero__composition::after {
  inset-block-start: 0;
  inset-inline-start: 21%;
  inline-size: var(--border-width-strong);
  block-size: 100%;
  background: var(--color-decoration-copper);
}

.hero__material-field {
  inset-block: 12% 18%;
  inset-inline: 8% 27%;
  border: var(--border-width-thin) solid var(--color-green-700);
  background: var(--color-background-brand);
}

.hero__material-field::before {
  inset-block-start: 18%;
  inset-inline-start: 72%;
  inline-size: 54%;
  block-size: 88%;
  border: var(--border-width-thin) solid var(--color-neutral-600);
  background: var(--color-neutral-850);
}

.hero__material-field::after {
  inset-block-end: -12%;
  inset-inline-start: 12%;
  inline-size: 72%;
  border-block-start: var(--border-width-strong) solid
    var(--color-decoration-copper);
}

@media (min-width: 64rem) {
  .hero__layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr);
    gap: var(--space-16);
  }

  .hero__composition {
    min-block-size: clamp(28rem, 42vw, 34rem);
  }
}

@media (forced-colors: active) {
  .hero__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__content::before,
  .hero__composition {
    display: none;
  }
}

@media print {
  .hero__layout {
    display: block;
  }

  .hero__composition {
    display: none;
  }
}