/* --- archive intro (optional rich content from _index.md) --- */
.archive-intro { max-width: var(--max-w-prose); margin: 0 auto 1.5rem; }

/* --- callouts (full-bleed promo row between featured and grid) ---
   `min()` caps the breakout at --max-w-page so the band stays inside
   the page wrapper on viewports wider than the cap. */
.callouts {
  width: min(100vw, var(--max-w-page));
  margin-inline: calc(50% - min(50vw, var(--max-w-page) / 2));
  margin-block: var(--sp-mega);
  padding-block: var(--sp-giga);
  background:
    url('../callouts/gradient.webp') center/cover no-repeat,
    linear-gradient(90deg, var(--grad-callouts-1) 0%, var(--grad-callouts-2) 50%, var(--grad-callouts-3) 100%);

  & .callouts__inner {
    max-width: var(--max-w-content);
    margin-inline: auto;
    padding-inline: 1.25rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-base);

    @media (max-width: 720px) {
      grid-template-columns: 1fr;
      max-width: 380px;
    }
  }
}

.callout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-fg);
  text-align: center;
  border-radius: 14px;
  outline: 1px solid transparent;
  outline-offset: 8px;
  transition:
    outline-color .2s ease,
    outline-width .2s ease,
    outline-offset .2s ease,
    color .2s ease;

  &:hover {
    color: var(--color-accent);
    outline: 4px solid var(--color-fg);
    outline-offset: 12px;

    & .callout__media { box-shadow: var(--shadow-hover); }
  }

  & .callout__media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: box-shadow .2s ease;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  & .callout__label {
    font-size: 0.9rem;
    font-weight: 600;
  }
}