/*
 * Featured Read — center/featured-read
 * Single featured publication with cover image.
 * Uses section-block base for wrapper/inner.
 */

/* --- Box --- */

.featured-read__box {
    background-color: var(--color-neutral-warm-medium);
    padding: var(--space-8);
}

/* --- Heading --- */

.featured-read__heading {
    margin: 0;
    margin-block-end: var(--space-5);
    font-family: var(--font-serif);
    font-size: var(--text-5xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue-dark);
}

/* --- Layout --- */

.featured-read__layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.featured-read--has-cover {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

@media (min-width: 701px) {
    .featured-read--has-cover {
        grid-template-columns: 1fr 200px;
        gap: var(--space-12);
    }
}

/* --- Title --- */

.featured-read__title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-snug);
}

.featured-read__title a {
    color: var(--color-black);
    text-decoration-line: none;
}

.featured-read__title a:hover {
    text-decoration-line: underline;
}

/* --- Authors --- */

.featured-read__authors {
    margin: var(--space-2) 0 0;
    font-size: var(--text-medium);
    line-height: var(--leading-relaxed);
}

/* --- Outlet | Date --- */

.featured-read__meta {
    margin: var(--space-1) 0 0;
    font-size: var(--text-medium);
    line-height: var(--leading-relaxed);
}

.featured-read__author-link {
    color: var(--color-berkeley-blue);
    font-weight: var(--font-weight-semibold);
}

.featured-read__sep {
    display: inline-block;
    width: 1px;
    height: 0.9em;
    background-color: var(--color-neutral-warm-dark);
    margin-inline: var(--space-1);
    vertical-align: middle;
}

.featured-read__outlet {
    font-style: italic;
}

/* --- Description (InnerBlocks) --- */

.featured-read__desc {
    margin-block-start: var(--space-4);
}

.featured-read__desc > * {
    max-width: none;
}

/* --- CTA --- */

.featured-read__text .cta-link {
    margin-block-start: var(--space-5);
}

/* --- Cover image --- */

.featured-read__cover img {
    width: 100%;
    height: auto;
}

@media (min-width: 701px) {
    .featured-read__cover {
        align-self: start;
    }
}

/* --- Mobile: cover above text --- */

@media (max-width: 700px) {
    .featured-read--has-cover {
        display: flex;
        flex-direction: column-reverse;
    }

    .featured-read__cover {
        max-width: 200px;
    }
}