/*
 * news.css — styles for news.html (What's News / press coverage).
 *
 * Loaded after styles.css. Everything here is namespaced under .pressSection,
 * .pressCard or .roundupWrap so nothing can leak into the homepage. The shared
 * styles.css is deliberately not modified.
 *
 * Palette taken from styles.css:
 *   #EF4E92 pink   #E2068A pink dark   #6ECBDA aqua
 *   #353030 text   #FDF8F4 page cream  #FFE9F0 pink tint
 */

/* ---------------------------------------------------------------- hero
 *
 * The shared .heroSection is height:100dvh. That works on the homepage,
 * where the hero IS the landing experience, but on a press page it left
 * the headline stranded mid-screen and pushed every card below the fold.
 *
 * This page gets a shorter hero, and the cards are pulled up over the
 * bottom of it so coverage is visible immediately.
 *
 * To swap the carousel for a single static asset later: delete the two
 * .heroImage blocks from news.html and give .newsHero a background-image.
 * Nothing else here depends on the carousel.
 */
.heroSection.newsHero {
    height: 56vh;
    min-height: 400px;
    max-height: 580px;
}

/* Fade the foot of the hero into the page colour so the overlapping cards
   read as deliberate rather than as a seam. */
.heroSection.newsHero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45%;
    background: linear-gradient(to bottom, rgba(253, 248, 244, 0) 0%, rgba(253, 248, 244, 0.75) 100%);
    z-index: 10;
    pointer-events: none;
}

/* The dots sit at bottom:60px with z-index:100, which puts them on top of
   the cards that overlap the foot of the hero. Lift them clear of the
   overlap. Selector depth matches the site rule so it actually wins. */
.heroSection.newsHero .heroImage .owl-carousel .owl-dots {
    bottom: 175px;
}

/* One headline instead of the homepage's headline + subhead + paragraph
   + wordmark. */
.heroSection.newsHero .heroTextCont .heroTextWrap h1 {
    margin-bottom: 0;
}

/* --------------------------------------------------------------- cards */

.pressSection {
    width: 100%;
    padding: 80px 112px 100px;
    position: relative;
}

/* Pull the cards up over the foot of the hero. The background stays clear
   for the overlap, then resolves to the page colour underneath.
 *
 * z-index is load-bearing: .heroTextCont carries z-index:20 and the scrim
 * above carries 10, and because .heroSection is not itself a stacking
 * context those land in the root one. Without a higher z-index here the
 * hero paints straight over the first card's headline. */
.newsHero + .pressSection {
    margin-top: -130px;
    padding-top: 0;
    position: relative;
    z-index: 30;
    background: linear-gradient(to bottom,
            rgba(253, 248, 244, 0) 0px,
            rgba(253, 248, 244, 0) 130px,
            #FDF8F4 300px,
            #FDF8F4 100%);
}

.pressSection .topLink {
    position: absolute;
    top: -120px;
    left: 0;
}

.pressSection .pressContainer {
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
}

.pressSection .textContainer {
    max-width: 860px;
    margin: 30px auto 0;
}

.pressSection .textContainer p {
    color: #353030;
    line-height: 1.65;
}

.pressSection .pressStat {
    margin-top: 18px;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(53, 48, 48, 0.55);
}

/* ------------------------------------------------------------------ grid */

/* Stacked rows, not a grid. An accordion inside a multi-column grid makes
   the whole row jump when one card expands. A single column keeps every
   headline scannable and expansion local. */
.pressWrapper {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 55px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* ------------------------------------------------------------------ card */

.pressCard {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(53, 48, 48, 0.07);
    transition: box-shadow 0.25s, transform 0.25s;
    overflow: hidden;
}

.pressCard:hover {
    box-shadow: 0 12px 30px rgba(226, 6, 138, 0.13);
}

.pressCard[open] {
    box-shadow: 0 14px 34px rgba(226, 6, 138, 0.15);
}

/* ------------------------------------------------------- collapsed head */

.pressCard .pressHead {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "meta chevron"
        "title chevron"
        "featuring chevron";
    align-items: center;
    gap: 6px 20px;
    padding: 22px 28px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

/* Hide the default disclosure triangle in both engines. */
.pressCard .pressHead::-webkit-details-marker {
    display: none;
}

.pressCard .pressHead::marker {
    content: "";
}

.pressCard .pressHead:hover h3 {
    color: #E2068A;
}

.pressCard .pressChevron {
    grid-area: chevron;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #FFE9F0;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.25s, background-color 0.2s;
}

.pressCard .pressChevron::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -6px 0 0 -4px;
    border-right: 2px solid #E2068A;
    border-bottom: 2px solid #E2068A;
    transform: rotate(45deg);
}

.pressCard[open] .pressChevron {
    transform: rotate(180deg);
    background-color: #EF4E92;
}

.pressCard[open] .pressChevron::before {
    border-color: #fff;
}

/* ----------------------------------------------------- expanded body */

.pressCard .pressBody {
    padding: 0 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pressCard .pressMeta {
    grid-area: meta;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.pressCard .pressKind {
    background-color: #EF4E92;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 999px;
}

.pressCard .pressMeta time {
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(53, 48, 48, 0.55);
}

.pressCard h3 {
    grid-area: title;
    font-size: 21px;
    line-height: 1.3;
    color: #353030;
    font-weight: 900;
    margin: 0;
    transition: color 0.2s;
}

.pressCard .pressFeaturing {
    grid-area: featuring;
    display: block;
    font-size: 15px;
    font-weight: 900;
    color: #6ECBDA;
    margin: 0;
}

.pressCard .pressSummary {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(53, 48, 48, 0.85);
    margin: 0;
}

.pressCard .pressQuote {
    margin: 4px 0;
    padding: 4px 0 4px 18px;
    border-left: 3px solid #FFE9F0;
}

.pressCard .pressQuote p {
    font-style: italic;
    font-size: 16px;
    line-height: 1.55;
    color: #353030;
    margin: 0 0 8px;
}

.pressCard .pressQuote cite {
    font-style: normal;
    font-size: 14px;
    color: rgba(53, 48, 48, 0.6);
}

/* ---------------------------------------------------------- outlet links */

.pressCard .pressCoverage {
    padding-top: 18px;
    border-top: 1px solid rgba(53, 48, 48, 0.08);
}

.pressCard .pressCoverageLabel {
    display: block;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(53, 48, 48, 0.5);
    margin-bottom: 12px;
}

.pressCard .pressLinks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pressCard .pressLinks a {
    display: inline-block;
    padding: 7px 16px;
    border: 1px solid #F49FD2;
    border-radius: 999px;
    font-size: 14px;
    color: #E2068A;
    text-decoration: none;
    transition: all 0.2s;
}

.pressCard .pressLinks a:hover {
    background-color: #EF4E92;
    border-color: #EF4E92;
    color: #fff;
}

/* ------------------------------------------------------------- roundups */

.roundupWrap {
    margin-top: 60px;
    background-color: #fff;
    border-radius: 10px;
    padding: 34px 30px;
}

.roundupWrap h4 {
    font-size: 18px;
    font-weight: 900;
    color: #353030;
    margin: 0 0 6px;
}

.roundupWrap .roundupNote {
    font-size: 15px;
    color: rgba(53, 48, 48, 0.6);
    margin: 0 0 22px;
}

.roundupWrap ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.roundupWrap li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 20px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(53, 48, 48, 0.07);
}

.roundupWrap li:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.roundupWrap .roundupTitle {
    font-weight: 900;
    color: #353030;
}

.roundupWrap .roundupLinks {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.roundupWrap .roundupLinks a {
    font-size: 14px;
    color: #E2068A;
    text-decoration: none;
    border-bottom: 1px solid #F49FD2;
}

.roundupWrap .roundupLinks a:hover {
    color: #EF4E92;
}

@media (max-width: 1199px) {
    .pressSection {
        padding: 60px 40px 80px;
    }
}

@media (max-width: 767px) {
    .pressSection {
        padding: 40px 20px 70px;
    }

    .newsHero + .pressSection {
        margin-top: -70px;
        background: linear-gradient(to bottom,
                rgba(253, 248, 244, 0) 0px,
                rgba(253, 248, 244, 0) 70px,
                #FDF8F4 200px,
                #FDF8F4 100%);
    }

    .heroSection.newsHero .heroImage .owl-carousel .owl-dots {
        bottom: 100px;
    }

    .pressCard .pressHead {
        padding: 18px 20px;
        gap: 6px 14px;
    }

    .pressCard .pressBody {
        padding: 0 20px 22px;
    }

    .pressCard h3 {
        font-size: 18px;
    }

    .pressCard .pressChevron {
        width: 26px;
        height: 26px;
    }
}