/* ============================================================
   Featured Media Block — Frontend Styles
   File: blocks/featured-media/style.css
   ============================================================ */

/* ── Container ─────────────────────────────────────────────── */
.featured-media-block {
    position   : relative;
    width      : 100%;
    overflow   : hidden;
    background : #000;
    line-height: 0; /* kill phantom gap below img */
}

/* Intrinsic-ratio wrapper keeps the aspect ratio without JS */
.featured-media-block__wrapper {
    position   : relative;
    width      : 100%;
    height     : 0;          /* height comes from padding-top (set inline) */
    overflow   : hidden;
}

/* ── Shared child positioning ──────────────────────────────── */
.featured-media-block__iframe,
.featured-media-block__image {
    position : absolute;
    inset    : 0;            /* top/right/bottom/left = 0 */
    width    : 100%;
    height   : 100%;
}

/* ── Featured Image ─────────────────────────────────────────── */
.featured-media-block__image {
    object-fit      : cover;
    object-position : center center;
    display         : block;
}

/* ── YouTube iframe ─────────────────────────────────────────── */
.featured-media-block__iframe {
    border : none;
}

/* ── Placeholder (no image / no video ID set) ───────────────── */
.featured-media-block__placeholder {
    position        : absolute;
    inset           : 0;
    display         : flex;
    align-items     : center;
    justify-content : center;
    background      : #1a1a1a;
    color           : #888;
    font-size       : 0.9rem;
    font-family     : system-ui, sans-serif;
    line-height     : 1.4;
}

/* ── Text Overlay ───────────────────────────────────────────── */
.featured-media-block__overlay {
    position        : absolute;
    inset           : 0;
    display         : flex;
    align-items     : flex-end;
    padding         : 2rem;
    background      : linear-gradient(
        to top,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.24) 50%,
        transparent 100%
    );
    pointer-events  : none;   /* lets clicks pass through to video controls */
}

.featured-media-block__overlay p {
    margin      : 0;
    color       : #fff;
    font-size   : clamp(1.1rem, 2.5vw, 1.8rem);
    font-weight : 600;
    line-height : 1.3;
    text-shadow : 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ── Alignment variants (Gutenberg align support) ───────────── */
.featured-media-block.alignwide {
    margin-left  : calc(-1 * var(--wp--style--root--padding-left, 2rem));
    margin-right : calc(-1 * var(--wp--style--root--padding-right, 2rem));
    width        : auto;
}

.featured-media-block.alignfull {
    margin-left  : calc(50% - 50vw);
    margin-right : calc(50% - 50vw);
    width        : 100vw;
    max-width    : 100vw;
}

/* ── Responsive: small screens get slightly taller ratio ─────── */
@media ( max-width: 640px ) {
    /* Override inline padding-top for 16/9 → 9/16 on mobile portrait
       Only applied when no explicit aspect-ratio override is needed.
       Use data-aspect attribute for fine control. */
    .featured-media-block[data-aspect="21/9"] .featured-media-block__wrapper {
        padding-top : 56.25% !important; /* fall back to 16/9 on mobile */
    }
}

/* ── Reduced Motion ─────────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
    .featured-media-block__image {
        transition : none;
    }
}