/*
 * Featured article (featured/readme.md): the wide card that leads the
 * homepage's news column, from Colleen Abel's mockup of 2026-11-10.
 *
 * Its look is the homepage cards' own (src/sass/posts/_cards.scss): Poppins,
 * square corners, the 1.5px black frame of `.single_card`, black text and the
 * cards' date. The picture is as wide as one column of the grid below it, so
 * its edge lines up with the first card's. Plain CSS, no build step, like the
 * boards and the mega menu.
 *
 * It sits inside `.section`, which is a size container, so `cqi` below is a
 * hundredth of the news column's width.
 */

.sb-featured {
    --sbf-gold: #EDBD1D;
    --sbf-black: #000000;
    --sbf-white: #FFFFFF;
    --sbf-font: 'Poppins', Arial, sans-serif;
    /* `.section__grid`'s columns and gap at each width, for the picture's width. */
    --sbf-columns: 3;
    --sbf-gap: 30px;
    /* Hover and keyboard focus (below) set these to 1 and white; each part reads them. */
    --sbf-on: 0;
    --sbf-ink: var(--sbf-black);

    position: relative;
    display: grid;
    grid-template-columns: calc((100% - (var(--sbf-columns) - 1) * var(--sbf-gap)) / var(--sbf-columns)) minmax(0, 1fr);
    margin: 0 0 var(--sbf-gap);
    /* `.single_card`'s black shows only in its 1.5px padding (the frame), not as a hairline where the halves meet. */
    background: linear-gradient(var(--sbf-white), var(--sbf-white)) content-box, var(--sbf-black);
    font-family: var(--sbf-font);
}

/* The picture --------------------------------------------------------------- */

.sb-featured__media {
    position: relative;
    min-height: 300px;
    overflow: hidden;
    background-color: var(--sbf-white);
}

.sb-featured__media .sb-featured__img {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: scale(calc(1 + var(--sbf-on) * .04));
    transition: transform .4s ease-in-out;
}

/* No picture: the site logo, as on the grid's cards. */
.sb-featured__media--logo .sb-featured__img {
    inset: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    object-fit: contain;
}

/* The words ----------------------------------------------------------------- */

.sb-featured__body {
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    gap: 25px;
    min-width: 0;
    padding: 30px 30px 25px;
    /* On hover a black panel rises from the bottom, the grid cards' own hover (`.card__hover`). */
    background-color: var(--sbf-white);
    background-image: linear-gradient(var(--sbf-black), var(--sbf-black));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% calc(var(--sbf-on) * 100%);
    color: var(--sbf-ink);
    transition: background-size .5s ease-in-out;
}

/*
 * The words turn white as the panel reaches them: on the way up the date
 * first and the title last, on the way down the reverse.
 */
.sb-featured .sb-featured__title {
    margin: 0;
    color: var(--sbf-ink);
    font-family: var(--sbf-font);
    font-size: 36px;
    font-size: clamp(24px, 4.1cqi, 38px);
    font-weight: 600;
    line-height: 1.12;
    overflow-wrap: break-word;
    transition: color .3s ease-in-out calc(var(--sbf-on) * .2s);
}

.sb-featured .sb-featured__link,
.sb-featured .sb-featured__link:hover,
.sb-featured .sb-featured__link:focus {
    color: inherit;
    text-decoration: none;
    /* The theme fades every link over .25s; this one follows the title's colour and timing instead. */
    transition: none;
}

/* The title's link covers the whole card, so a click anywhere opens the article. */
.sb-featured__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.sb-featured .sb-featured__excerpt {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--sbf-ink);
    font-size: 17px;
    font-size: clamp(15px, 1.95cqi, 17px);
    font-weight: 400;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    transition: color .3s ease-in-out .1s;
}

/* The date, and the grid cards' gold "Read More >", which shows on hover. */
.sb-featured__foot {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px 20px;
    align-self: stretch;
    margin-top: auto;
}

.sb-featured .sb-featured__date {
    margin: 0;
    color: var(--sbf-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    transition: color .3s ease-in-out calc((1 - var(--sbf-on)) * .2s);
}

.sb-featured__cta {
    color: var(--sbf-gold);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    opacity: var(--sbf-on);
    transform: translateX(calc((1 - var(--sbf-on)) * -8px));
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
    transition-delay: calc(var(--sbf-on) * .2s);
}

.sb-featured__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Hover and keyboard focus ---------------------------------------------------- */

/* Mouse only, so a tap on a phone doesn't leave the card dark when you come back. */
@media (hover: hover) {
    .sb-featured:hover {
        --sbf-on: 1;
        --sbf-ink: var(--sbf-white);
    }
}

.sb-featured:has(.sb-featured__link:focus-visible) {
    --sbf-on: 1;
    --sbf-ink: var(--sbf-white);
}

.sb-featured .sb-featured__link:focus-visible {
    outline: none;
}

.sb-featured .sb-featured__link:focus-visible::after {
    outline: 3px solid var(--sbf-gold);
    outline-offset: 3px;
}

/* No movement: the panel and the words change at once, and the picture holds still. */
@media (prefers-reduced-motion: reduce) {
    .sb-featured__body,
    .sb-featured .sb-featured__title,
    .sb-featured .sb-featured__excerpt,
    .sb-featured .sb-featured__date,
    .sb-featured__cta,
    .sb-featured__media .sb-featured__img {
        transition: none;
    }

    .sb-featured__media .sb-featured__img,
    .sb-featured__cta {
        transform: none;
    }
}

/* Narrower screens ---------------------------------------------------------- */

/* Two columns in the grid below, so the picture takes half. */
@media screen and (max-width: 1024px) {
    .sb-featured {
        --sbf-columns: 2;
        --sbf-gap: 25px;
    }

    .sb-featured__body {
        gap: 20px;
        padding: 25px 25px 20px;
    }

    .sb-featured .sb-featured__title {
        font-size: clamp(24px, 3.3cqi, 34px);
    }
}

/* Phones: one column, the picture on top at the cards' 16:9. */
@media screen and (max-width: 575px) {
    .sb-featured {
        --sbf-gap: 20px;

        grid-template-columns: minmax(0, 1fr);
    }

    .sb-featured__media {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .sb-featured__body {
        gap: 15px;
        padding: 20px;
    }

    .sb-featured .sb-featured__title {
        font-size: 24px;
    }

    .sb-featured .sb-featured__excerpt {
        font-size: 15px;
    }
}