.hahn-stat-banner {
    --stat-paper: linear-gradient(#ffffff70, #ffffff70), url('../images/stat-paper.png');
    position: relative;
    isolation: isolate;
    z-index: 1;
    margin-block: 0;
    padding: 40px 3%;
    background: var(--stat-paper) center / cover;
    background-color: #fff;
    color: var(--wp--preset--color--accent-1, #00263a);
    container-type: inline-size;
    container-name: stat-banner;
}

.hahn-stat-banner__layout {
    position: relative;
    display: grid;
    grid-template-columns: repeat(20, minmax(0, 1fr));
    grid-template-rows: repeat(14, minmax(0, 1fr));
    min-height: 51cqw;
    background: url('../images/stat-sparkles.svg') left 12% / 30% auto no-repeat,
        url('../images/stat-scatter.svg') center / 100% 100% no-repeat;
}

.hahn-stat-banner__layout::before, .hahn-stat-banner__layout::after {
    content: "";
    position: absolute;
    pointer-events: none;
    width: 6%;
    height: 15%;
    background: center / contain no-repeat;
}
.hahn-stat-banner__layout::before { top: 3%; right: 2%; background-image: url('../images/stat-sun.svg'); }
.hahn-stat-banner__layout::after { bottom: 0; left: 16%; background-image: url('../images/stat-chair.svg'); }

.hahn-stat-banner__intro { grid-area: 6 / 2 / 10 / 9; align-self: center; z-index: 1; }
.hahn-stat-banner__intro .wp-block-heading {
    color: var(--wp--preset--color--primary, #c8102e);
    font-size: clamp(28px, 2.8cqw, 60px);
    line-height: 1.2;
    margin: 0 0 24px;
}
.hahn-stat-banner__intro .hahn-stat-banner__sources { text-align: center; font-size: clamp(13px, 1cqw, 20px); line-height: 1.3; margin: 0; }

.hahn-stat-banner__stat {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    padding: 25% 18%;
    width: 100%;
    aspect-ratio: 1;
    align-self: center;
    justify-self: center;
    container-type: inline-size;
    margin: 0;
    min-width: 0;
}
.hahn-stat-banner__stat::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--wp--preset--color--accent-2, #3eb1c8);
    mask: url('../images/stat-star.svg') center / 100% 100% no-repeat;
}
/* Size text against each star's inner width at every breakpoint. Keeping the
   gap proportional too prevents fixed pixel spacing from crowding small stars. */
.hahn-stat-banner__stat .hahn-stat-banner__value {
    margin: 0 0 0.12em;
    font-size: 14cqw;
    line-height: 1.05;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    max-width: 100%;
}
.hahn-stat-banner__stat .hahn-stat-banner__label {
    margin: 0;
    font-size: 7.3cqw;
    line-height: 1.1;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.hahn-stat-banner__stat--1 { grid-area: 2 / 9 / 7 / 12; }
.hahn-stat-banner__stat--1 .hahn-stat-banner__value { font-size: 11.5cqw; }
.hahn-stat-banner__stat--2 { grid-area: 3 / 12 / 9 / 16; }
.hahn-stat-banner__stat--3 { grid-area: 1 / 15 / 7 / 19; }
.hahn-stat-banner__stat--4 { grid-area: 4 / 18 / 9 / 21; }
.hahn-stat-banner__stat--5 { grid-area: 7 / 10 / 13 / 14; }
.hahn-stat-banner__stat--6 { grid-area: 8 / 14 / 14 / 18; }
.hahn-stat-banner__stat--7 { grid-area: 9 / 18 / 14 / 21; }
.hahn-stat-banner__stat--8 { grid-area: 10 / 7 / 15 / 11; }

/* Optional outer Group style; edges overlap adjacent sections without manual offsets. */
.wp-block-group.is-style-paper-tears { position: relative; isolation: isolate; z-index: 1; }
.wp-block-group.is-style-paper-tears::before,
.wp-block-group.is-style-paper-tears::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: clamp(32px, 4vw, 80px);
    background: var(--stat-paper, linear-gradient(#fff, #fff)) center / cover;
    background-color: #fff;
    mask: url('../images/paper-tear-mask.svg') center / 100% 100% no-repeat;
    pointer-events: none;
    z-index: -1;
}
.wp-block-group.is-style-paper-tears::before { bottom: calc(100% - 1px); }
.wp-block-group.is-style-paper-tears::after { top: calc(100% - 1px); transform: rotate(180deg); }

/* Keep the torn silhouette deep on phones and crop its sides instead of
   squeezing all of the small edge details into the narrower viewport. */
.hahn-stat-banner.is-style-paper-tears::before,
.hahn-stat-banner.is-style-paper-tears::after {
    /* Extra solid paper below the silhouette keeps its valleys from clipping
       against the section boundary and becoming a straight horizontal line. */
    height: clamp(100px, 7.5vw, 150px);
    mask-image: url('../images/stat-paper-tear-mask.svg');
    mask-size: max(100%, 768px) 100%;
}

@container stat-banner (min-width: 1051px) {
    .hahn-stat-banner__stat--5 .hahn-stat-banner__value,
    .hahn-stat-banner__stat--6 .hahn-stat-banner__value {
        margin-bottom: 0;
        line-height: 1;
    }
}

@container stat-banner (max-width: 1050px) {
    .hahn-stat-banner__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; align-items: center; gap: 20px; min-height: 0; background: none; }
    .hahn-stat-banner__layout::before, .hahn-stat-banner__layout::after { display: none; }
    .hahn-stat-banner__intro { grid-area: auto; grid-column: 1 / -1; text-align: center; padding: 20px 10px; }
    .hahn-stat-banner__stat { grid-area: auto; aspect-ratio: 1; width: 100%; max-width: 420px; justify-self: center; }
}
@container stat-banner (max-width: 540px) {
    .hahn-stat-banner__layout {
        --stat-stagger: clamp(30px, 9cqw, 48px);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 6px;
        /* Translated stars still need room above the bottom paper tear. */
        padding-bottom: var(--stat-stagger);
    }
    .hahn-stat-banner__intro { margin-bottom: 16px; }
    .hahn-stat-banner__stat {
        max-width: 260px;
        aspect-ratio: 1;
        padding: 25% 18%;
    }
    .hahn-stat-banner__stat--2,
    .hahn-stat-banner__stat--4,
    .hahn-stat-banner__stat--6,
    .hahn-stat-banner__stat--8 { transform: translateY(var(--stat-stagger)); }
}