/* ==========================================================================
   Content Slider
   ========================================================================== */

/* --- Slide layout ------------------------------------------------------ */

.slidetextontop .hpsliderbody {
    padding: 0 10%;
}

.slidewtxtsbs .sliderwtextcon {
    display: flex;
    width: 80%;
    margin: 0 auto;
    float: inherit;
    background: #fff;
}

.slidetextonleft .sliderwtextcon {
    flex-direction: row-reverse;
}

.slidetextalternate ul.slides li:nth-child(even) .sliderwtextcon {
    flex-direction: row-reverse;
}

.slidewtxtsbs .slidewtxtimg {
    width: 50%;
}

.slidewtxtsbs .slidewtxttext {
    width: 50%;
    padding: 1.5rem;
    background: #fff;
}

.slidewtxtsbs.splitthirtythree .slidewtxtimg {
    width: 33%;
}

.slidewtxtsbs.splitthirtythree .slidewtxttext {
    width: 67%;
    background: none;
}

.slidewtxtsbs.splitthirtythree .sliderwtextcon {
    background: none;
    align-items: center;
}

#textontop .media--type-content-slider-size-16-4 img {
    height: 100%;
    object-fit: cover;
    max-height: 700px;
    min-height: 533px;
}

/* --- Arrows ------------------------------------------------------------ */

.contentslider ul.flex-direction-nav li a,
.flex-direction-nav a,
.flex-direction-nav a:hover {
    text-decoration: none;
    border: none;
}

.flexshowicon .flex-direction-nav a {
    display: initial;
    opacity: 1 !important;
    border-bottom: none;
}

.flexshowicon .flex-direction-nav a.flex-prev {
    left: 0;
}

.flexshowicon .flex-direction-nav a.flex-next {
    right: 0;
}

.flexshowicon .flexslider:hover .flex-direction-nav .flex-next {
    opacity: 1;
    right: 0;
}

/* kill any inherited glyphs / pseudo-content */
.contentslider .flex-direction-nav a::before,
.contentslider .flex-direction-nav a.flex-next::before,
.contentslider .flex-direction-nav a.flex-prev::before,
.flexshowicon .flex-direction-nav a::before {
    content: none;
}

/* Prev/next chevrons.
   One chevron shape drawn as a CSS mask, filled by background-color — so
   colour is a single custom property rather than a separate image per colour.

   Sharp corners: stroke-linecap='butt' and stroke-linejoin='miter'. Round
   values blunt the tips and curve the elbow; these cut the arms flat and make
   the elbow a true point. Miter extends the point ~40% of a stroke width
   further out, so if it ever looks clipped, drop the mask size to 90%.

   Size is driven by --slider-arrow-size: the mask is 95% of the box and the
   SVG stroke is 2 units of a 24 viewBox, so a 90px box gives a ~50px chevron
   with a ~7px stroke. Change one number to rescale everything.

   margin-top must be half the height: flexslider ships margin-top:-20px to
   centre a 40px arrow and never adjusts it, so the calc below is what keeps
   the chevron on the slider's centre line. */
.contentslider .flex-direction-nav a,
.flexshowicon .flex-direction-nav a {
    --slider-arrow-color: #fff;
    --slider-arrow-size: 90px;
    background: none;
    background-color: var(--slider-arrow-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") no-repeat center / 95%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") no-repeat center / 95%;
    /* The "Next"/"Previous" label ships inside the <a>. text-indent alone does
       not reliably move it out of the box here, and whatever part of it lands
       under the chevron shape is painted THROUGH the mask — visible as letters
       inside the arrow on smaller boxes. font-size:0 collapses the label to
       nothing at any arrow size; it stays in the accessibility tree. */
    text-indent: -999px;
    font-size: 0;
    height: var(--slider-arrow-size);
    width: var(--slider-arrow-size);
    margin: calc(var(--slider-arrow-size) * -0.5) 0 0;
}

.contentslider .flex-direction-nav a.flex-next,
.flexshowicon .flex-direction-nav a.flex-next {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

/* Colour only — the chevron shape is inherited from the rules above. */
.contentslider.coloricon .flex-direction-nav a {
    --slider-arrow-color: var(--phi-orange);
}

.contentslider.flexshowicon .flexslider:hover .flex-direction-nav .flex-prev {
    opacity: 0.7;
    left: 0;
}

.contentslider .flex-control-nav {
    bottom: 10px;
    z-index: 9;
}

.contentslider .flexslider {
    border: none;
}

/* --- Slider body / text ------------------------------------------------ */

.hpsliderbodycon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.hpsliderbody h2,
.hpsliderbody h4,
.hpsliderbody h3 {
    color: #FFF;
    margin-bottom: 0;
}

.hpsliderbody h2 + *,
.hpsliderbody h4 + *,
.hpsliderbody h3 + * {
    margin-top: 30px;
}

.view-content-slider.slidetextontop .hpsliderbodycon {
    align-items: flex-start;
}

.view-content-slider .hpsliderbodycon .hpsliderbody,
.hpsliderbodycon .hpsliderbody {
    font-size: 1.1rem;
    line-height: 26px;
    background: none;
    padding: 1rem 0;
    margin: 1rem 0;
    color: #fff;
    text-shadow: -1px -1px 1px rgba(255, 255, 255, .1), 1px 1px 1px rgba(0, 0, 0, .5);
}
.herocontainer.hero_banner_size_16_4_2 .hpsliderbodycon .hpsliderbody{
    text-shadow: none;
}

/* --- Breadcrumb overlay (opt-in per hero via field_show_breadcrumbs) ------ */
.hero-breadcrumb {
    margin-bottom: 0.75rem;
}
.hero-breadcrumb nav {
    line-height: 1;
}
.hero-breadcrumb .breadcrumb {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    font-family: var(--display-font);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-shadow: none;
}
.hero-breadcrumb .breadcrumb-item,
.hero-breadcrumb ol.breadcrumb li.breadcrumb-item:last-child {
    color: rgba(255,255,255,0.70);
}
.hero-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,0.70);
}
.hero-breadcrumb .breadcrumb-item a {
    color: rgba(255,255,255,0.70);
    border-bottom: none;
    text-decoration: none;
    transition: color 0.2s ease;
}
.hero-breadcrumb .breadcrumb-item a:hover {
    color: var(--phi-orange);
}



.view-content-slider .hpsliderbodycon .hpsliderbody p {
    font-size: 1rem;
    font-weight: normal;
    line-height: 28px;
}

.hpsliderbody h1,
.view-hero-banner .hpsliderbody h1 {
    font-size: 3.2rem;
    max-width: 1350px;
    color: #fff;
}
.herocontainer.hero_banner_size_16_4_2 .hpsliderbody h1{
    font-size: 3rem;
}

.hpsliderbody-blackbox .banner-bg-overlay {
    display: none;
}

.hpsliderbody-blackbox .hpsliderbodycon .hpsliderbody {
    background: rgba(0, 0, 0, .67);
    width: fit-content;
    text-shadow: none;
    position: relative;
    padding: 2rem;
}

.blackbox_right .hpsliderbody,
.blackbox_left .hpsliderbody,
.blackbox_center .hpsliderbody {
    box-sizing: border-box;
    width: 55%;
    min-width: 320px;
    padding: 44px 48px;
    background: rgba(38, 38, 38, 0.82);
    border-radius: 1rem;
    text-shadow: none;
    color: rgba(255, 255, 255, 0.80);
}

.blackbox_left .hpsliderbody {
    margin-right: auto;
}

.blackbox_right .hpsliderbody {
    margin-left: auto;
}

.blackbox_center .hpsliderbody {
    margin-left: auto;
    margin-right: auto;
}

[class*="blackbox_"] .banner-bg-overlay {
    display: none;
}

.banner-bg-overlay {
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, .3);
    width: 100%;
    height: 100%;
    z-index: 1;
}
.herocontainer.hero_banner_size_16_4_2 .banner-bg-overlay{
    background: rgba(0, 0, 0, .7);
}

/* --- Hero banner ------------------------------------------------------- */

.herobanner ul.slides li .herocontainer {
    height: 100%;
    max-height: 600px;
    min-height: 600px;
    overflow: hidden;
    position: relative;
    background: grey;
}

.herobanner ul.slides li .herocontainer.hero_banner_size_16_4_2 {
    max-height: 380px;
    min-height: inherit;
}

/* Below 1025px the banner keeps the height it always had. Declared BEFORE the
   media query that supersedes it: the two selectors have the same specificity,
   so source order is what decides, and with this second the 700px ceiling was
   clamping the dynamic height back down. */
.herobanner ul.slides li .herocontainer.hero_banner_size_16_9 {
    max-height: 700px;
    min-height: inherit;
}

/* The 16:9 hero fills whatever is left of the first screen.
 *
 * It used to be a flat 700px at every viewport, which meant the trust bar
 * underneath it fell 220px below the fold on a 768px-tall laptop while a
 * 1080px screen was left with ~90px of dead space under the bar. The point of
 * this banner is that the top bar, the header, the hero and the trust bar all
 * land in one screenful, so the height is derived rather than declared:
 * viewport, less the bars above (--total-header) and the bar below
 * (--trust-bar-height).
 *
 * svh, not vh: on mobile browsers vh is the height WITHOUT the retracting
 * address bar, which would push the trust bar off screen on first paint.
 *
 * The clamp is a safety net at the extremes, not the normal case: below about
 * 900px of viewport the calc would leave too little to read the copy in, and
 * on a very tall screen an unbounded hero stops looking like a banner.
 *
 * Only from 1025px up. Narrow screens keep the existing fixed heights, where
 * the chrome takes so much of the screen that there is nothing useful left to
 * divide up. */
@media only screen and (min-width: 1025px) {
    .herobanner ul.slides li .herocontainer.hero_banner_size_16_9 {
        height: calc(100svh - var(--total-header) - var(--trust-bar-height));
        min-height: 440px;
        max-height: 820px;
    }

    /* The slide image is sized for the old fixed container: a 600px floor and a
       700px ceiling. Against a container that now changes with the viewport
       both of those fight it, so the image simply fills whatever the container
       turns out to be. */
    .herobanner ul.slides li .herocontainer.hero_banner_size_16_9 img {
        height: 100%;
        width: 100%;
        min-height: 0;
        max-height: none;
        object-fit: cover;
    }

    /* Same for a video slide, which carried its own 650px floor and a -100px
       top margin to crop it against the old fixed height. */
    .herobanner ul.slides li .herocontainer.hero_banner_size_16_9 .videoitem,
    .herobanner .hero_banner_size_16_9 .videoitem {
        max-height: none;
        height: 100%;
    }
    .herobanner ul.slides li .herocontainer.hero_banner_size_16_9 .videoitem video {
        height: 100%;
        min-height: 0;
        margin-top: 0;
        object-fit: cover;
    }
}


.flexslider.optionset-hero-banner {
    margin: 0;
}

.herobanner .block-img-slide img {
    height: 100%;
    object-fit: cover;
    max-height: 700px;
    min-height: 600px;
}

.herobanner .block-img-slide .media--type-hero-banner-size-16-4-2 img {
    max-width: 100%;
    height: auto;
    min-height: inherit;
    max-height: inherit;
}

.fullwidth.herobanner .block-img-slide .media--type-hero-banner-size-16-4-2 img {
    height: 400px;
}

.herobanner .flexslider .flex-control-nav {
    bottom: 10px;
    z-index: 9;
}

.herobanner .flex-control-paging li a {
    width: 16px;
    height: 16px;
    display: block;
    background: rgba(38, 38, 38, 0.82);
    box-shadow: none;
    border: none;
}

.herobanner .flex-control-paging li a.flex-active {
    background: var(--phi-orange);
    cursor: default;
    box-shadow: none;
    border: none;
}

.herobanner .videoitem video {
    object-fit: cover;
    min-height: 650px;
    margin-top: -100px;
}

.herobanner .hero_banner_size_16_9 .videoitem {
    max-height: 700px;
}

.block-img-slide.smobileimg,
.block-img-slide.smobileimg img {
    display: none;
}

/* Larger chevrons on the full-width hero banner. Size, vertical centring and
   the horizontal offsets all derive from --slider-arrow-size. */
.fullwidth.herobanner .flex-direction-nav a {
    --slider-arrow-size: 130px;
}

.fullwidth.herobanner .flexslider:hover .flex-direction-nav .flex-prev {
    left: calc(50% - 660px - var(--slider-arrow-size, 130px));
}

.fullwidth.herobanner .flexslider:hover .flex-direction-nav .flex-next {
    right: calc(50% - 660px - var(--slider-arrow-size, 130px));
}

/* --- Breakpoints ------------------------------------------------------- */

@media only screen and (max-width: 1450px) {
    .herobanner .flexslider:hover .flex-direction-nav .flex-prev,
    .fullwidth.herobanner .flexslider:hover .flex-direction-nav .flex-prev {
        left: 20px;
    }
    .herobanner .flexslider:hover .flex-direction-nav .flex-next,
    .fullwidth.herobanner .flexslider:hover .flex-direction-nav .flex-next {
        right: 20px;
    }
    .herobanner ul.slides li .herocontainer {
        max-height: 500px;
        min-height: 500px;
    }
    .herobanner .block-img-slide img {
        height: 100%;
        object-fit: cover;
        max-height: 700px;
        min-height: 500px;
    }
    .herobanner .videoitem video {
        object-fit: cover;
        min-height: 550px;
        margin-top: -50px;
    }
}

@media only screen and (max-width: 1400px) {
    .herobanner ul.slides li .herocontainer {
        max-height: 460px;
        min-height: 460px;
    }
    .herobanner .block-img-slide img {
        height: 100%;
        object-fit: cover;
        max-height: 700px;
        min-height: 500px;
    }
    .hpsliderbody h2 {
        font-size: 3rem;
    }
    .hpsliderbody h3 {
        font-size: 2rem;
    }
}

@media only screen and (max-width: 1200px) {
    .herobanner ul.slides li .herocontainer {
        max-height: 480px;
        min-height: 480px;
    }
    .herobanner .block-img-slide img {
        height: 100%;
        object-fit: cover;
        max-height: 700px;
        min-height: 480px;
    }
    .herobanner .videoitem video {
        object-fit: cover;
        min-height: 480px;
        margin-top: 0;
    }
}

@media only screen and (max-width: 1024px) {
    .herobanner ul.slides li .herocontainer {
        max-height: 480px;
    }
    .herobanner .hpsliderbody h1 {
        font-size: 2.6rem;
    }
    .cstextontop [class*="media--type-content-slider"] img {
        min-height: 380px;
        object-fit: cover;
    }
    .blackbox_right .hpsliderbody,
    .blackbox_left .hpsliderbody,
    .blackbox_center .hpsliderbody {
        width: 70%;
        padding: 32px 36px;
    }
}

@media only screen and (max-width: 992px) {
    .herobanner .block-img-slide .media--type-hero-banner-size-16-4-2 img {
        min-height: 250px;
        object-fit: cover;
    }
    .col-12:has(.hbcontainer) {
        padding: 0;
    }
}

@media only screen and (max-width: 768px) {
    .contentslider .flex-direction-nav a,
    .flexshowicon .flex-direction-nav a,
    .fullwidth.herobanner .flex-direction-nav a {
        --slider-arrow-size: 60px;
    }
    .hpsliderbody h2 {
        font-size: 2.5rem;
    }
    .hpsliderbody h3 {
        font-size: 1.5rem;
    }
    .block-img-slide.sdesktopimg.hasmobile,
    .block-img-slide.sdesktopimg.hasmobile img {
        display: none;
    }
    .block-img-slide.smobileimg,
    .block-img-slide.smobileimg img {
        display: inherit;
    }
    .cstextontop [class*="media--type-content-slider"] img {
        min-height: 480px;
        object-fit: cover;
    }
}

@media only screen and (max-width: 650px) {
    .herobanner ul.slides li .herocontainer {
        max-height: 350px;
    }
    .slidewtxtsbs .sliderwtextcon {
        display: inherit;
    }
    .slidewtxtsbs .slidewtxtimg,
    .slidewtxtsbs.splitthirtythree .slidewtxtimg {
        width: 80%;
        margin: 0 auto;
    }
    .slidewtxtsbs .slidewtxttext {
        width: 100%;
    }
    .slidewtxtsbs.splitthirtythree .slidewtxttext {
        width: 100%;
        background: none;
    }
}
/* ==========================================================================
   Grey chevrons
   `.contentslider.coloricon .flex-direction-nav a` (0,3,1) sets the arrow
   colour to orange, which outranked the grey the card sliders ask for. These
   carry the extra modifier class so they win, and keep orange for :hover as
   the affordance.
   ========================================================================== */
.contentslider.coloricon.cardslider .flex-direction-nav a,
.contentslider.coloricon.news-slider .flex-direction-nav a {
    --slider-arrow-color: var(--phi-gray-600);
}
.contentslider.coloricon.cardslider .flex-direction-nav a:hover,
.contentslider.coloricon.news-slider .flex-direction-nav a:hover {
    --slider-arrow-color: var(--phi-orange);
}

/* ==========================================================================
   CARD SLIDER (.cardslider)
   The Upcoming Activities treatment applied to the side-by-side content
   slider: each slide is one bordered, rounded card — image filling half the
   card, copy centred in the other half — with the chevrons pulled out into the
   page gutter. The news slider builds this from two view fields; the content
   slider nests everything in .sliderwtextcon, so the same look is rebuilt here
   against that structure.
   ========================================================================== */
.cardslider {
    /* Side padding is the gutter the chevrons sit in. */
    max-width: 100%;
    margin: 0 auto 1rem;
    position: relative;
    padding: 0 6rem;
}
/* overflow must stay visible so the arrows can leave the box; the rounded card
   look comes from the <li> instead. */
.cardslider.contentslider .flexslider,
.cardslider .flexslider {
    background: none;
    border: none;
    overflow: visible;
    margin: 0;
}

/* The slide IS the card. */
.cardslider .flexslider ul.slides > li {
    background: #fff;
    border: 1px solid var(--phi-gray-200);
    border-radius: 16px;
    overflow: hidden;
}
.cardslider .sliderwtextcon {
    display: flex;
    align-items: stretch;
    width: 100%;
    margin: 0;
    background: none;
    min-height: 420px;
}
.cardslider.slidetextonleft .sliderwtextcon {
    flex-direction: row-reverse;
}

/* Image half — fills the card edge to edge. */
.cardslider .slidewtxtimg {
    position: relative;
    flex: 0 0 50%;
    max-width: 50%;
    width: 50%;
    margin: 0;
    overflow: hidden;
}
.cardslider .slidewtxtimg .media,
.cardslider .slidewtxtimg .field,
.cardslider .slidewtxtimg .field__item,
.cardslider .slidewtxtimg picture,
.cardslider .slidewtxtimg img {
    height: 100%;
    width: 100%;
    display: block;
}
.cardslider .slidewtxtimg img {
    object-fit: cover;
}

/* Copy half — vertically centred. */
.cardslider .slidewtxttext {
    flex: 1 1 50%;
    max-width: 50%;
    width: 50%;
    padding: 2.75rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: none;
}
.cardslider .slidewtxttext h2,
.cardslider .slidewtxttext h3,
.cardslider .slidewtxttext h4 {
    font-size: 1.9rem;
    line-height: 1.2;
    margin: 0 0 1rem;
    /* Clamp so slides keep a consistent height. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cardslider .slidewtxttext p {
    color: var(--phi-gray-600);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 1.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cardslider .slidewtxttext > :last-child {
    margin-bottom: 0;
}

/* Dots below the card. */
.cardslider .flex-control-nav {
    position: static;
    margin-top: 1.25rem;
    text-align: center;
}
.cardslider .flex-control-nav li a {
    background: var(--phi-gray-200);
    box-shadow: none;
    width: 11px;
    height: 11px;
}
.cardslider .flex-control-nav li a.flex-active {
    background: var(--phi-orange);
}

/* Chevrons pinned in the gutter, at rest AND on hover so they never shift.
   Deliberately no --slider-arrow-size here: the news slider carries its own
   44px in news.css but that file is in the "component" asset group, which
   loads BEFORE this "theme"-group file, so the generic 90px above wins and
   news actually renders at 90px. Setting a size here would make the card
   slider the only one that differs. Inheriting keeps the two identical. */
.cardslider.flexshowicon .flex-direction-nav a.flex-prev,
.cardslider.contentslider.flexshowicon .flexslider:hover .flex-direction-nav a.flex-prev { left: -6rem; }
.cardslider.flexshowicon .flex-direction-nav a.flex-next,
.cardslider.contentslider.flexshowicon .flexslider:hover .flex-direction-nav a.flex-next { right: -6rem; }

@media (max-width: 992px) {
    .cardslider { padding: 0 3.25rem; }
    .cardslider.flexshowicon .flex-direction-nav a.flex-prev,
    .cardslider.contentslider.flexshowicon .flexslider:hover .flex-direction-nav a.flex-prev { left: -3.25rem; }
    .cardslider.flexshowicon .flex-direction-nav a.flex-next,
    .cardslider.contentslider.flexshowicon .flexslider:hover .flex-direction-nav a.flex-next { right: -3.25rem; }
    .cardslider .slidewtxttext { padding: 2rem; }
}

@media (max-width: 650px) {
    .cardslider { padding: 0; }
    /* Stacked: image on top, copy beneath. The generic .slidewtxtsbs mobile
       rules set display:inherit and 80% widths, so they are overridden here. */
    .cardslider .sliderwtextcon,
    .cardslider.slidetextonleft .sliderwtextcon {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .cardslider .slidewtxtimg,
    .cardslider .slidewtxttext {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
    .cardslider .slidewtxtimg img { height: 220px; }
    .cardslider .slidewtxttext { padding: 1.5rem; }
    .cardslider .slidewtxttext h2,
    .cardslider .slidewtxttext h3,
    .cardslider .slidewtxttext h4 { font-size: 1.35rem; }
    /* Arrows overlay the image when there is no gutter left. */
    .cardslider.flexshowicon .flex-direction-nav a.flex-prev,
    .cardslider.contentslider.flexshowicon .flexslider:hover .flex-direction-nav a.flex-prev { left: 0; }
    .cardslider.flexshowicon .flex-direction-nav a.flex-next,
    .cardslider.contentslider.flexshowicon .flexslider:hover .flex-direction-nav a.flex-next { right: 0; }
    /* Size/colour left to the shared rules so this matches the news slider,
       which renders 60px grey here. */
}

/* ==========================================================================
   HERO SLIDE COPY ON NARROW SCREENS

   The copy was overflowing its own banner. Measured at 390px: 538px of text
   inside a 480px hero, so the block started above the image and the second
   button ran into the pager dots.

   Three things caused it, and all three are addressed below.

   1. The heading was still at the 2.5rem set in the <=768px block above. In a
      248px column that is four lines at 44px each, 176px of heading alone.
   2. `.hpsliderbody` carries 36px of side padding, which takes 72px out of a
      320px box and leaves the text in a narrow ribbon down the middle.
   3. The two buttons are inline in one paragraph, so they wrapped onto separate
      lines with the paragraph's own line-height between them rather than a
      deliberate gap.

   Nothing here applies above 650px: the copy fits at 768px and the existing
   treatment there is correct.
   ========================================================================== */
@media only screen and (max-width: 650px) {
    /* The blackbox variants are given `width: 70%; padding: 32px 36px` in the
       <=1024px block above, at (0,2,0). That is sensible on a tablet and much
       too generous at 390px, where 36px a side takes 72px out of a 320px box.
       Matched selector-for-selector so this wins, and the width is released so
       the copy uses the column it already has. */
    .hpsliderbody,
    .blackbox_right .hpsliderbody,
    .blackbox_left .hpsliderbody,
    .blackbox_center .hpsliderbody,
    .view-content-slider .hpsliderbodycon .hpsliderbody,
    .hpsliderbodycon .hpsliderbody {
        width: 100%;
        padding: 1.25rem 1.25rem 1.5rem;
        margin: 0;
    }
    /* h1 as well as h2, and the 16:4 variant explicitly. That banner is only
       380px tall and carries its own 3rem rule at (0,3,0), so node/122 still
       had a 48px heading spilling 487px of copy out of a 380px box. */
    .hpsliderbody h1,
    .hpsliderbody h2,
    .view-hero-banner .hpsliderbody h1,
    .herocontainer.hero_banner_size_16_4_2 .hpsliderbody h1 {
        font-size: 1.75rem;
        line-height: 1.2;
    }
    .hpsliderbody h3,
    .hpsliderbody h4 {
        font-size: 1.15rem;
        line-height: 1.3;
    }
    .hpsliderbody p {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 0.75rem;
    }

    /* The button row. `:has()` rather than :last-child because a slide is not
       guaranteed to end with its buttons, and the file already relies on :has()
       (see `.col-12:has(.hbcontainer)` above). Matching on the button classes
       keeps a paragraph with an inline link in prose out of it. */
    .hpsliderbody p:has(> .btn),
    .hpsliderbody p:has(> .white-btn),
    .hpsliderbody p:has(> .green-btn) {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 0;
    }
    .hpsliderbody p:has(> .btn) > a,
    .hpsliderbody p:has(> .white-btn) > a,
    .hpsliderbody p:has(> .green-btn) > a {
        margin: 0;
        padding: 8px 16px;
        font-size: 0.8125rem;
    }
}