/* Hallmark · macrostructure: image-led technical worksheet · genre: modern-minimal · theme: inherited CattleFenceWire
 * audience: farm project buyers and coordinators · use: understand and print a controlled record · tone: technical
 * pre-emit critique: P5 H5 E4 S5 R5 V4 · contrast: pass (40–41) · nav: existing site chrome · footer: existing site chrome
 * slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49)
 * icons: pass (30) · mobile: pass (34, 49, 50–57) · enrichment: page-specific photography
 */
.page-head--image {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(31rem, 62vw, 41rem);
  padding-block: 0;
  overflow: clip;
  border-bottom: 0;
  color: var(--color-text-inverse);
}
.page-head__media,
.page-head__veil {
  position: absolute;
  inset: 0;
}
.page-head__media {
  z-index: -2;
  margin: 0;
}
.page-head__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-head--change .page-head__media img { object-position: 54% center; }
.page-head--documents .page-head__media img { object-position: 52% center; }
.page-head__veil {
  z-index: -1;
  background: linear-gradient(90deg, color-mix(in oklch, var(--color-primary) 94%, transparent) 0%, color-mix(in oklch, var(--color-primary) 80%, transparent) 48%, color-mix(in oklch, var(--color-primary) 28%, transparent) 100%);
}
.page-head__grid--visual {
  width: min(100% - 2rem, var(--content-wide));
  align-self: end;
  padding-block: var(--space-3xl) var(--space-2xl);
}
.page-head--image h1 {
  max-width: 12ch;
  color: var(--color-text-inverse);
  text-shadow: 0 2px 1.5rem var(--color-shadow);
}
.page-head--image p {
  max-width: 54ch;
  color: var(--color-text-inverse);
  text-shadow: 0 1px 0.75rem var(--color-shadow);
}
.page-head--image .page-head__note {
  padding: var(--space-lg);
  border: var(--rule-thin) solid color-mix(in oklch, var(--color-text-inverse) 28%, transparent);
  border-inline-start: var(--rule-strong) solid var(--color-accent);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-primary) 84%, transparent);
  color: var(--color-text-inverse);
  backdrop-filter: blur(0.35rem);
}
.resource-figure {
  display: grid;
  gap: 0;
  margin: var(--space-2xl) 0;
  overflow: clip;
  border: var(--rule-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.resource-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.resource-figure figcaption {
  padding: var(--space-md) var(--space-lg);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  border-top: var(--rule-thin) solid var(--color-divider);
}

@media (min-width: 48rem) {
  .page-head__grid--visual { grid-template-columns: minmax(0, 1.3fr) minmax(17rem, 0.7fr); }
  .resource-figure { grid-template-columns: minmax(0, 1.45fr) minmax(14rem, 0.55fr); align-items: stretch; }
  .resource-figure figcaption { display: grid; align-content: end; border-top: 0; border-inline-start: var(--rule-thin) solid var(--color-divider); }
}

@media (max-width: 47.99rem) {
  .page-head--image { min-height: 37rem; }
  .page-head__grid--visual { padding-block: var(--space-3xl) var(--space-xl); }
  .page-head__veil { background: linear-gradient(180deg, color-mix(in oklch, var(--color-primary) 34%, transparent) 0%, color-mix(in oklch, var(--color-primary) 92%, transparent) 54%, var(--color-primary) 100%); }
  .page-head--image h1 { max-width: 10ch; }
  .page-head--change .page-head__media img { object-position: 56% center; }
  .page-head--documents .page-head__media img { object-position: 46% center; }
}

@media print {
  .page-head--image { min-height: 0; color: var(--color-text); }
  .page-head__media, .page-head__veil { display: none; }
  .page-head__grid--visual { padding-block: var(--space-md); }
  .page-head--image h1, .page-head--image p, .page-head--image .page-head__note { color: var(--color-text); text-shadow: none; }
  .page-head--image .page-head__note { padding: var(--space-md); background: transparent; border-color: var(--color-border); }
  .resource-figure { display: none; }
}