/**
 * Single post hero: this site's own article header, on top of the base
 * theme's post body (css/article.css, css/blocks/post-header.css).
 * patterns/post-body.php, the content of the GP element "Single post
 * template" (271).
 *
 * Structure:
 *   .single-post-hero.hero-block.wrapper-alternate-color   (falling-images.css adds the layer)
 *     inner > .hero-txt-container            --article-width, left aligned from 768px
 *       .single-post-hero-meta-cnt           category (dynamic terms) + "Julkaistu" + date
 *       h1.single-post-hero-title
 *   .post-lead-section.color-section
 *     p.single-post-excerpt                  the excerpt, --article-width
 *     figure > img.single-post-featured-image   featured image, --article-wide-width
 *   then .post-body-section (post-header.css): table of contents and the column.
 *
 * The markup still carries the old page hero's hero-block class; nothing
 * styles it any more (page heroes are the base theme's cover since 8.10.2026).
 */

/* Hero layout and type, moved here from the old hero-block.css. :where()
   keeps that file's specificity, so GB's own font size on the date labels
   still wins as before. */
.single-post-hero {
    position: relative;
    display: flex;
    align-items: center;
}

:where(.single-post-hero) .hero-txt-container {
    z-index: 2;
    padding: 100px 0;
    text-align: center;
}

:where(.single-post-hero) .hero-label {
    margin-bottom: 0;
    font-size: 1.1em;
}

:where(.single-post-hero) .hero-title {
    margin-bottom: 10px;
    font-size: 30px;
}

.single-post-hero-meta-cnt {
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 10px;
    gap: 5px;
    margin-bottom: 10px;
}

.single-post-hero-meta-terms a {
    font-size: 10px;
}

.single-post-hero-meta-cnt time {
    margin-left: 3px;
}

.single-post-hero .read-more {
    display: none;
}

/* Lead and featured image between the hero and the body */
.gb-container.color-section.post-lead-section {
    padding-top: calc(var(--default-margin-top) / 2);
    padding-bottom: 0;
}

.single-post-excerpt {
    max-width: var(--article-width);
    margin: 0 auto;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.55;
    text-wrap: pretty;
}

/* GB puts the global class on the img of a dynamic image, so the figure is
   found through it. The featured images are drawings on a white ground, not
   photos, so the image keeps its own ratio under a height cap instead of
   filling a box (a cover crop would cut a tall drawing). */
figure:has(> img.single-post-featured-image) {
    max-width: var(--article-wide-width);
    margin: calc(var(--default-margin-top) / 2) auto 0;
}

img.single-post-featured-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
}

figure:has(> img.single-post-featured-image) figcaption {
    margin: 0.75em 0 0;
    font-size: 0.8em;
    line-height: 1.4;
    text-align: center;
    opacity: 0.75;
}

figure:has(> img.single-post-featured-image) figcaption:empty {
    display: none;
}

@media only screen and (min-width: 768px) {
    .single-post-hero .hero-txt-container {
        max-width: var(--article-width);
        margin: 0 auto;
        text-align: left;
    }

    .single-post-hero-meta-cnt {
        flex-direction: row;
        gap: 10px;
        justify-content: flex-start;
        font-size: 14px;
    }

    .single-post-hero-meta-terms a {
        font-size: 14px;
    }

    .single-post-hero .gb-headline {
        width: auto;
    }

    :where(.single-post-hero) .hero-title {
        font-size: 40px;
    }
}

@media only screen and (min-width: 1280px) {
    :where(.single-post-hero) .hero-title {
        font-size: 50px;
        line-height: 1.1em;
    }
}