/*=============================================
    Coverage — browning
    Widget: classes/widgets/Coverage/coverage.php
    Script: assets/js/coverage-slider.js

    Centred header over a Swiper carousel with bullet pagination below. One
    card per slide, several in view, advancing one at a time — each card is a
    photo, a round icon straddling the curve of the body below it, then title,
    copy and a "Learn more" link.

    Swiper owns the slide widths and the spacing (spaceBetween, authored in vw
    and converted in coverage-slider.js), so there is no grid or column count
    here — "cards in view" is a slider setting, not a CSS one.

    Sizing is vw on the same 1440 canvas and the same 1024/480 breakpoints as
    hero.css and service.css, so the sections scale together.

    Palette is declared on .coverage rather than :root — hero.css owns the
    global tokens and is only loaded on pages using the hero.
    Loaded only where the widget is used (get_style_depends).
=============================================*/

.coverage {
    --cov-navy: #1c3244;
    --cov-card: #142535;
    --cov-cream: #E8D9B8;
    --cov-yellow: #e8b64a;
    --cov-ink: #1c3244;
    --cov-muted: #5a6478;
    --cov-card-ink: #ffffff;
    --cov-card-muted: rgba(255, 255, 255, .72);
    /* How far the card body's curve peaks up over the photo. Declared here
       rather than left to a var() fallback so it exists as a real custom
       property: the value is read in three places, and a fallback would mean
       three copies to keep in step. Roughly 4% of a card's width. */
    --cov-curve: 0.8vw;

    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: 6vw 5.56vw;
    background: #ffffff;
    color: var(--cov-ink);
}

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

.coverage__inner {
    /* min() so a vw cap can never overflow a narrower Elementor container and
       leave the auto margins with no slack to centre with */
    width: 100%;
    margin-inline: auto;
}

/* ============ Header ============ */
.coverage__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 3.33vw;
}

.coverage__eyebrow {
    display: flex;
    align-items: center;
    gap: .56vw;
    margin: 0 0 1.11vw;
}

.coverage__eyebrow i {
    display: block;
    width: 1.67vw;
    height: .14vw;
    min-height: 2px;
    background: currentColor;
}

.coverage__eyebrow span {
    font-size: .97vw;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.coverage__title {
    margin: 0 0 1.11vw;
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 800;
    font-size: 3.89vw;
    line-height: 1;
    letter-spacing: -.01em;
}

.coverage__text {
    margin: 0;
    max-width: 38vw;
    font-size: 1.06vw;
    line-height: 1.6;
    color: var(--cov-muted);
}

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

.coverage__text p:last-child {
    margin-bottom: 0;
}

/* ============ Slider ============ */
/* padding gives the cards' hover lift and shadow somewhere to go — .swiper
   clips to its own box, so without it the lifted card is cut off at the top */
.coverage__swiper {
    padding: .7vw 0 1vw;
    margin: -.7vw 0 -1vw;
}

/* One card per slide, several in view, advancing one at a time — Swiper owns
   the widths and the spacing (spaceBetween), so there is no grid here.
   height:auto lets a slide take the height of the row rather than Swiper's
   default 100%, and the flex display makes the card fill it, so every card in
   view lines up regardless of how much copy it holds. */
.coverage .swiper-slide {
    height: auto;
    display: flex;
}

.coverage .swiper-wrapper {
    align-items: stretch;
}

/* ============ Pagination ============ */
/* Swiper's base .swiper-pagination is position:absolute, which would tear this
   out of flow — it sits outside .swiper on purpose so it can follow the rows.
   Two classes to out-specify that (0,2,0 beats 0,1,0). */
.coverage .coverage__pagination {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .42vw;
    margin-top: 2.5vw;
}

.coverage .swiper-pagination-bullet {
    width: .56vw;
    min-width: 6px;
    height: .56vw;
    min-height: 6px;
    margin: 0;
    border-radius: 99px;
    background: var(--cov-ink);
    opacity: .28;
    cursor: pointer;
    transition: width .35s cubic-bezier(.22, 1, .36, 1), opacity .35s ease;
}

.coverage .swiper-pagination-bullet-active {
    width: 2.22vw;
    min-width: 24px;
    opacity: 1;
}

/* ============ Card ============ */
.cov-card {
    /* fills the slide Swiper sized for it */
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: .69vw;
    background: var(--cov-card);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1),
                box-shadow .35s cubic-bezier(.22, 1, .36, 1);
}

.cov-card:hover {
    transform: translateY(-.48vw);
    box-shadow: 0 1.2vw 2.6vw rgba(28, 50, 68, .22);
}

/* Card Hover control, off. Doubled class so this beats the two :hover rules
   on specificity rather than relying on source order. */
.coverage--no-hover.coverage--no-hover .cov-card:hover {
    transform: none;
    box-shadow: none;
}

.coverage--no-hover.coverage--no-hover .cov-card:hover .cov-card__media img {
    transform: none;
}

/* Square bottom — the curve lives on the body, which is pulled up over this.
   Curving the photo's bottom corners instead would arc the navy the other way,
   dipping in the centre rather than peaking under the icon. */
.cov-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.cov-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.cov-card:hover .cov-card__media img {
    transform: scale(1.05);
}

/* Sits in normal flow as the body's first child, lifted by a negative top
   margin so it straddles the peak of the body's curve. Absolute positioning
   is not an option: the media box is sized by aspect-ratio, so its height is
   not a value this could be offset against. */
.cov-card__icon {
    position: relative;
    z-index: 2;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.61vw;
    height: 3.61vw;
    margin: -1.8vw auto .69vw;
    border-radius: 50%;
    background: var(--cov-cream);
    color: var(--cov-navy);
}

.cov-card__icon svg {
    width: 1.81vw;
    height: 1.81vw;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cov-card__icon i {
    font-size: 1.67vw;
    line-height: 1;
}

.cov-card__icon img {
    width: 1.81vw;
    height: 1.81vw;
    object-fit: contain;
}

/* The curve lives here. Both TOP corners take a 50% horizontal radius, so
   their arcs meet at the exact centre — the highest point — and fall away to
   --cov-curve at the card's edges. The matching negative margin lifts that
   peak up over the photo, so the navy arcs into it under the icon.

   background-color is inherited rather than set to --cov-card so that the
   card_bg control, and the per-card override in the repeater, both reach it —
   a hardcoded value here would leave the curve a different colour to the card
   the moment either was used. */
.cov-card__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto;
    margin-top: calc(var(--cov-curve) * -2);
    padding: 0 1.11vw 1.39vw;
    border-radius: 50% 50% 0 0 / 34px 33px 0 0;
    background-color: inherit;
    text-align: center;
}

.cov-card__title {
    margin: 0 0 .56vw;
    font-size: 1.39vw;
    font-weight: 700;
    line-height: 1.25;
    color: var(--cov-card-ink);
}

.cov-card__text {
    margin: 0 0 .83vw;
    font-size: .97vw;
    line-height: 1.5;
    color: var(--cov-card-muted);
}

/* pushed to the foot so the links line up across cards of unequal copy */
.cov-card__link {
    display: inline-flex;
    align-items: center;
    gap: .35vw;
    margin-top: auto;
    font-size: .97vw;
    font-weight: 600;
    color: var(--cov-yellow);
    text-decoration: none;
    transition: color .25s ease;
}

.cov-card__link svg {
    width: .97vw;
    height: .97vw;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.cov-card__link i {
    font-size: .9vw;
    line-height: 1;
}

.cov-card__link:hover svg {
    transform: translate(.14vw, -.14vw);
}

/*=============================================
    MOTION
    Gated on .coverage--animated, which the widget's Animation control adds,
    and held at frame one by assets/css/reveal.css until scrolled into view.

    Only the header animates. The cards are inside Swiper slides, which the
    slider itself fades — layering an entrance animation on top would fight
    the fade's opacity, and any transform would fight autoHeight's measuring.

    fill-mode is `backwards`, never `forwards`/`both`: these end at the
    element's natural state, and a forwards fill would keep overriding it.
=============================================*/
@media (prefers-reduced-motion: no-preference) {

    .coverage--animated .coverage__eyebrow,
    .coverage--animated .coverage__title,
    .coverage--animated .coverage__text {
        animation: cov-rise .8s cubic-bezier(.22, 1, .36, 1) backwards;
    }

    .coverage--animated .coverage__eyebrow i {
        transform-origin: left center;
        animation: cov-rule .7s cubic-bezier(.22, 1, .36, 1) .12s backwards;
    }

    .coverage--animated .coverage__eyebrow { animation-delay: .05s; }
    .coverage--animated .coverage__title   { animation-delay: .14s; }
    .coverage--animated .coverage__text    { animation-delay: .24s; }

    .coverage--animated .coverage__swiper,
    .coverage--animated .coverage__pagination {
        animation: cov-rise .9s cubic-bezier(.22, 1, .36, 1) .34s backwards;
    }
}

@keyframes cov-rise {
    from { opacity: 0; transform: translateY(1.4vw); }
}

@keyframes cov-rule {
    from { opacity: 0; transform: scaleX(0); }
}

/*=============================================
    Breakpoints — matching hero.css and service.css
=============================================*/
@media (max-width: 1024px) {

    .coverage {
        /* cards in view drops to 2 here via the slider's breakpoints, not CSS,
           so the arc is measured against a narrower card than on desktop and
           stays around 4% of its width */
        --cov-curve: 14px;
        padding: 72px 24px;
    }

    .coverage__inner { max-width: 100%; }

    .coverage__head { margin-bottom: 36px; }

    .coverage__eyebrow { gap: 8px; margin-bottom: 14px; }
    .coverage__eyebrow i { width: 24px; height: 2px; }
    .coverage__eyebrow span { font-size: 13px; }

    .coverage__title { font-size: clamp(32px, 6vw, 52px); margin-bottom: 14px; }
    .coverage__text { font-size: clamp(15px, 2.2vw, 17px); max-width: 60ch; }

    .coverage__swiper { padding: 8px 0 12px; margin: -8px 0 -12px; }

    .coverage .coverage__pagination { gap: 6px; margin-top: 28px; }
    .coverage .swiper-pagination-bullet { width: 7px; height: 7px; }
    .coverage .swiper-pagination-bullet-active { width: 26px; }

    .cov-card { border-radius: 12px; }
    .cov-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(28, 50, 68, .22); }

    .cov-card__icon {
        width: 52px;
        height: 52px;
        margin: -26px auto 12px;
    }

    .cov-card__icon svg,
    .cov-card__icon img { width: 24px; height: 24px; }
    .cov-card__icon i { font-size: 22px; }

    .cov-card__body { padding: 0 16px 20px; }
    .cov-card__title { font-size: 19px; margin-bottom: 8px; }
    .cov-card__text { font-size: 14px; margin-bottom: 12px; }
    .cov-card__link { font-size: 14px; gap: 5px; }
    .cov-card__link svg { width: 14px; height: 14px; }
    .cov-card__link:hover svg { transform: translate(2px, -2px); }
}

@media (max-width: 767px) {

    .coverage {
        padding: 56px 18px;
    }

}