/**
 * Section: Page Head
 *
 * The design's hero, adapted for interior pages: copy on the left, the
 * scrapbook photo on the right (arched photo, lilac arch behind it, washi
 * tape, flowers, sparkles, paper note). Mobile first.
 */

.page-head {
  background: var(--surface);
  padding-block: var(--space-l) var(--section-space-m);
  padding-inline: var(--space-gutter);
  overflow-x: clip;
}

.page-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-xl);
}

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

.page-head:not(.has-media) .page-head-text {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

.page-head h1 {
  font-size: var(--text-hero);
}

.page-head .lead {
  font-size: var(--text-lead);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs) var(--space-2xs);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  color: var(--ink-muted);
}

.breadcrumb a {
  color: var(--brand-secondary);
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* --- Scrapbook photo ------------------------------------------------------ */
.page-head-media {
  position: relative;
  width: min(100%, 26rem);
  aspect-ratio: 43 / 46;
  justify-self: center;
}

.page-head-arch {
  position: absolute;
  inset: 2% 0 0 5%;
  border-radius: var(--radius-arch);
  background: var(--brand-tint-lilac);
  transform: rotate(-7deg);
}

.page-head-photo {
  position: absolute;
  top: 1%;
  left: 2%;
  width: 90%;
  height: 87%;
  object-fit: cover;
  border: var(--border-photo) solid var(--surface);
  border-radius: 49% 49% 0 0;
  box-shadow: var(--shadow-paper);
  transform: rotate(3deg);
}

.page-head-tape {
  top: -1%;
  left: 32%;
  z-index: 3;
  transform: rotate(-7deg);
}

.page-head-flower-one {
  top: 3%;
  right: -3%;
  z-index: 4;
  width: 26%;
  transform: rotate(-15deg);
}

.page-head-flower-two {
  bottom: 12%;
  left: -6%;
  z-index: 4;
  width: 19%;
  transform: rotate(-12deg);
}

.page-head-sparkle-one {
  top: 14%;
  left: -3%;
  z-index: 4;
  width: 5%;
  background: var(--brand-sun);
  transform: rotate(-12deg);
}

.page-head-sparkle-two {
  top: 36%;
  right: -4%;
  z-index: 4;
  width: 4%;
  background: var(--brand-sun);
  transform: rotate(12deg);
}

.paper-note {
  position: absolute;
  right: 1%;
  bottom: 0;
  z-index: 5;
  max-width: 55%;
  padding: var(--space-s) var(--space-m);
  background: var(--white);
  box-shadow: var(--shadow-paper);
  transform: rotate(-5deg);
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: var(--text-note);
  line-height: 1.06;
  color: var(--ink);
}

@media (min-width: 48rem) {
  .page-head-grid {
    gap: var(--space-l);
  }

  .page-head.has-media .page-head-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }

  .page-head.has-media .page-head-text {
    max-width: none;
  }
}