/**
 * Banner sections: 100vh Banner, Business Banner, News Banner.
 */

.banner-section {
    --Neutral-White-Stone: #EEEDED;
    --Banner-Orange: #F65B1B;
    position: relative;
    min-height: calc(100vh - var(--site-header-height, 80px));
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-size: cover;
    /* Anchor to the top so the top of the image is always visible; with
       background-size: cover only the bottom is cropped, never the top. */
    background-position: center top;
    background-color: #000;
    color: var(--Neutral-White-Stone);
}

/* Background video — covers the banner and sits beneath the overlay and content.
   Layered above the section's background-image (which, when set, is passed as the
   video poster so it shows until the video paints and acts as a no-autoplay fallback). */
.banner-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 0;
    pointer-events: none;
}

.banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

/* Full-width wrapper; horizontal padding only so content isn’t flush to edges */
.banner-content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

@media (min-width: 768px) {
    .banner-content {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .banner-content {
        padding-left: clamp(3rem, 5vw, 5rem);
        padding-right: clamp(3rem, 5vw, 5rem);
    }
}

.banner-inner {
    max-width: min(70%, 860px);
}

.banner-inner--left {
    text-align: left;
}

/* ---- Title (100vh + News) ---- */
.banner-section .banner-title {
    color: var(--Neutral-White-Stone);
    font-family: "forma-djr-text", sans-serif;
    font-size: clamp(2.5rem, 8vw, 100px);
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    margin: 0 0 2rem;
}

/* Home hero leads with the business cards, so its headline + intro are more compact */
.home-banner .banner-title {
    font-size: clamp(2rem, 4.5vw, 60px);
    margin: 0 0 1rem;
}

.home-banner .banner-desc {
    font-size: clamp(1.05rem, 1.8vw, 22px);
}

/* ---- Description (Desktop/Heading/H4 - Alt) ---- */
.banner-section .banner-desc {
    color: var(--Neutral-White-Stone);
    font-family: "Scheherazade New", serif;
    font-size: clamp(1.25rem, 2.5vw, 32px);
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    margin: 0 0 1.5rem;
}

/* Override page-section padding so banner is exactly 100vh */
.banner-section.page-section {
    padding-top: 0;
    padding-bottom: 0;
}

/* ---- CTA Button (Desktop/Body/Large) ---- */
.banner-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 100px;
    border: 1px solid var(--Neutral-White-Stone);
    color: var(--Neutral-White-Stone);
    font-family: "forma-djr-text", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.banner-cta:hover {
    background-color: var(--Neutral-White-Stone);
    color: #000;
}

.banner-cta__icon {
    display: inline-flex;
    flex-shrink: 0;
}

.banner-cta__icon svg {
    width: 32px;
    height: 32px;
}

/* ---- Business Banner: image instead of title ---- */
/* Darker overlay on the NextOre and MRead pages for better content readability */
.page-nextore .business-banner .banner-overlay,
.page-mread .business-banner .banner-overlay {
    background: rgba(0, 0, 0, 0.6);
}

.business-banner .banner-image-wrap {
    margin-bottom: 1.5rem;
}

.business-banner .banner-image {
    max-width: 100%;
    height: auto;
    max-height: 120px;
    object-fit: contain;
    object-position: left;
}

@media (min-width: 768px) {
    .business-banner .banner-image {
        max-height: 160px;
    }
}

@media (min-width: 1024px) {
    .business-banner .banner-image {
        max-height: 200px;
    }
}

/* ---- News Banner: meta (category /// date) ---- */
.news-banner-meta {
    color: var(--Neutral-White-Stone);
    font-family: "forma-djr-text", sans-serif;
    font-size: clamp(0.875rem, 1.5vw, 20px);
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 0.75rem;
}

.news-banner-meta__sep {
    color: var(--Banner-Orange);
    margin: 0 0.25rem;
}

.news-banner .banner-title {
    font-size: clamp(2rem, 5vw, 56px);
    margin-top: 0;
}

/* ---- Scroll indicator: animated mouse + chevron, encourages scrolling ---- */
.banner-scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: clamp(1.5rem, 4vh, 3rem);
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    /* button reset */
    appearance: none;
    background: none;
    border: 0;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--Neutral-White-Stone, #EEEDED);
    opacity: 0.85;
    transition: opacity 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.banner-scroll-indicator:hover,
.banner-scroll-indicator:focus-visible {
    opacity: 1;
    color: var(--Banner-Orange, #F65B1B);
}

.banner-scroll-indicator__mouse,
.banner-scroll-indicator__chevrons {
    display: inline-flex;
}

.banner-scroll-indicator__wheel {
    animation: banner-scroll-wheel 1.8s ease-in-out infinite;
    transform-origin: center;
}

.banner-scroll-indicator__chevrons {
    animation: banner-scroll-bounce 1.8s ease-in-out infinite;
}

@keyframes banner-scroll-wheel {
    0%   { transform: translateY(0); opacity: 1; }
    60%  { transform: translateY(6px); opacity: 0.2; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes banner-scroll-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
    .banner-scroll-indicator__wheel,
    .banner-scroll-indicator__chevrons {
        animation: none;
    }
}

@media (max-width: 767px) {
    .banner-scroll-indicator {
        bottom: 1.25rem;
    }
    .banner-scroll-indicator__mouse svg {
        width: 18px;
        height: 28px;
    }
}

/* ---- Home Banner: compact headline + business "portal" cards docked at bottom ---- */
.home-banner {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

.home-banner__content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 0;
    padding-top: clamp(0.5rem, 3vh, 2.5rem);
}

.home-banner .banner-content {
    flex: 0 1 auto;
}

/* =========================================================================
   Business portal cards
   Surfaces the homepage's "split hero (logo + button)" businesses (NextOre,
   MRead) as interactive teasers docked at the foot of the hero. Each card is a
   frosted-glass portal over the business image, which zooms + brightens and is
   swept by a light sheen on hover. Cards rise in with a staggered entrance.
   ========================================================================= */
.home-banner-portals {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 100%;
    padding-top: 0;
    /* Match the banner title/description gutters exactly (see .banner-content) */
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    /* Bottom breathing room. NOTE: the scroll indicator is commented out in
       home-banner.php; if you re-enable it, bump this back up to
       clamp(4.5rem, 10vh, 6.5rem) so the cards clear the floating indicator. */
    padding-bottom: clamp(2rem, 5vh, 3.5rem);
}

@media (min-width: 768px) {
    .home-banner-portals {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .home-banner-portals {
        padding-left: clamp(3rem, 5vw, 5rem);
        padding-right: clamp(3rem, 5vw, 5rem);
    }
}

/* Single group kicker above the two cards (e.g. "Our Businesses") */
.home-banner-portals__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.5rem;
    font-family: "forma-djr-text", sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(238, 237, 237, 0.72);
}

/* .home-banner-portals__kicker::before {
    content: "";
    width: 28px;
    height: 1px;
    background: #F65B1B;
} */

.home-banner-portals__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .home-banner-portals__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.75rem;
        width: 100%; /* span the full banner width */
    }
}

.home-banner-portal {
    --portal-orange: #F65B1B;
    position: relative;
    overflow: hidden;
    display: flex;
    min-height: 290px;
    padding: 2.25rem 2.5rem;
    border-radius: 20px;
    border: 1px solid rgba(238, 237, 237, 0.16);
    background: rgba(20, 18, 17, 0.34);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--Neutral-White-Stone);
    text-decoration: none;
    isolation: isolate;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.35s ease,
                box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    /* staggered entrance (delay set inline per card) */
    opacity: 0;
    transform: translateY(26px);
    animation: portal-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--portal-delay, 0ms);
}

@keyframes portal-rise {
    to { opacity: 1; transform: translateY(0); }
}

/* The business image behind the frosted content; zooms + brightens on hover */
.home-banner-portal__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--portal-image, none);
    background-size: cover;
    background-position: center;
    transform: scale(1.04);
    opacity: 0.45;
    filter: saturate(0.9);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease, filter 0.5s ease;
}

/* Dark scrim over the image so the text stays legible */
.home-banner-portal::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg, rgba(10, 9, 8, 0.82) 0%, rgba(10, 9, 8, 0.5) 55%, rgba(10, 9, 8, 0.7) 100%);
    transition: background 0.45s ease;
}

/* Diagonal sheen that sweeps across the card on hover */
.home-banner-portal__sheen {
    position: absolute;
    top: 0;
    left: -60%;
    width: 50%;
    height: 100%;
    z-index: 0;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
    transition: left 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-banner-portal:hover,
.home-banner-portal:focus-visible {
    transform: translateY(-8px);
    border-color: rgba(246, 91, 27, 0.65);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(246, 91, 27, 0.25), 0 0 26px rgba(246, 91, 27, 0.22);
    outline: none;
}

.home-banner-portal:hover .home-banner-portal__media,
.home-banner-portal:focus-visible .home-banner-portal__media {
    transform: scale(1.12);
    opacity: 0.62;
    filter: saturate(1.1);
}

.home-banner-portal:hover::before,
.home-banner-portal:focus-visible::before {
    background: linear-gradient(115deg, rgba(10, 9, 8, 0.7) 0%, rgba(10, 9, 8, 0.35) 55%, rgba(10, 9, 8, 0.62) 100%);
}

.home-banner-portal:hover .home-banner-portal__sheen {
    left: 120%;
}

.home-banner-portal__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
    width: 100%;
}

.home-banner-portal__top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

/* Thin rule at the top of each card that grows full-width on hover */
.home-banner-portal__top::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(246, 91, 27, 0.7), transparent);
    transform: scaleX(0.2);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-banner-portal:hover .home-banner-portal__top::after,
.home-banner-portal:focus-visible .home-banner-portal__top::after {
    transform: scaleX(1);
}

.home-banner-portal__logo {
    display: block;
    margin-top: 0.1rem;
}

.home-banner-portal__logo img {
    display: block;
    height: 48px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
    object-position: left;
}

.home-banner-portal__desc {
    font-family: "forma-djr-text", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 140%;
    color: rgba(238, 237, 237, 0.92);
    margin: 0 0 auto; /* push the CTA to the card's bottom edge */
}

.home-banner-portal__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "forma-djr-text", sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.4px;
    color: var(--Neutral-White-Stone);
    transition: color 0.3s ease;
}

.home-banner-portal:hover .home-banner-portal__cta,
.home-banner-portal:focus-visible .home-banner-portal__cta {
    color: var(--portal-orange);
}

.home-banner-portal__cta-arrow {
    display: inline-flex;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-banner-portal__cta-arrow svg {
    width: 24px;
    height: 24px;
}

.home-banner-portal:hover .home-banner-portal__cta-arrow,
.home-banner-portal:focus-visible .home-banner-portal__cta-arrow {
    transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
    .home-banner-portal {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .home-banner-portal,
    .home-banner-portal__media,
    .home-banner-portal__sheen,
    .home-banner-portal__cta-arrow,
    .home-banner-portal__top::after {
        transition: none;
    }
    .home-banner-portal:hover,
    .home-banner-portal:focus-visible { transform: none; }
    .home-banner-portal:hover .home-banner-portal__media { transform: scale(1.04); }
}

@media (max-width: 767px) {
    .home-banner-portal {
        min-height: 195px;
        padding: 1.75rem 1.75rem;
        border-radius: 16px;
    }
    .home-banner-portal__logo img { height: 38px; }
    .home-banner-portal__desc { font-size: 17px; }
    .home-banner-portal__cta { font-size: 16px; }
}

/* ---- Responsive: smaller type on small screens ---- */
@media (max-width: 767px) {
    .banner-section .banner-title {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .banner-section .banner-desc {
        font-size: 1.125rem;
    }

    .banner-cta {
        font-size: 16px;
        padding: 0.625rem 1.25rem;
    }

    .banner-cta__icon svg {
        width: 24px;
        height: 24px;
    }

    .news-banner-meta {
        font-size: 0.875rem;
    }
}