/*
======================
DM ADVICE: THE ARTICLES INDEX
======================

/articles on the main site's band vocabulary (bands.css). Purple carries it:
articles are the channel's. The server renders the hero's newest article,
the tag row and the first page of cards (server.js, "The DM Advice index");
js/articles.js re-renders the same markup for search, tags, sort and paging,
so the two have to agree on every class in here.

The single-article page keeps its own sheet, articles.css, and loads this
one after bands.css for the .advice-card its related-articles band is built
from. Every colour is a styles.css token, apart from the purple tint for
text on the dark hero (#b98cff, see bands.css) and the two greys the bands
use for secondary copy (#5a5670, #8a8599).
*/

/*
======================
HERO: THE NEWEST ARTICLE
======================
*/
.advice-hero {
    position: relative;
    padding: var(--spacing-lg) 0;
    background:
        radial-gradient(ellipse at 15% 0%, rgba(127, 14, 189, 0.5), transparent 55%),
        radial-gradient(ellipse at 90% 100%, rgba(11, 42, 169, 0.35), transparent 50%),
        linear-gradient(180deg, var(--night) 0%, var(--night-deep) 100%);
    color: var(--text-light);
    overflow: hidden;
}

.advice-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../assets/images/hero-bg.png") center / cover no-repeat;
    opacity: 0.16;
    mix-blend-mode: luminosity;
    pointer-events: none;
}

.advice-hero .container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--spacing-md) var(--spacing-lg);
    align-items: center;
}

.advice-hero h1 {
    margin: 0 0 var(--spacing-xs);
    font-family: var(--font-headers);
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--text-light);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.advice-hero-lead {
    max-width: 56ch;
    margin: 0 0 var(--spacing-sm);
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.2rem;
    line-height: 1.55;
}

.advice-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.advice-hero-meta .pill {
    padding: 0.35rem 0.85rem;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--font-headers);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.advice-hero-meta .pill i {
    color: #b98cff;
}

.advice-hero-meta .pill--link {
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease;
}

.advice-hero-meta .pill--link:hover,
.advice-hero-meta .pill--link:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-2px);
    color: var(--text-light);
}

/* The newest article, as a poster with its title over the image. */
.advice-hero-card {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
    background: linear-gradient(135deg, var(--primary-purple-dark), var(--primary-blue-dark));
    color: var(--text-light);
    text-decoration: none;
}

.advice-hero-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.advice-hero-card:hover img {
    transform: scale(1.03);
}

.advice-hero-card-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 2.5rem 1.4rem 1.3rem;
    background: linear-gradient(180deg, transparent, rgba(20, 9, 31, 0.92) 55%);
}

.advice-hero-card-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: var(--primary-purple);
    font-family: var(--font-headers);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.advice-hero-card .article-kicker {
    color: rgba(255, 255, 255, 0.72);
}

.advice-hero-card .article-kicker i {
    color: #b98cff;
}

.advice-hero-card strong {
    font-family: var(--font-headers);
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-light);
}

.advice-hero-card span.advice-hero-card-excerpt {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.98rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*
======================
THE ARCHIVE
======================
*/
.band--archive {
    background: var(--divine-light-white);
}

/* Toolbar: search on the left, sort and the count on the right. */
.advice-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-bottom: 0.9rem;
}

.advice-search {
    position: relative;
    flex: 1 1 280px;
    max-width: 440px;
}

.advice-search i {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-purple);
    pointer-events: none;
}

.advice-search input {
    width: 100%;
    height: 46px;
    padding: 0 1rem 0 2.5rem;
    border-radius: 999px;
    border: 1px solid rgba(127, 14, 189, 0.25);
    background: #fff;
    color: var(--text-dark);
    font-family: var(--font-body);
    font-size: 1.05rem;
    transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.advice-search input:focus {
    outline: none;
    border-color: var(--primary-purple);
    box-shadow: 0 0 0 3px rgba(127, 14, 189, 0.18);
}

.advice-search input::-webkit-search-cancel-button {
    cursor: pointer;
}

.advice-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.advice-sort label {
    font-family: var(--font-headers);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #5a5670;
}

.advice-sort select {
    height: 42px;
    padding: 0 2.2rem 0 1rem;
    border-radius: 999px;
    border: 1px solid rgba(127, 14, 189, 0.25);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%237F0EBD' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") no-repeat calc(100% - 14px) center;
    color: var(--text-dark);
    font-family: var(--font-body);
    font-size: 1rem;
    cursor: pointer;
    appearance: none;
}

.advice-sort select:focus {
    outline: none;
    border-color: var(--primary-purple);
    box-shadow: 0 0 0 3px rgba(127, 14, 189, 0.18);
}

.advice-count {
    flex-basis: 100%;
    margin: 0;
    font-family: var(--font-headers);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #8a8599;
}

.advice-count:empty {
    display: none;
}

/* Tags: one row of toggles, the active one filled. */
.advice-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: var(--spacing-md);
}

.advice-tags .tag {
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(127, 14, 189, 0.25);
    background: #fff;
    color: var(--primary-purple-dark);
    font-family: var(--font-headers);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, border-color var(--transition-speed) ease, transform var(--transition-speed) ease;
}

.advice-tags .tag:hover {
    border-color: var(--primary-purple);
    transform: translateY(-2px);
}

.advice-tags .tag.is-active {
    background: var(--primary-purple);
    border-color: var(--primary-purple);
    color: var(--text-light);
}

.advice-tags .tag:focus-visible {
    outline: 3px solid var(--primary-purple-light);
    outline-offset: 2px;
}

/* The long tail of tags, folded behind the "more" toggle. When open it is
   display: contents, so its buttons flow in the same row as the rest. */
.advice-tags .tag--more {
    border-style: dashed;
    color: #5a5670;
}

.advice-tags .tag--more i {
    margin-left: 0.3rem;
    font-size: 0.7rem;
}

.advice-tags-rest {
    display: contents;
}

.advice-tags-rest[hidden] {
    display: none;
}

/* The grid of cards. A card is one link. */
.advice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-sm);
}

.advice-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(127, 14, 189, 0.15);
    box-shadow: var(--shadow-sm);
    color: var(--text-dark);
    text-decoration: none;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

.advice-card:hover,
.advice-card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--primary-purple-light);
    box-shadow: var(--shadow-md);
    color: var(--text-dark);
}

.advice-card-image {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary-purple-dark), var(--primary-blue-dark));
}

.advice-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.advice-card:hover .advice-card-image img {
    transform: scale(1.04);
}

.advice-card-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: var(--primary-purple);
    color: var(--text-light);
    font-family: var(--font-headers);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.advice-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
    padding: 1rem 1.2rem 1.2rem;
}

.advice-card h3 {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.3;
    color: var(--text-dark);
}

.advice-card p {
    margin: 0;
    color: #5a5670;
    font-size: 0.98rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.advice-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.25rem;
}

.advice-card-tags .pill {
    background: rgba(127, 14, 189, 0.08);
    color: var(--primary-purple-dark);
    font-size: 0.74rem;
}

.advice-card-read {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.5rem;
    font-family: var(--font-headers);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-purple);
}

.advice-card-read i {
    transition: transform var(--transition-speed) ease;
}

.advice-card:hover .advice-card-read i {
    transform: translateX(3px);
}

/* Nothing matched, or nothing published yet. */
.advice-empty {
    grid-column: 1 / -1;
    padding: var(--spacing-md);
    text-align: center;
    color: #5a5670;
    background: #fff;
    border: 1px dashed rgba(51, 51, 51, 0.2);
    border-radius: var(--border-radius);
}

.advice-empty h3 {
    margin: 0 0 0.35rem;
    font-size: 1.2rem;
    color: var(--text-dark);
}

.advice-empty p {
    margin: 0 0 0.75rem;
}

.advice-empty button {
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--primary-purple);
    background: #fff;
    color: var(--primary-purple);
    font-family: var(--font-headers);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

.advice-empty button:hover {
    background: var(--primary-purple);
    color: var(--text-light);
}

/* Pages. */
.advice-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin-top: var(--spacing-md);
}

.advice-pagination:empty {
    display: none;
}

.page-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(127, 14, 189, 0.25);
    background: #fff;
    color: var(--text-dark);
    font-family: var(--font-headers);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

.page-btn:hover:not(:disabled):not(.is-active) {
    border-color: var(--primary-purple);
    color: var(--primary-purple);
}

.page-btn.is-active {
    background: var(--primary-purple);
    border-color: var(--primary-purple);
    color: var(--text-light);
    cursor: default;
}

.page-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.page-gap {
    color: #8a8599;
    padding: 0 0.25rem;
}

/*
======================
RESPONSIVE
======================
*/
@media (max-width: 992px) {
    .advice-hero .container {
        grid-template-columns: 1fr;
    }

    .advice-hero-card {
        max-width: 640px;
    }

    .advice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .advice-hero {
        padding: var(--spacing-md) 0;
    }

    .advice-hero h1 {
        font-size: 2.1rem;
    }

    .advice-hero-lead {
        font-size: 1.05rem;
    }

    .advice-search {
        flex-basis: 100%;
        max-width: none;
    }

    .advice-sort {
        margin-left: 0;
        width: 100%;
    }

    .advice-sort select {
        flex: 1;
    }

    .advice-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .advice-hero-card img,
    .advice-card,
    .advice-card-image img,
    .advice-card-read i,
    .advice-tags .tag,
    .advice-hero-meta .pill--link {
        transition: none;
    }
}