/*
 * Block: gep/video-feature
 * Author: Greta Eline Poclen
 *
 * Layout only. The video frame itself (aspect ratio, facade, mute button)
 * is styled by gep/video's stylesheet, which the render template enqueues
 * alongside this one. Nothing here duplicates those rules.
 */

/* ─── Shell ──────────────────────────────────────────────────────────────── */

.waf-vfeature {
    margin-block: 0rem;
    /* Keep content clear of the background edges. */
    padding-block: clamp(2rem, 4vw, 4rem);

    /*
     * Headline metrics as variables, so the float offset in the wrap
     * layout can be computed from the real type size instead of a
     * guessed pixel value. Change them here and the offset follows.
     */
    --waf-vf-title-size: clamp(2.25rem, 6.9vw, 6rem);
    --waf-vf-title-lh: 1.02;

    /*
     * How many headline lines run full width above the video in the wrap
     * layout. Set per block from the ACF field; this is only the
     * fallback for a block saved before that field existed.
     */
    --waf-vf-lines-above: 1;

    /* Height of the full width area above the video, in headline lines. */
    --waf-vf-offset: calc(
        var(--waf-vf-title-size) * var(--waf-vf-title-lh) * var(--waf-vf-lines-above, 1)
    );
}

/* No top margin when the block opens the page, right under the hero. */
.waf-vfeature:first-child {
    margin-block-start: 0;
}
/*
 * Headline size per heading level. The variable has to be set here on the
 * section, not on the heading itself: the float offset is computed from
 * it, so the two must come from the same place or the video lands inside
 * the first line again.
 */
.waf-vfeature:has(h1.waf-vfeature__title) { --waf-vf-title-size: clamp(2.25rem, 6.9vw, 6rem); }
.waf-vfeature:has(h2.waf-vfeature__title) { --waf-vf-title-size: clamp(2rem, 5.15vw, 4.5rem); }
.waf-vfeature:has(h3.waf-vfeature__title) { --waf-vf-title-size: clamp(1.75rem, 4vw, 3.5rem); }

/*
 * The block had its own container metrics, which did not line up with the
 * theme's .container: the block sat about 110px inside the site gutter on
 * each side. These are the theme's own values, so the block aligns with
 * the header, the footer and every other section.
 */
.waf-vfeature__inner {
    width: 100%;
    max-width: 2000px;
    margin-inline: auto;
    padding-inline: 3%;
}

/* Fix (Greta Eline Poclen): removed the ".container .waf-vfeature__inner" reset that used to zero out this padding when a template already wrapped the block in .container. Now that .waf-vfeature always carries "egloo-block" (see video-feature.php) and breaks out to full width, that reset left the headline touching the viewport edge on every page; the block keeps its own padding-inline above in all cases. */

/* ─── Typography ─────────────────────────────────────────────────────────── */

/*
 * Two class selectors on purpose. The theme stylesheet loads after this
 * block's, so a single-class rule would lose to any heading rule of equal
 * specificity in the theme. The float offset further down is computed
 * from these exact metrics, so they have to be the ones that apply: if
 * the theme wins, the video lands inside the first line and shortens it.
 */
.waf-vfeature .waf-vfeature__title {
    font-size: var(--waf-vf-title-size);
    line-height: var(--waf-vf-title-lh);
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 1.5rem;
    /* Prevents a very long word from forcing a horizontal scroll when the
       text column gets narrow next to the video. */
    overflow-wrap: break-word;
}

.waf-vfeature__body {
    font-size: 1rem;
    line-height: 1.6;
    /*
     * No reading-width cap here on purpose. In the wrap and side layouts
     * the float or the grid column already sets the measure, and a cap
     * would narrow the text a second time, leaving a gap between the text
     * and the video. The cap is applied further down only where the text
     * really does run the full container width.
     */
    /*
     * A line box next to a float is shortened, but a string with no break
     * opportunity (a long URL, a run-on test string) overflows it anyway
     * and draws over the video. These two give the browser somewhere to
     * break.
     */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.waf-vfeature__body p:last-child {
    margin-bottom: 0;
}

.waf-vfeature__cta {
    display: inline-block;
    margin-top: 1.75rem;
    /* Padding compensates for the 2px border, so the pill keeps the same
       outer size as a filled button of the same class. */
    padding: calc(.75rem - 2px) calc(2rem - 2px);
    border: 2px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .2s ease;
}

/* Keep the outline transparent and turn text and border red on hover. */
.waf-vfeature__cta:hover {
    background: transparent;
    color: var(--waf-red, #e4002b);
}

.waf-vfeature__cta:focus-visible {
    outline: 2px solid var(--waf-video-accent, #008fdb);
    outline-offset: 3px;
}

/* ─── Layout: wrap ───────────────────────────────────────────────────────── */

/*
 * The text flows around the video. flow-root contains the float so it
 * cannot spill into whatever follows the block.
 *
 * Where the headline breaks is up to the browser: that is what a float
 * does, and no amount of CSS here changes it. --waf-vfeature-media-width
 * is the one knob that shifts those break points.
 */
.waf-vfeature--wrap .waf-vfeature__inner {
    display: flow-root;
}

.waf-vfeature--wrap .waf-vfeature__media {
    width: var(--waf-vfeature-media-width, 55%);
    margin-block: 0 1.5rem;

    /*
     * How far down the video starts, in headline lines.
     *
     * This is NOT done with margin-top. A float pushes text away with its
     * margin box, so a top margin moves the video down while the exclusion
     * area still starts at the top of the container: every line stays
     * short and the result is just two columns.
     *
     * Instead the offset is padding, so the float box still starts at the
     * top, and shape-outside carves that padding out of the exclusion
     * area. Lines above it run the full width, lines below wrap beside
     * the video. The reference box for shape-outside is the margin box,
     * so the side margin below still spaces the text off the video.
     */
    padding-top: var(--waf-vf-offset);
    shape-outside: inset(var(--waf-vf-offset) 0 0 0);
}

.waf-vfeature--wrap.waf-vfeature--right .waf-vfeature__media {
    float: right;
    margin-inline: 2.5rem 0;
}

.waf-vfeature--wrap.waf-vfeature--left .waf-vfeature__media {
    float: left;
    margin-inline: 0 2.5rem;
}

/* ─── Layout: side ───────────────────────────────────────────────────────── */

/*
 * Two real columns. Explicit placement rather than source order, so the
 * media can stay first in the DOM for the wrap layout's sake.
 */
.waf-vfeature--side .waf-vfeature__inner {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

.waf-vfeature--side.waf-vfeature--right .waf-vfeature__inner {
    grid-template-columns: 1fr var(--waf-vfeature-media-width, 55%);
}

.waf-vfeature--side.waf-vfeature--left .waf-vfeature__inner {
    grid-template-columns: var(--waf-vfeature-media-width, 55%) 1fr;
}

/* Explicit placement, so the media can stay first in the DOM for the
   wrap layout's sake while sitting on either side here. */
.waf-vfeature--side .waf-vfeature__text,
.waf-vfeature--side .waf-vfeature__media {
    grid-row: 1;
    /* Lets a column shrink below the intrinsic width of a long headline. */
    min-width: 0;
}

.waf-vfeature--side.waf-vfeature--right .waf-vfeature__text { grid-column: 1; }
.waf-vfeature--side.waf-vfeature--right .waf-vfeature__media { grid-column: 2; }

.waf-vfeature--side.waf-vfeature--left .waf-vfeature__text { grid-column: 2; }
.waf-vfeature--side.waf-vfeature--left .waf-vfeature__media { grid-column: 1; }

/* ─── Layout: stack ──────────────────────────────────────────────────────── */

.waf-vfeature--stack .waf-vfeature__inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.waf-vfeature--stack .waf-vfeature__text {
    order: 1;
}

/* Full width text: without a cap the lines get too long to read. */
.waf-vfeature--stack .waf-vfeature__body {
    max-width: 70ch;
}

.waf-vfeature--stack .waf-vfeature__media {
    order: 2;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

/*
 * Below the breakpoint all three layouts become the same: headline first,
 * video full width underneath. Decided here once, not left to whatever
 * the parent container does.
 */
@media (max-width: 990px) {
    .waf-vfeature {
        margin-block: 1rem;
    }

    .waf-vfeature .waf-vfeature__title {
        margin-bottom: 1rem;
    }

    .waf-vfeature__inner,
    .waf-vfeature--wrap .waf-vfeature__inner,
    .waf-vfeature--side .waf-vfeature__inner,
    .waf-vfeature--stack .waf-vfeature__inner {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .waf-vfeature__text {
        order: 1;
    }

    .waf-vfeature__body {
        max-width: 70ch;
    }

    /*
     * The theme's container switches from 3% to a flat 24px gutter below
     * this breakpoint (measured live at 485px and 732px viewports), so
     * the block's own container has to match it, and the video's breakout
     * is a flat -24px rather than a percentage.
     */
    .waf-vfeature__inner {
        padding-inline: 24px;
    }

    /*
     * Three class selectors, not two. The desktop float rules are
     * .waf-vfeature--wrap.waf-vfeature--right .waf-vfeature__media, which
     * is three classes deep, and specificity beats media query order: a
     * shorter selector here simply never applies, leaving the video with
     * its desktop width and a 40px left margin. That stray margin was the
     * whole bug.
     */
    .waf-vfeature--wrap.waf-vfeature--left .waf-vfeature__media,
    .waf-vfeature--wrap.waf-vfeature--right .waf-vfeature__media,
    .waf-vfeature--side .waf-vfeature__media,
    .waf-vfeature--stack .waf-vfeature__media {
        order: 2;
        /* The float is gone, so its offset and wrap contour go with it. */
        float: none;
        padding-top: 0;
        shape-outside: none;

        /*
         * Full bleed, edge to edge: cancel the 24px gutter on both sides.
         * Not 100vw, because viewport units include the scrollbar width
         * and the video would sit ~8px off centre with a horizontal
         * scrollbar of its own. Verified live: 0 to 732px against a
         * client width of 732px, no overflow.
         */
        width: auto;
        max-width: none;
        margin-inline: -24px;
        margin-block: 0;
    }

    /* The caption follows the video out, so pull it back into the text column. */
    .waf-vfeature--full .waf-vfeature__caption {
        padding-inline: 0;
    }
}