.banner {
    padding: 1rem 0 1rem 0;
    text-align: left;

    .content {
        max-width: 100%;
    }

    .title {
        margin-bottom: 0.7rem;
        font-size: clamp(1.7rem, 6vw, 2.1rem);
        line-height: 1.25;
        text-align: left !important;
    }

    .description {
        font-size: clamp(1rem, 3.5vw, 1.15rem);
        line-height: 1.65;
        color: #555;
        text-align: left !important;
    }
}

@media only screen and (min-width: 640px) {

    .banner {
        max-height: calc(100vh - var(--header-height) - var(--footer-height));
        padding: 2.2rem 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;

        .content {
            max-width: 44rem;
            margin: 0 auto;
        }

        .title {
            font-size: clamp(1.8rem, 3vw, 2.4rem);
            text-align: center !important;
        }

        .description {
            margin: 0 auto;
            max-width: 34rem;
            text-align: center !important;
        }
    }
}


/* Keyword intro text on category pages (written in the category's
   Description box). Sits between the banner and the template grid. */
.category-intro {
    max-width: 60rem;
    margin: 0 auto 1.5rem auto;
    text-align: left;

    p {
        font-size: var(--small-font-size);
        line-height: 1.75;
        color: var(--txt-faded);
        margin-bottom: 0.8rem;
    }

    h2,
    h3 {
        font-size: var(--medium-font-size);
        margin: 1.2rem 0 0.5rem 0;
    }

    a {
        color: var(--primary-color);
        text-decoration: underline;
    }
}

/* Collapsed by default — shows about 3 lines, then fades to white so it's
   clear there's more. Google still reads the full text either way; this
   only changes what a visitor sees until they choose to expand it. */
.category-intro-collapse {
    position: relative;
    max-height: 4.6rem;
    overflow: hidden;
    transition: max-height 0.3s ease;

    &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2.2rem;
        background: linear-gradient(to bottom, transparent, var(--bg-color, #fff));
        pointer-events: none;
    }
}

.category-intro-collapse.expanded {
    max-height: 60rem; /* effectively unlimited for this amount of text */

    &::after {
        display: none;
    }
}

.category-intro-toggle {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: var(--small-font-size);
    font-weight: 600;
    cursor: pointer;
}

.category-intro-toggle:hover {
    text-decoration: underline;
}