/* Coverage Banner — classes/widgets/CoverageBanner/coverage-banner.php
   vw on the 1440 canvas like hero.css; px from 1024 down.

   The collage is a container: both photos and the chip are placed in per cent
   and sized in cqw, so the arrangement holds at every column width. Every
   number the panel can move is a real custom property declared on .cvb rather
   than a var() fallback at the point of use — the offsets are read in more
   than one rule, and a fallback would mean keeping copies in step. */

.cvb {
    --cvb-bg: #fdfbf5;
    --cvb-ink: #16293a;
    --cvb-body: #142535;
    --cvb-card: #e8d9b826;
    --cvb-card-border: transparent;
    --cvb-chip-bg: #ffffff;
    --cvb-chip-ink: #16293a;
    --cvb-chip-tile: #10b981;
    --cvb-btn-bg: #e8b64a;
    --cvb-btn-ink: #16293a;

    --cvb-split: 46%;
    --cvb-collage-ratio: .95;
    /* front photo: sits high and inset from the left so the back one shows */
    --cvb-a-w: 68%;
    --cvb-a-h: 79%;
    --cvb-a-x: 28%;
    /* back photo: pinned to the lower-left corner */
    --cvb-b-w: 54%;
    --cvb-b-h: 54%;

    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 5.56vw 80px;
    /* longhand: the Background Image control writes background-image here, and
       a shorthand would keep resetting it */
    background-color: var(--cvb-bg);
    color: var(--cvb-ink);
}

.cvb *,
.cvb *::before,
.cvb *::after {
    box-sizing: border-box;
}

.cvb__inner {
    position: relative;
    z-index: 1;
}

/* ---------- Header ---------- */
.cvb__head {
    margin: 0 auto 3.6vw;
    text-align: center;
}

.cvb__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8vw;
    margin: 0 0 1vw;
}

.cvb__eyebrow-dash {
    flex: 0 0 auto;
    width: 1.75vw;
    height: max(2px, .14vw);
    background: var(--cvb-ink);
}

.cvb__eyebrow-text {
    font-size: max(12px, .94vw);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cvb-ink);
}

.cvb__title {
    max-width: 60vw;
    margin: 0 auto;
    font-size: max(30px, 3.9vw);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.01em;
    color: var(--cvb-ink);
}

.cvb__lead {
    max-width: 44vw;
    margin: 1.1vw auto 0;
    font-size: max(14px, 1.15vw);
    line-height: 1.6;
    color: var(--cvb-body);
}

.cvb__lead p {
    margin: 0 0 1em;
}

.cvb__lead p:last-child {
    margin-bottom: 45px;
}

/* ---------- Columns ---------- */
.cvb__cols {
    display: grid;
    grid-template-columns: var(--cvb-split) 1fr;
    align-items: start;
    column-gap: 2.4vw;
    row-gap: 2.4vw;
}

/* Visual order only: the DOM keeps the photos before the cards, so the stacked
   layout below 1024 leads with them either way. */
.cvb--media-right .cvb__media {
    order: 2;
}

/* Show Photos off. Two classes deep so a saved Photo Column Width cannot put
   the empty column back. */
.cvb--no-media .cvb__cols {
    grid-template-columns: 1fr;
}

/* ---------- Collage ---------- */
.cvb__media {
    position: relative;
    container-type: inline-size;
    aspect-ratio: var(--cvb-collage-ratio);
}

.cvb__shot {
    position: absolute;
    overflow: hidden;
    border-radius: 25px;
    background: rgba(22, 41, 58, .06);
}

.cvb__shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.cvb__shot--a {
    top: 0;
    left: var(--cvb-a-x);
    z-index: 2;
    width: var(--cvb-a-w);
    height: var(--cvb-a-h);
}

.cvb__shot--b {
    bottom: 0;
    left: 0;
    z-index: 1;
    width: var(--cvb-b-w);
    height: var(--cvb-b-h);
}

/* Anchored by its centre, not its top-left: the label is nowrap, so a corner
   anchor would walk the chip off the collage as the text grew. */
.cvb__chip {
    position: absolute;
    top: var(--cvb-chip-y, 79%);
    left: var(--cvb-chip-x, 76%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 2.2cqw;
    max-width: 92%;
    padding: 1.8cqw 2.6cqw;
    border-radius: 1.6cqw;
    transform: translate(-50%, -50%);
    background: var(--cvb-chip-bg);
    box-shadow: 0 1.4cqw 3.6cqw rgba(22, 41, 58, .16);
    white-space: nowrap;
}

.cvb__chip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 18px;
    width: 5.4cqw;
    height: 18px;
    height: 5.4cqw;
    border-radius: 1.4cqw;
    background: var(--cvb-chip-tile);
    color: #ffffff;
}

.cvb__chip-icon svg {
    width: 58%;
    height: 58%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cvb__chip-icon i {
    font-size: 11px;
    font-size: 3cqw;
    line-height: 1;
}

.cvb__chip-text {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cvb-chip-ink);
}

/* ---------- Cards ---------- */
.cvb__list {
    display: flex;
    flex-direction: column;
    gap: .85vw;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cvb__item {
    padding: 2vw 2.2vw;
    border: 1px solid var(--cvb-card-border);
    border-radius: 1.2vw;
    background: var(--cvb-card);
}

.cvb__item-title {
    margin: 0 0 .5vw;
    font-size: max(17px, 1.7vw);
    font-weight: 500;
    line-height: 1.25;
    color: var(--cvb-ink);
}

.cvb__item-text {
    margin: 0;
    font-size: max(13px, 1.2vw);
    line-height: 1.55;
    color: var(--cvb-body);
}

/* ---------- Button ---------- */
.cvb__actions {
    display: flex;
    margin-top: 2.2vw;
}

.cvb__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.15vw 2.4vw;
    border: 0;
    border-radius: .45vw;
    background: var(--cvb-btn-bg);
    font-size: max(15px, 1.35vw);
    font-weight: 600;
    line-height: 1;
    color: var(--cvb-btn-ink);
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.cvb__btn:hover,
.cvb__btn:focus {
    background: var(--cvb-ink);
    color: #fff;
    transform: translateY(-2px);
}

/* ===== STYLE 2 — header in the copy column, plain checklist rows =====
   Same grid and the same collage as Style 1. Two things move: the header
   prints inside .cvb__panel (see render_style_2() in the widget) so it stacks
   above the list rather than sitting in a centred band, and the cards shed
   their chrome to become icon + title + text rows. */
.cvb--style-2 .cvb__head {
    margin: 0 0 1.4vw;
    text-align: left;
}

.cvb--style-2 .cvb__eyebrow {
    justify-content: flex-start;
    margin-bottom: .8vw;
}

/* both are centred by an auto margin and capped against the full section
   width in Style 1; in a column they take the column */
.cvb--style-2 .cvb__title {
    max-width: none;
    margin: 0;
}

.cvb--style-2 .cvb__lead {
    max-width: 75%;
    margin: .9vw 0 0;
}

.cvb--style-2 .cvb__list {
    gap: 1.1vw;
}

/* The tick takes its own flex track and the copy stacks in .cvb__item-body
   beside it, so a row with no description still lines up and one with no
   title does not leave a hole where the tick would have been. */
.cvb--style-2 .cvb__item {
    display: flex;
    align-items: flex-start;
    gap: .8vw;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.cvb--style-2 .cvb__item-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cvb-check-size, max(14px, 1.05vw));
    height: var(--cvb-check-size, max(14px, 1.05vw));
    margin-top: .25em;
    color: var(--cvb-check, var(--cvb-btn-bg));
}

.cvb--style-2 .cvb__item-icon svg {
    width: 100%;
    height: 100%;
}

.cvb--style-2 .cvb__item-icon i {
    font-size: inherit;
    line-height: 1;
}

/* min-width:0 so a long unbroken word wraps instead of stretching the row */
.cvb--style-2 .cvb__item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.cvb--style-2 .cvb__item-title {
    margin-bottom: .2vw;
    font-size: max(14px, 1.05vw);
    font-weight: 700;
    line-height: 1.35;
}

.cvb--style-2 .cvb__item-text {
    font-size: max(12px, .92vw);
    line-height: 1.5;
}

.cvb--style-2 .cvb__actions {
    margin-top: 1.8vw;
}

/* ===== STYLE 3 — centred header, icon-tile rows =====
   Everything left of the column gap is Style 1 untouched: the same centred
   band, the same collage, the same chip. Only the panel changes — a heading of
   its own over rows of tile, title and text, and no card box around them.

   The rows keep the .cvb__item-* classes the other skins use, so the Title and
   Text controls reach them unconditioned; the tile is .cvb__item-icon given a
   box. Its size, radius, colours and gap are all real custom properties, the
   way the collage offsets are, because more than one rule reads them. */
.cvb--style-3 .cvb__panel-title {
    margin: 0 0 2vw;
    font-size: max(20px, 2.1vw);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--cvb-ink);
}

.cvb--style-3 .cvb__list {
    gap: 2vw;
}

.cvb--style-3 .cvb__item {
    display: flex;
    align-items: flex-start;
    gap: var(--cvb-tile-gap, 1.2vw);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

/* the tile is square whatever the glyph inside it, so both axes read the one
   size property rather than a width and a padding that have to agree */
.cvb--style-3 .cvb__item-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cvb-tile-size, max(34px, 2.6vw));
    height: var(--cvb-tile-size, max(34px, 2.6vw));
    border-radius: var(--cvb-tile-radius, max(10px, .7vw));
    background: var(--cvb-tile-bg, var(--cvb-btn-bg));
    color: var(--cvb-tile-ink, var(--cvb-ink));
}

.cvb--style-3 .cvb__item-icon svg {
    width: 48%;
    height: 48%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cvb--style-3 .cvb__item-icon i {
    font-size: max(13px, 1.05vw);
    line-height: 1;
}

/* min-width:0 so a long unbroken word wraps instead of stretching the row */
.cvb--style-3 .cvb__item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.cvb--style-3 .cvb__item-title {
    margin-bottom: .35vw;
    font-size: max(16px, 1.45vw);
    font-weight: 700;
    line-height: 1.25;
}

.cvb--style-3 .cvb__item-text {
    font-size: max(13px, 1.05vw);
    line-height: 1.6;
}

.cvb--style-3 .cvb__actions {
    margin-top: 2vw;
}

/* Entrance — held at frame one by assets/css/reveal.css */
@media (prefers-reduced-motion: no-preference) {

    .cvb--animated .cvb__eyebrow,
    .cvb--animated .cvb__title,
    .cvb--animated .cvb__lead,
    .cvb--animated .cvb__item,
    .cvb--animated .cvb__actions {
        animation: cvb-up .7s cubic-bezier(.22, 1, .36, 1) both;
    }

    .cvb--animated .cvb__eyebrow { animation-delay: .08s; }
    .cvb--animated .cvb__title { animation-delay: .16s; }
    .cvb--animated .cvb__lead { animation-delay: .24s; }
    .cvb--animated .cvb__item:nth-child(1) { animation-delay: .34s; }
    .cvb--animated .cvb__item:nth-child(2) { animation-delay: .42s; }
    .cvb--animated .cvb__item:nth-child(3) { animation-delay: .50s; }
    .cvb--animated .cvb__item:nth-child(n+4) { animation-delay: .58s; }
    .cvb--animated .cvb__actions { animation-delay: .66s; }

    .cvb--animated .cvb__media {
        animation: cvb-in .9s cubic-bezier(.22, 1, .36, 1) .06s both;
    }

    /* .cvb--animated is on the section and .cvb--style-3 on the wrapper around
       it, so these two never share an element — the selector has to descend */
    .cvb--style-3 .cvb--animated .cvb__panel-title {
        animation: cvb-up .7s cubic-bezier(.22, 1, .36, 1) .28s both;
    }
}

@keyframes cvb-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

/* the chip carries a centring transform, so this one cannot animate transform
   without dropping it — opacity alone */
@keyframes cvb-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (max-width: 1024px) {

    .cvb {
        padding: 56px 32px;
    }

    .cvb__head {
        margin-bottom: 36px;
    }

    .cvb__eyebrow {
        gap: 10px;
        margin-bottom: 12px;
    }

    .cvb__eyebrow-dash {
        width: 24px;
    }

    .cvb__eyebrow-text {
        font-size: 13px;
    }

    .cvb__title {
        max-width: none;
        font-size: 38px;
    }

    .cvb__lead {
        max-width: 60ch;
        margin-top: 14px;
        font-size: 17px;
    }

    .cvb__cols {
        grid-template-columns: 1fr;
        row-gap: 32px;
    }

    /* the photos lead once stacked, whichever side they take on desktop */
    .cvb--media-right .cvb__media {
        order: 0;
    }

    .cvb__media {
        width: min(520px, 100%);
        margin-inline: auto;
    }

    .cvb__list {
        gap: 12px;
    }

    .cvb__item {
        padding: 22px 24px;
        border-radius: 16px;
    }

    .cvb__item-title {
        margin-bottom: 6px;
        font-size: 21px;
    }

    .cvb__item-text {
        font-size: 16px;
    }

    .cvb__actions {
        margin-top: 26px;
    }

    .cvb__btn {
        padding: 16px 28px;
        border-radius: 8px;
        font-size: 17px;
    }

    /* stacked, so the header sits above the photos again and the vw sizing
       above collapses to a few pixels */
    .cvb--style-2 .cvb__head {
        margin-bottom: 20px;
    }

    .cvb--style-2 .cvb__eyebrow {
        margin-bottom: 12px;
    }

    .cvb--style-2 .cvb__lead {
        margin-top: 14px;
    }

    .cvb--style-2 .cvb__list {
        gap: 16px;
    }

    .cvb--style-2 .cvb__item {
        gap: 12px;
    }

    .cvb--style-2 .cvb__item-icon {
        --cvb-check-size: 18px;
    }

    .cvb--style-2 .cvb__item-title {
        margin-bottom: 3px;
        font-size: 18px;
    }

    .cvb--style-2 .cvb__item-text {
        font-size: 15px;
    }

    .cvb--style-2 .cvb__actions {
        margin-top: 24px;
    }

    .cvb--style-3 .cvb__panel-title {
        margin-bottom: 22px;
        font-size: 26px;
    }

    .cvb--style-3 .cvb__list {
        gap: 24px;
    }

    .cvb--style-3 .cvb__item {
        gap: 14px;
    }

    /* the tile is not restated here on purpose: its default is a max() that
       already floors at 34px, and a --cvb-tile-size set on the row would beat
       the one the Tile Size control writes on .cvb, which inherits in */

    .cvb--style-3 .cvb__item-title {
        margin-bottom: 5px;
        font-size: 19px;
    }

    .cvb--style-3 .cvb__item-text {
        font-size: 15px;
    }

    .cvb--style-3 .cvb__actions {
        margin-top: 26px;
    }
}

@media (max-width: 600px) {

    .cvb {
        padding: 40px 20px;
    }

    .cvb__title {
        font-size: 30px;
    }

    .cvb__lead {
        font-size: 16px;
    }

    .cvb__item {
        padding: 18px 20px;
    }

    .cvb__item-title {
        font-size: 19px;
    }

    /* the chip comes inside the frame: overhanging it on a phone would push
       the section into a horizontal scroll */
    .cvb__chip {
        --cvb-chip-x: 62%;
        gap: 8px;
        padding: 7px 11px;
    }

    .cvb__chip-text {
        font-size: 11px;
    }

    .cvb__actions {
        display: block;
    }

    .cvb__btn {
        width: 100%;
        padding: 15px 22px;
        font-size: 16px;
    }
}