/* Hero Post block */

.block-hero-post {
    --hero-post-gap: 20px;
    /* Portrait on mobile, wide once there is room */
    --hero-post-ratio: 4 / 5;

    /* Both beat ":root :where(.is-layout-constrained) > *" in style.css */
    margin-bottom: 0 !important;
    margin-top: clamp(140px, 9.1vw + 60px, 240px) !important;
}

.block-hero-post__inner {
    display: flex;
    flex-direction: column;
    gap: var(--hero-post-gap);
    align-items: center;
}

/* Image and intro read as one panel */
.block-hero-post__image + .block-hero-post__intro-wrap,
.block-hero-post__inner > .block-hero-post__image + * {
    margin-top: calc(var(--hero-post-gap) * -1);
}

.block-hero-post__title {
    margin: 0;
    text-align: center;
    text-wrap: balance;
    max-width: 60rem;
    font-size: var(--wp--preset--font-size--xx-large);
}

/* Image, with the same fallback treatment as the post cards */

.block-hero-post__image {
    position: relative;
    aspect-ratio: var(--hero-post-ratio);
    border-radius: var(--radius-06) var(--radius-06) 0 0;
    overflow: hidden;
    width: 100%;
    margin-top: 40px;
}

/* No featured image: the placeholder panel sits straight under the title */
.no-post-thumbnail .block-hero-post__image,
.block-hero-post__image--placeholder {
    margin-top: 0;
}

.block-hero-post__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* No featured image: the colour block holds the icon and the title */

.block-hero-post__image--placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: var(--hero-post-gap);
}

.block-hero-post__image--placeholder .placeholder-icon {
    position: static;
    transform: none;
}

.block-hero-post__image--placeholder .block-hero-post__title {
    color: inherit;
}

/* Label under the title, used when there is a featured image */

.block-hero-post__label {
    margin: 0;
    text-align: center;
    color: var(--wp--preset--color--warm-grijs-03);
}

/* Category label, centred on the bottom of the placeholder like the post cards */

.block-hero-post__badge {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    color: var(--wp--preset--color--helder-blauw-licht);
}

/* Without a featured image the colour block stacks its contents, so the badge
   joins that stack instead of hanging off the bottom edge. */
.no-post-thumbnail .block-hero-post__image p.card-label {
    position: relative;
    left: 0;
    transform: none;
    margin-top: 20px;
}

/* Intro */

.block-hero-post__intro-wrap {
    width: 100%;
    padding: var(--wp--preset--spacing--60) var(--hero-post-gap) 0;
    border-radius: 0 0 var(--radius-06) var(--radius-06);
    background-color: var(--wp--preset--color--white);
}

.block-hero-post__intro {
    margin: 0;
    max-width: var(--wp--style--global--content-size);
    margin-inline: auto;
    text-align: left;
    text-wrap: pretty;
}

/* Desktop */

@media (min-width: 782px) {
    .block-hero-post {
        --hero-post-ratio: 16 / 9;
    }
}