/**
 * Section: Page Head
 *
 * Ported from the mockup: the shared band in css/shop.css (61-112, which
 * includes the breadcrumb) plus the `.has-media` two-column variant and its
 * image panel from css/about.css (7-38). Both live here because they are one
 * section, not two.
 *
 * `.lead` is NOT here - it is shared interior chrome used by several sections,
 * so it goes in components.css. See the note at the bottom.
 */

/* --- Page header band (breadcrumb + eyebrow + title + lead) --- */
.page-head {
  background: var(--pebble);
  border-bottom: 1px solid var(--hairline);
  padding-block: clamp(36px, 5vw, 72px);
  padding-inline: var(--space-gutter);
}

.page-head-inner {
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  align-items: flex-start;
}

.page-head .eyebrow {
  line-height: 1;
}

.page-head h1 {
  font-size: var(--text-h1);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  max-width: 16ch;
}

.page-head h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--terracotta);
}

/* --- Breadcrumb --- */
.breadcrumb {
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--graphite);
  letter-spacing: 0.01em;
}

.breadcrumb a {
  color: var(--deep-ocean);
  transition: color var(--duration-fast);
}

.breadcrumb a:hover {
  color: var(--terracotta);
}


/* --- With an image beside the text --- */
/* --- Page head with media (About hero) --- */
.page-head.has-media .page-head-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-2xl);
  align-items: center;
  max-width: var(--container);
}

.page-head-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  align-items: flex-start;
}

.page-head-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.media-cta {
  position: absolute;
  left: var(--space-s);
  bottom: var(--space-s);
}


/* --- RESPONSIVE (from the shared 900px block in about.css) --- */
@media (max-width: 900px) {
  .page-head.has-media .page-head-inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}