/* ==============================================================================
   HERO BLOCK
   ============================================================================== */

.block-hero {
  display: grid;
  gap: var(--spacing-lg);
}

.hero__media img {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
}

/* Two photos (the camp's tents and an assembly, 14 October 2026): on a
   phone they stack at full width with a small gap, so neither is shrunk
   to a thumbnail. Each one is cropped to a fixed shape with object-fit,
   so photos of any proportion leave the same layout and nothing jumps
   when a different pair is chosen in the admin. */
.hero__media--pair {
  display: grid;
  gap: var(--spacing-sm);
}

/* A <picture> is inline by default; as a block it takes the column's
   width and leaves no line-height gap under its photo. */
.hero__media--pair > .hero__photo {
  display: block;
}

.hero__media--pair img {
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
}

/* The hero's h1 is one of the headings Juan wanted in a serious face
   (ADR-034, 13 October 2026): Source Serif 4 at the one weight fonts.css
   serves, no capitals, so the claim reads as a sentence and not as a
   poster line. The body:not(.admin) prefix matches the specificity of
   main.css's uppercase rule, which would otherwise keep the capitals and
   the weight. */
body:not(.admin) .hero__copy h1 {
  font-family: var(--font-title-serious);
  font-size: var(--font-size-hero);
  font-weight: 600;
  line-height: 1.15;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: var(--spacing-sm);
}

.hero__subtitle {
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-md);
}

/* Side by side once there is room for the image not to crowd the copy. */
@media (min-width: 768px) {
  .block-hero {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
  }
}

/* From 768px the pair becomes a mosaic: the first photo large at 4:3 and
   the second, square and a little under half as wide, laid over its
   bottom right corner. The container's bottom padding (a percentage of its
   width, like the photos' own sizes) is the room the square hangs into
   below the large photo, so the overlap needs no fixed heights. The ring
   in the page colour and the shadow keep the two photos apart where they
   touch, in the light theme and in the dark one. */
@media (min-width: 768px) {
  .hero__media--pair {
    display: block;
    position: relative;
    padding-bottom: 20%;
  }

  .hero__media--pair > .hero__photo:first-child {
    width: 88%;
  }

  .hero__media--pair > .hero__photo:nth-child(2) {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 42%;
  }

  .hero__media--pair > .hero__photo:nth-child(2) img,
  .hero__media--pair > img.hero__photo:nth-child(2) {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 4px solid var(--page-bg);
    box-shadow: var(--shadow-lg);
  }
}