/* Comic strip section.
   Two levels of layout, both mobile first:
   1. .comic-grid decides how many pairs sit side by side (auto-fit, no breakpoints).
   2. Each pair decides for itself, via a container query, whether its Before and
      After panels sit side by side or stacked, based on the width it was given. */
.comic-section {
    --comic-before: #eceef0;   /* tint behind Before panels */
    --comic-after: #e3f0fb;    /* tint behind After panels */
    --comic-blue: #2185d0;
    --comic-gap: 1rem;         /* between the two panels of a pair */
    --comic-pair-min: 34rem;   /* narrowest a pair can be and still sit side by side */
}

.comic-intro {
    max-width: 40em;
    margin-inline: auto;
    padding-bottom: 3rem;
    text-align: center;
    text-wrap: pretty;
}

/* Grid of pairs: two across when there's room, otherwise one */
.comic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--comic-pair-min)), 1fr));
    gap: 2.5rem 2rem;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1.5em;
    box-sizing: border-box;
}

/* The pair is the container. Container queries only affect descendants,
   so the actual panel layout lives on the inner .comic-panels. */
.comic-pair {
    container-type: inline-size;
}

/* Default: stacked, Before above After. The max-width keeps the panels close to
   their native size (they're only ~310px wide) instead of stretching and going soft. */
.comic-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--comic-gap);
    max-width: 21rem;
    margin-inline: auto;
}

/* Side by side once the pair has enough width */
@container (min-width: 34rem) {
    .comic-panels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 40rem;
    }
}

.comic-panel {
    margin: 0;
    background: var(--comic-before);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    isolation: isolate; /* keeps the blend inside the panel */
}

.comic-panel.is-after {
    background: var(--comic-after);
}

/* Multiply turns the image's white into the panel tint and keeps the black lines */
.comic-panel img {
    display: block;
    width: 100%;
    height: auto;
    mix-blend-mode: multiply;
}

/* CTA tile: fills the sixth slot, stretching to match the row */
.comic-cta {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 40rem;
    margin-inline: auto;
    padding: 2rem 1.5rem;
    box-sizing: border-box;
    text-align: center;
    background: var(--comic-after);
    border: 1px solid rgba(33, 133, 208, 0.25);
    border-radius: 12px;
}

.comic-cta p {
    margin: 0;
}

.comic-cta .comic-cta-title {
    font-size: 1.6em;
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;
}

.comic-cta .button {
    margin-top: 0.5rem;
}