/* ============================================================
   BTE NEWS & INSIGHT — Carousel
   Light section, horizontal scroll-snap card carousel, red side tab
   ============================================================ */

.bte-news {
    position: relative;
    background-color: var(--bte-white, #ffffff);
    color: var(--bte-navy);
    padding-block: clamp(var(--space-12), 8vw, var(--space-20));
    overflow: hidden;
}

.bte-news__inner {
    max-width: var(--content-width, 1400px);
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-right: calc(var(--gutter) + 56px); /* room for side tab */
}

/* ---- Header row ---- */
.bte-news__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

.bte-news__heading {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--bte-red);
    margin: 0;
    flex: 1 1 auto;
}

.bte-news__subhead {
    /* 2026-07-24 — was text-xl (28px), too large for a subhead. Bring it
       down and let it scale: ~16px on phones up to 22px on desktop. */
    font-size: clamp( var(--text-base), 1.4vw, var(--text-lg) );
    color: rgba(7, 9, 58, 0.65);
    margin: var(--space-2) 0 0;
    flex-basis: 100%;
}

.bte-news__header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

/* News nav arrows now use the shared .bte-arrow-btn look with no local
   override -- previously swapped the border to navy here, no longer
   needed now the whole site draws from one definition. */

/* "View All News" text white — scoped here specifically, not a
   site-wide change to the shared teal button style */
.bte-news__header-actions .bte-btn--teal,
.bte-news__header-actions .bte-btn--teal .bte-btn__inner {
    color: var(--bte-white);
}

/* ---- Carousel viewport ---- */
.bte-news__viewport {
    overflow: hidden;
    width: 100%;
}

.bte-news__track {
    display: flex;
    gap: var(--space-12);
    transition: transform 0.55s var(--ease-out);
    will-change: transform;
}

/* ---- Card ---- */
.bte-news__card {
    flex: 0 0 auto;
    width: clamp(260px, 30vw, 380px);
    /* 2026-07-23 — default VISIBLE. The JS reveal (bte-news.js) sets these to
       opacity:0 inline and fades them in; keeping the CSS default visible
       means that if the reveal ever fails to run on a card (e.g. a Barba
       timing edge) the section still shows content instead of blank white. */
    opacity: 1;
    transform: none;
    position: relative;
}

/* Vertical divider — sits in the gap before each card except the
   first, matching the thin lines between columns in the reference */
.bte-news__card:not(:first-child)::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--space-12) / 2);
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: rgba(7, 9, 58, 0.12);
}

.bte-news__card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.bte-news__card-img-wrap {
    border-radius: 0.75rem;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    margin-top: var(--space-5);
}

.bte-news__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0.75rem;
    transition: transform 0.5s var(--ease-out);
}

.bte-news__card-img--placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e5e5ef, #cfd2e8);
}

.bte-news__card-link:hover .bte-news__card-img {
    transform: scale(1.05);
}

.bte-news__card-date {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bte-red);
    margin-bottom: var(--space-2);
}

.bte-news__card-title {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.35;
    text-transform: none;
    color: var(--bte-navy);
    margin: 0;
    /* Fixed height (3 lines worth) regardless of actual title length,
       so every card's image starts at the same vertical position
       rather than shifting depending on how many lines this
       particular title happens to wrap to. */
    min-height: calc(var(--text-lg) * 1.35 * 3);
}

/* ---- Vertical side tab ---- */
.bte-news__side-tab {
    position: absolute;
    right: 0;
    bottom: var(--space-10);
    z-index: 2;
    background-color: var(--bte-red);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5) var(--space-3);
}

.bte-news__side-tab span {
    font-family: var(--font-display);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bte-white);
    transform: rotate(180deg);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .bte-news__card     { opacity: 1; transform: none; }
    .bte-news__card-img { transition: none; }
    .bte-news__track    { transition: none; }
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
    .bte-news__inner {
        padding-right: calc(var(--gutter) + 44px);
    }
    .bte-news__side-tab {
        padding: var(--space-4) var(--space-2);
    }
    .bte-news__header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   MOBILE (phones) — 2026-07-21
   Let the blog carousel run off the right edge (was stopping short
   with a white gap because of the right padding reserved for the side
   tab). Drop the side tab and the right padding so a card bleeds off.
   ============================================================ */
@media (max-width: 767px) {
    .bte-news__side-tab { display: none; }
    .bte-news__inner { padding-right: 0 !important; }
    .bte-news__header { padding-right: var(--gutter); }
}


/* 2026-07-24 — News pins to the top of the screen on mobile, which put
   the heading behind the sticky header. Add header clearance on phones
   so "News & Insights" sits clear of it. */
@media (max-width: 767px) {
    .bte-news {
        padding-top: calc( var(--bte-header-h, 90px) + var(--space-6) );
    }
}