/* ── WOA Hero Blocks ──────────────────────────────────────────────── */

/* ── Full-width breakout (CSS fallback) ──────────────────────────────
   Primary breakout is applied as an inline style with !important by
   render.php (woa_hero_align_full_style) so it wins over WordPress's
   global-styles CSS regardless of document load order.

   This CSS rule acts as a fallback for any edge case where the inline
   style is absent (e.g. a block whose attributes haven't been saved yet).
   It may be overridden by WordPress's .has-global-padding > .alignfull
   rule on themes with useRootPaddingAwareAlignments:true, but the PHP
   inline style ensures correct behaviour on the live frontend.
   ──────────────────────────────────────────────────────────────────── */
.alignfull.woa-hero,
.alignfull.woa-mt:not(.woa-mt--bw-wide):not(.woa-mt--bw-contained) {
    margin-left:  calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width:        100vw !important;
    max-width:    none !important;
}

/* ── Wrapper ────────────────────────────────────────────────────── */
.woa-hero {
    position: relative;
    display:  flex;
    width:    100%;
    overflow: hidden;
    /*
     * --woa-h is always written by render.php and editor.js.
     * Values: a px length (fixed height, cover/contain cropping) or 'auto'
     * (natural image height, no cropping). Fallback 'auto' for unsaved blocks.
     */
    height: var(--woa-h, auto);
}

/* ── Image columns ──────────────────────────────────────────────── */
.woa-hero--split .woa-hero__left,
.woa-hero--split .woa-hero__right,
.woa-hero--single .woa-hero__media {
    flex:     1;
    min-width: 0;
    overflow: hidden;
}

.woa-hero--split .woa-hero__left  img { object-fit: var(--woa-left-fit,  cover); }
.woa-hero--split .woa-hero__right img { object-fit: var(--woa-right-fit, cover); }
.woa-hero--single .woa-hero__media img { object-fit: var(--woa-fit,       cover); }

/* Placeholder when no image selected */
.woa-hero__placeholder {
    width:            100%;
    height:           100%;
    background:       #d0d0d0;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    color:            #666;
    font-size:        0.875rem;
    text-align:       center;
    padding:          1rem;
}

/* ── Overlay ────────────────────────────────────────────────────── */
.woa-hero__overlay {
    position:       absolute;
    inset:          0;
    background-color: var(--woa-overlay-color, transparent);
    opacity:        var(--woa-overlay-op, 0);
    pointer-events: none;
    z-index:        1;
}

/* ── Block Width — inline style approach ────────────────────────
   Width constraints are applied as inline styles (max-width + margin: auto)
   directly on the block wrapper by render.php (PHP) and wrapperStyle (JS).
   Inline styles have the highest specificity and work regardless of parent
   layout. The values come from the theme's own CSS custom properties
   (--wp--style--global--wide-size / --wp--style--global--content-size)
   so they update automatically when the theme changes.
   No CSS class rules are needed here.
   ────────────────────────────────────────────────────────────────── */

/* ── Text overflow — prevent words breaking mid-glyph ───────────── */
.woa-hero__card,
.woa-mt__content {
    word-break:    break-word;
    overflow-wrap: break-word;
}

/* ── Card ───────────────────────────────────────────────────────── */
/*
 * Position CSS vars (--ch, --cx, --cv, --cy, --ox, --oy) and all
 * visual properties are set as inline styles on the card element.
 * This file provides the rule that READS those vars.
 */
.woa-hero__card {
    position:  absolute;
    left:      var(--ch, 50%);
    top:       var(--cv, 50%);
    transform: translate(
        calc( var(--cx, -50%) + var(--ox, 0px) ),
        calc( var(--cy, -50%) + var(--oy, 0px) )
    );
    /* padding is set as inline style by render.php / editor.js */
    z-index:   10;
    box-sizing: border-box;
}

/* ── Neutralise woa-card-panel layout rules on the hero card ───── */
/*
 * card-styles.css (theme) sets flex:1 and position:relative on .woa-card-panel.
 * Both conflict with the hero card's absolute positioning. Override here.
 * The stacked-layout rule (.woa-hero--stacked .woa-hero__card { position:static })
 * comes later in this file so it still wins for the mobile-stacked case.
 */
.woa-hero__card.woa-card-panel {
    position: absolute !important;
    flex: none !important;
}

/* ── Schema-aware card background with opacity ──────────────────── */
/*
 * schemas.css (theme) sets background-color: var(--woa-s-bg) !important on
 * .woa-card-panel[class*="woa-schema-"] at specificity (0,2,0).
 *
 * This rule has specificity (0,3,0) with !important so it wins everywhere —
 * frontend AND editor — replacing the solid schema colour with an opacity-aware
 * color-mix() that reads --woa-card-op.
 *
 * Frontend: render.php writes --woa-card-op as a real inline CSS custom property
 * (PHP inline styles are always applied correctly).
 *
 * Editor: React 18 correctly calls element.style.setProperty('--woa-card-op', …)
 * for custom-property keys in the style prop, so the value updates on every
 * slider move and color-mix() reflects it immediately.
 */
.woa-hero__card.woa-card-panel[class*="woa-schema-"] {
    background-color: color-mix(
        in srgb,
        var(--woa-s-bg) var(--woa-card-op, 82%),
        transparent
    ) !important;
}

/* ── Alignment breakout (wide + full) ───────────────────────────── */
/*
 * Both blocks support align="wide" and align="full".
 * When used inside a constrained container the calc() trick breaks
 * the block out to the correct width — no Group wrapper needed.
 *
 * alignwide uses the theme's --wp--style--global--wide-size custom
 * property if present, otherwise falls back to 1200px.
 */
.wp-block-woa-card-split.alignwide,
.wp-block-woa-card-single.alignwide {
    width:        min(var(--wp--style--global--wide-size, 1200px), 100vw);
    max-width:    min(var(--wp--style--global--wide-size, 1200px), 100vw);
    margin-left:  auto;
    margin-right: auto;
}
.wp-block-woa-card-split.alignfull,
.wp-block-woa-card-single.alignfull {
    width:        100vw;
    max-width:    100vw;
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ── Mobile — overlay layout (no stacking) ──────────────────────── */
/*
 * :not(.woa-hero--editor) guards keep these rules from firing inside the
 * Gutenberg editor, whose canvas is often < 640 px wide (sidebar open).
 * The editor stamps woa-hero--editor on every block during editing.
 */
@media (max-width: 640px) {
    /* Cap the fixed px height so a 600px desktop hero doesn't dominate a phone */
    .woa-hero:not(.woa-hero--stacked):not(.woa-hero--editor) {
        height: min( var(--woa-h, 60vh), 72vh );
    }
    .woa-hero--split:not(.woa-hero--stacked):not(.woa-hero--editor) .woa-hero__right {
        display: none;
    }
    /* card padding is controlled by the block's inline style */
}

/* ── Mobile — stacked layout ────────────────────────────────────── */
/*
 * On narrow screens with mobileStack enabled:
 * - Wrapper switches to flex-column (auto height)
 * - Images get a fixed height slot
 * - Overlay is hidden (it only makes sense over images)
 * - Card leaves absolute positioning and becomes a normal flow block
 * - card-first class reverses order
 *
 * :not(.woa-hero--editor) prevents the stacked layout from activating in
 * the Gutenberg editor when its canvas is narrower than 640 px.
 */
@media (max-width: 640px) {
    .woa-hero--stacked:not(.woa-hero--editor) {
        flex-direction: column;
        height:     auto;
        min-height: 0;
    }
    .woa-hero--stacked:not(.woa-hero--editor) .woa-hero__left,
    .woa-hero--stacked:not(.woa-hero--editor) .woa-hero__media {
        flex:   none;
        width:  100%;
        height: clamp(180px, 50vw, 320px);
    }
    .woa-hero--stacked:not(.woa-hero--editor).woa-hero--split .woa-hero__right {
        display: none;
    }
    .woa-hero--stacked:not(.woa-hero--editor) .woa-hero__overlay {
        display: none;
    }
    .woa-hero--stacked:not(.woa-hero--editor) .woa-hero__card,
    .woa-hero--stacked:not(.woa-hero--editor) .woa-hero__card.woa-card-panel {
        position:  static    !important;
        transform: none      !important;
        left:      auto      !important;
        top:       auto      !important;
        width:     100%      !important;
        box-sizing: border-box;
        /* padding is set by inline style — do not override here */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    /*
     * Card-first: the card is output first in the DOM (render.php / editor.js)
     * so no CSS order trick is needed — DOM order is the source of truth.
     */
}


/* ================================================================
   WOA Media Text Hero  (.woa-mt)
   ================================================================ */

/* ── Wrapper ───────────────────────────────────────────────────── */
.woa-mt {
    display:    flex;
    width:      100%;
    /*
     * --woa-mt-min-h is always written by render.php / editor.js (in px).
     * The 400px fallback only fires for genuinely unsaved blocks.
     */
    min-height: var(--woa-mt-min-h, 400px);
    align-items: stretch;
}

/* ── Media column ──────────────────────────────────────────────── */
.woa-mt__media {
    position:  relative;
    flex:      0 0 var(--woa-mt-ratio, 50%);
    min-width: 0;
    overflow:  hidden;
}

/*
 * Absolutely fill the media column with the direct image/video child
 * so the image's natural dimensions never drive the block height.
 * The content column (text) and min-height on the wrapper control height
 * instead, exactly as with the split/single hero blocks.
 */
.woa-mt__media > img,
.woa-mt__media > video {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    display:  block;
}

/* ── Overlay (inside media column) ────────────────────────────── */
.woa-mt__overlay {
    position:         absolute;
    inset:            0;
    background-color: var(--woa-mt-overlay-color, transparent);
    opacity:          var(--woa-mt-overlay-op, 0);
    pointer-events:   none;
}

/* ── Content column ────────────────────────────────────────────── */
/*
 * Grid instead of flex-column for two reasons:
 *  1. WordPress injects --wp--style--block-gap between flex children on the
 *     frontend but not in the editor, causing layout mismatches. Grid with an
 *     explicit row-gap:0 is immune — block spacing comes only from the blocks'
 *     own margins, which are consistent on both sides.
 *  2. align-content positions the whole group of rows vertically (top/middle/
 *     bottom) without the flex justify-content ambiguity.
 *
 * align-content is written as an inline style by render.php / editor.js so
 * it reacts to the contentVertAlign attribute.
 */
.woa-mt__content {
    flex:          1;        /* flex ITEM of .woa-mt — stays full height */
    min-width:     0;
    display:       grid;     /* grid CONTAINER for inner blocks */
    align-content: center;   /* overridden by inline style per-block */
    row-gap:       0;        /* no auto gap — block margins handle spacing */
}

/* Neutralise woa-card-panel's position:relative — content is already in-flow.
   display:grid !important overrides any theme rule that forces flex on .woa-card-panel,
   which would break align-content vertical alignment. */
.woa-mt__content.woa-card-panel {
    display:   grid !important;
    position:  relative !important;
    flex:      1 !important;
}

/* Schema-aware background opacity (same technique as hero card) */
.woa-mt__content.woa-card-panel[class*="woa-schema-"] {
    background-color: color-mix(
        in srgb,
        var(--woa-s-bg) var(--woa-card-op, 100%),
        transparent
    ) !important;
}

/* ── Media position — right ────────────────────────────────────── */
.woa-mt--media-right .woa-mt__media {
    order: 1;
}
.woa-mt--media-right .woa-mt__content {
    order: 0;
}

/* ── Full-bleed image mode ─────────────────────────────────────────
   When .woa-mt--full-bleed is active the media column leaves the normal
   flex flow and covers the entire block as a background layer.
   The content column stays at its natural column width (calc(100% - ratio))
   and is pushed to the correct side based on media position.
   Use Card Opacity = 0% to show the image through the text/buttons.
   ─────────────────────────────────────────────────────────────────── */
.woa-mt--full-bleed {
    position: relative !important;
}
/* Media-left: the content (non-media) column lives on the RIGHT */
.woa-mt--full-bleed.woa-mt--media-left {
    justify-content: flex-end;
}
/* Media-right: the content column lives on the LEFT (flex-start is default) */
.woa-mt--full-bleed.woa-mt--media-right {
    justify-content: flex-start;
}
.woa-mt--full-bleed .woa-mt__media {
    position: absolute !important;
    top:      0 !important;
    right:    0 !important;
    bottom:   0 !important;
    left:     0 !important;
    width:    100% !important;
    height:   100% !important;
    flex:     none !important;
    z-index:  0;
}
.woa-mt--full-bleed .woa-mt__content {
    /* Keep the same natural column width as in non-bleed mode.
       The image spans the full block as a background layer (z-index 0);
       the content panel sits on top (z-index 1) but stays in its ratio portion. */
    flex:      0 0 calc(100% - var(--woa-mt-ratio, 50%)) !important;
    max-width: calc(100% - var(--woa-mt-ratio, 50%)) !important;
    min-width: 0 !important;
    position:  relative;
    z-index:   1;
}

/* ── Video embed wrapper ───────────────────────────────────────── */
/* Absolutely fills the media column (same pattern as direct img/video) */
.woa-mt__video-wrap {
    position: absolute;
    inset:    0;
}
.woa-mt__video-wrap iframe {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    border:   none;
}

/* ── Carousel ──────────────────────────────────────────────────── */
/* Absolutely fills the media column */
.woa-mt__carousel {
    position: absolute;
    inset:    0;
    overflow: hidden;
}

.woa-mt__slides {
    display:    flex;
    height:     100%;
    transition: transform 0.4s ease;
}

.woa-mt__slide {
    position:    relative; /* establishes stacking context for absolute img */
    flex-shrink: 0;
    width:       100%;
    height:      100%;
    overflow:    hidden;
}

.woa-mt__slide img {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    display:  block;
}

/* Arrows */
.woa-mt__arrow {
    position:    absolute;
    top:         50%;
    transform:   translateY(-50%);
    z-index:     2;
    background:  rgba(0,0,0,0.35);
    color:       #fff;
    border:      none;
    cursor:      pointer;
    width:       2.25rem;
    height:      2.25rem;
    border-radius: 50%;
    font-size:   1.5rem;
    line-height: 1;
    display:     flex;
    align-items: center;
    justify-content: center;
    transition:  background 0.2s;
}
.woa-mt__arrow:hover { background: rgba(0,0,0,0.6); }
.woa-mt__arrow--prev { left:  0.75rem; }
.woa-mt__arrow--next { right: 0.75rem; }

/* Dots */
.woa-mt__dots {
    position:   absolute;
    bottom:     0.75rem;
    left:       50%;
    transform:  translateX(-50%);
    display:    flex;
    gap:        6px;
    z-index:    2;
}
.woa-mt__dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    border:        none;
    background:    rgba(255,255,255,0.5);
    cursor:        pointer;
    padding:       0;
    transition:    background 0.2s;
}
.woa-mt__dot.is-active { background: #fff; }

/* ── Placeholder ───────────────────────────────────────────────── */
.woa-mt__placeholder {
    width:           100%;
    height:          100%;
    min-height:      180px;
    background:      #d0d0d0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #666;
    font-size:       0.875rem;
    text-align:      center;
    padding:         1rem;
}

/* ── Alignment breakout (wide + full) ─────────────────────────── */
.wp-block-woa-card-text-media.alignwide {
    width:        min(var(--wp--style--global--wide-size, 1200px), 100vw);
    max-width:    min(var(--wp--style--global--wide-size, 1200px), 100vw);
    margin-left:  auto;
    margin-right: auto;
}
.wp-block-woa-card-text-media.alignfull {
    width:        100vw;
    max-width:    100vw;
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ── Mobile — stacked layout ────────────────────────────────────── */
/*
 * :not(.woa-mt--editor) prevents stacking from firing in the Gutenberg
 * editor when its canvas is narrower than 640 px.
 */
@media (max-width: 640px) {
    .woa-mt--stacked:not(.woa-mt--editor) {
        flex-direction: column;
    }
    /*
     * content-first: visual reversal via flex-direction instead of DOM swap.
     * DOM is always media → content so desktop layout is never disturbed.
     */
    .woa-mt--stacked:not(.woa-mt--editor).woa-mt--content-first {
        flex-direction: column-reverse;
    }
    /* Reset order values so DOM/column order is the visual order */
    .woa-mt--stacked:not(.woa-mt--editor) .woa-mt__media,
    .woa-mt--stacked:not(.woa-mt--editor) .woa-mt__content {
        order: unset !important;
        flex:  none;
        width: 100%;
    }
    /* Media slot uses aspect ratio in stacked mode */
    .woa-mt--stacked:not(.woa-mt--editor) .woa-mt__media {
        aspect-ratio: var(--woa-mt-mob-ratio, 16/9);
        height: auto;
    }
}

/* ── Pin Buttons to bottom of content column ─────────────────────
   When woa-pin-btns is on the content column, the last Buttons block
   within it uses margin-top:auto to push itself to the bottom of the
   available column height. Requires the column to be taller than its
   content — guaranteed when the wrapper has a min-height set.
   ──────────────────────────────────────────────────────────────── */
.woa-mt__content.woa-pin-btns > .wp-block-buttons:last-child {
    margin-top: auto;
}


/* ================================================================
   Button alignment — override theme class-based system
   ================================================================
   The theme (schemas.css / style.css) aligns buttons inside
   .woa-card-panel via its own .woa-buttons-center / .woa-buttons-right
   classes. Our blocks use WordPress's standard
   is-content-justification-* classes on the Buttons block wrapper
   instead. These !important rules restore expected WP behaviour
   inside both the floating card and the Text Media content column.
   ================================================================ */

.woa-hero__card .wp-block-buttons.is-content-justification-left,
.woa-mt__content .wp-block-buttons.is-content-justification-left {
    justify-content: flex-start !important;
}
.woa-hero__card .wp-block-buttons.is-content-justification-center,
.woa-mt__content .wp-block-buttons.is-content-justification-center {
    justify-content: center !important;
}
.woa-hero__card .wp-block-buttons.is-content-justification-right,
.woa-mt__content .wp-block-buttons.is-content-justification-right {
    justify-content: flex-end !important;
}
.woa-hero__card .wp-block-buttons.is-content-justification-space-between,
.woa-mt__content .wp-block-buttons.is-content-justification-space-between {
    justify-content: space-between !important;
}