/* ================================================================
   WOA Card Pattern Utilities  v4.0
   Dedicated stylesheet for the WOA Card block pattern family.
   Loaded on frontend and in the block editor canvas via
   wp_enqueue_block_style (core/columns) in functions.php.
   Do not add unrelated rules here — keep this file card-specific.
   Color schemas live in schemas.css.
================================================================ */


/* ----------------------------------------------------------------
   Consolidated card class  v4.0
   .woa-card replaces adding woa-columns-no-gap + woa-card-wide-width
   separately. Apply to the Columns block (or outer Group for
   text-CTA). Schema class goes here too: "woa-card woa-schema-2".

   .woa-card-media replaces woa-2col-card. Use alongside .woa-card
   on media-text Columns blocks: "woa-card woa-card-media woa-schema-2".

   Backward compatibility: old classes are kept below so existing
   cards already on published pages continue to render correctly.
---------------------------------------------------------------- */
.woa-card {
    gap: 0 !important;
    max-width: var(--wp--style--global--wide-size) !important;
    margin-left:  max(var(--wp--preset--spacing--50), calc(50% - var(--wp--style--global--wide-size) / 2)) !important;
    margin-right: max(var(--wp--preset--spacing--50), calc(50% - var(--wp--style--global--wide-size) / 2)) !important;
}

.woa-card-media {
    position: relative;
    overflow: hidden;
}


/* ----------------------------------------------------------------
   Backward-compatibility aliases
   These classes were used in the v3 pattern system.  They continue
   to work for cards already inserted on published pages.
   New patterns use .woa-card / .woa-card-media instead.
---------------------------------------------------------------- */

/* Column gap control — used by old cards via woa-columns-no-gap */
.woa-columns-no-gap {
    gap: 0 !important;
}

/* Media-text position context — used by old cards via woa-2col-card */
.woa-2col-card {
    position: relative;
    overflow: hidden;
}

/* Explicit wide-width — used by old cards via woa-card-wide-width */
.woa-card-wide-width {
    max-width: var(--wp--style--global--wide-size) !important;
    margin-left:  max(var(--wp--preset--spacing--50), calc(50% - var(--wp--style--global--wide-size) / 2)) !important;
    margin-right: max(var(--wp--preset--spacing--50), calc(50% - var(--wp--style--global--wide-size) / 2)) !important;
}

.woa-card-full-width {
    max-width: none !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}


/* ----------------------------------------------------------------
   Card column height alignment  v2.0
   Makes each column fill the full height of the tallest column
   so that headings, text, and buttons line up across both sides.

   How it works (v2.0):
   Image columns use wp:cover (editor sets background photo).
   Content columns use wp:group(.woa-card-panel) — a flex column
   that grows to fill height and pins its Buttons to the bottom.
   1. Each Column becomes a flex container (column direction)
      so its direct child (Cover or Group) can grow to fill it.
   2. The Cover (image column) stretches to fill the column.
   3. The Cover inner container is a flex column for the
      heading + button overlay on the photo.
   4. woa-card-panel handles all content columns via one code path.

   :is() groups both the new (.woa-card) and legacy (.woa-columns-no-gap)
   class names — same specificity, no duplication.
---------------------------------------------------------------- */

/* 1 — Column becomes a flex column container.
   Also zero out the padding injected by has-global-padding so the Cover
   fills the full column width rather than being inset by the page gutters. */
:is(.woa-columns-no-gap, .woa-card) > .wp-block-column {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}

/* Fallback when user hasn't added an image yet (helps in editor) */
:is(.woa-columns-no-gap, .woa-card) > .wp-block-column > .wp-block-cover:not([style*="background-image"]) .wp-block-cover__background {
    background-color: var(--wp--preset--color--base-2) !important;
}

/* Rectangular buttons — all WOA card content panels.
   theme.json elements.button.border.radius:"0" handles the global default;
   this rule is the belt-and-braces override for any context where the
   theme.json-generated CSS doesn't reach (e.g. older cached global styles). */
.woa-card-panel .wp-block-button__link,
.woa-cover-card .wp-block-button__link {
    border-radius: 0 !important;
}

/* Optional hover enhancement for better UX */
:is(.woa-2col-card, .woa-card-media) .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--accent) !important;
}

/* 2 — Cover stretches to fill column height and full column width.
   flex:1 makes the Cover grow beyond its min-height to match the content
   column when content is taller than the preset minimum.
   Overrides max-width + margin:auto from is-layout-constrained on the column. */
:is(.woa-columns-no-gap, .woa-card) > .wp-block-column > .wp-block-cover {
    flex: 1;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 3 — Image-column Cover inner container: flex column for heading + button overlay on photo.
   padding-left/right: 0 cancels the extra 50px that WordPress auto-injects via
   has-global-padding on this element, which would otherwise double the Cover's own padding
   and push the heading 100px from the edge instead of the expected 50px. */
:is(.woa-columns-no-gap, .woa-card) > .wp-block-column > .wp-block-cover
    .wp-block-cover__inner-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-self: stretch;   /* override align-items:flex-start from contentPosition */
    width: 100%;
    padding-left: 0 !important;   /* cancel has-global-padding double-padding */
    padding-right: 0 !important;
}

/* 3b — Image-column Cover inner blocks: override the Cover's is-layout-constrained
   which caps inner elements at contentSize (645px) and centres them via margin:auto.
   Setting max-width:100% and margin-left/right:0 makes heading + buttons fill the
   full column width so text-align and justify-content work without the user having
   to manually set each block to "Full Width" in the editor. */
:is(.woa-columns-no-gap, .woa-card) > .wp-block-column > .wp-block-cover
    .wp-block-cover__inner-container .wp-block-heading,
:is(.woa-columns-no-gap, .woa-card) > .wp-block-column > .wp-block-cover
    .wp-block-cover__inner-container .wp-block-buttons {
    max-width: 100% !important;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 3c — Pin Buttons to the bottom of the photo overlay. */
:is(.woa-columns-no-gap, .woa-card) > .wp-block-column > .wp-block-cover
    .wp-block-cover__inner-container .wp-block-buttons {
    display: flex !important;
    flex-wrap: wrap;
    margin-top: auto !important;
}

/* 4 — Group-based content panel — used by ALL content columns */
.woa-card-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;          /* corner image anchor */
}

/* Headings and paragraphs: explicit full-width + zero margins.
   width:100% removes free space so margin:auto has nothing to absorb.
   margin:0 !important overrides the is-layout-constrained auto-margin that
   WordPress injects — which centres each element at its natural content width
   in a flex-column context and causes progressive indentation.

   Two selectors are needed:
   - .wp-block-heading / .wp-block-paragraph  — modern WP (class present)
   - h1–h6 / p element selectors              — older content (class absent)
   Specificity with :not() chain = (0,4,1) which beats WP's (0,1,0). */
.woa-card-panel .wp-block-heading:not(.alignleft):not(.alignright):not(.alignfull),
.woa-card-panel .wp-block-paragraph:not(.alignleft):not(.alignright):not(.alignfull),
.woa-card-panel > p:not(.alignleft):not(.alignright):not(.alignfull),
.woa-card-panel > h1:not(.alignleft):not(.alignright):not(.alignfull),
.woa-card-panel > h2:not(.alignleft):not(.alignright):not(.alignfull),
.woa-card-panel > h3:not(.alignleft):not(.alignright):not(.alignfull),
.woa-card-panel > h4:not(.alignleft):not(.alignright):not(.alignfull),
.woa-card-panel > h5:not(.alignleft):not(.alignright):not(.alignfull),
.woa-card-panel > h6:not(.alignleft):not(.alignright):not(.alignfull) {
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ----------------------------------------------------------------
   Heading / paragraph gap control  v2.1
   WordPress implements blockGap for constrained-layout groups as
   "margin-top: 20px" on children via a per-instance > * + * rule.
   These rules override that value per-pair with direct !important values.

   Result:
     heading → paragraph : 10px  (tight — they are one content unit)
     paragraph → heading : 30px  (wide — separator between feature items)
   All other adjacent pairs keep the blockGap default (20px).
---------------------------------------------------------------- */
.woa-card-panel .wp-block-heading + .wp-block-paragraph {
    margin-top: 0px !important;
}

.woa-card-panel .wp-block-paragraph + .wp-block-heading {
    margin-top: 20px !important;
    /* spacing-40 = 30px */
}

.woa-card-panel .wp-block-buttons {
    display: flex !important;
    flex-wrap: wrap;
    width: 100%;
    margin-top: auto !important;  /* overrides inline style="margin-top:spacing-30" */
}

/* ----------------------------------------------------------------
   Outline button utilities  v2.0
   Use on any Button block via Additional CSS class(es).
   Avoids WP's border-colour attribute system which varies between
   WP versions and causes block validation errors.

   woa-button-outline       — contrast border/text (for light backgrounds)
   woa-button-outline-light — base border/text    (for dark backgrounds)

   When either class is used inside a woa-schema-* panel, schemas.css
   overrides these colours automatically — no need for separate light/dark
   variants. These fallback rules apply outside of schema contexts.
---------------------------------------------------------------- */
.woa-button-outline .wp-block-button__link {
    background: transparent !important;
    border: 2px solid var(--wp--preset--color--contrast) !important;
    color: var(--wp--preset--color--contrast) !important;
}

.woa-button-outline .wp-block-button__link:hover {
    background: var(--wp--preset--color--contrast) !important;
    color: var(--wp--preset--color--base) !important;
}

.woa-button-outline-light .wp-block-button__link {
    background: transparent !important;
    border: 2px solid var(--wp--preset--color--base) !important;
    color: var(--wp--preset--color--base) !important;
}

.woa-button-outline-light .wp-block-button__link:hover {
    background: var(--wp--preset--color--base) !important;
    color: var(--wp--preset--color--contrast) !important;
}


/* ----------------------------------------------------------------
   Card height presets  v1.3
   Add one of these classes to the Columns block (alongside
   woa-card or woa-columns-no-gap) to control the minimum card
   height from a single place. The !important overrides the inline
   min-height set on each Cover block.

   Usage (block editor): select the Columns block → Additional CSS
   class → add e.g. "woa-card woa-card-350 woa-schema-2"

   Image-column Covers only — Group-based content panels (woa-card-panel)
   stretch automatically via flex:1 without needing a min-height override.
---------------------------------------------------------------- */
.woa-card-350 > .wp-block-column > :is(.wp-block-cover, .wp-block-group) { min-height: 350px !important; }
.woa-card-400 > .wp-block-column > :is(.wp-block-cover, .wp-block-group) { min-height: 400px !important; }
.woa-card-450 > .wp-block-column > :is(.wp-block-cover, .wp-block-group) { min-height: 450px !important; }
.woa-card-500 > .wp-block-column > :is(.wp-block-cover, .wp-block-group) { min-height: 500px !important; }
.woa-card-550 > .wp-block-column > :is(.wp-block-cover, .wp-block-group) { min-height: 550px !important; }
.woa-card-600 > .wp-block-column > :is(.wp-block-cover, .wp-block-group) { min-height: 600px !important; }


/* ----------------------------------------------------------------
   Button alignment utilities  v2.1
   Override the default left-aligned Buttons layout from a CSS
   class on the content Group block, rather than opening each
   Buttons block individually in the editor.

   Add one of these to the Group block's Additional CSS Class
   field alongside woa-card-panel:
     "woa-card-panel woa-buttons-center"
     "woa-card-panel woa-buttons-right"

   Editor alternative (per-card): select the Buttons block →
   justify toolbar (left / centre / right). WordPress adds the
   is-content-justification-{direction} class automatically.
   Both approaches can coexist — the CSS class sets the default,
   the editor toolbar overrides it on individual Buttons blocks.

   No woa-buttons-left class needed — left is the default.
---------------------------------------------------------------- */
.woa-card-panel.woa-buttons-center .wp-block-buttons { justify-content: center !important; }
.woa-card-panel.woa-buttons-right  .wp-block-buttons { justify-content: flex-end !important; }


/* === Image side (cover overlay) === */
/* Paragraph follows Buttons justification */
:is(.woa-columns-no-gap, .woa-card) .wp-block-cover__inner-container .wp-block-paragraph {
    margin-left: 0;
    margin-right: 0;
}

/* When Buttons are centered → center paragraph */
:is(.woa-columns-no-gap, .woa-card) .wp-block-cover__inner-container
    .wp-block-buttons.is-content-justification-center ~ .wp-block-paragraph,
:is(.woa-columns-no-gap, .woa-card) .wp-block-cover__inner-container
    .wp-block-buttons.is-content-justification-center + .wp-block-paragraph {
    text-align: center !important;
}

/* When Buttons are right → right-align paragraph */
:is(.woa-columns-no-gap, .woa-card) .wp-block-cover__inner-container
    .wp-block-buttons.is-content-justification-right ~ .wp-block-paragraph,
:is(.woa-columns-no-gap, .woa-card) .wp-block-cover__inner-container
    .wp-block-buttons.is-content-justification-right + .wp-block-paragraph {
    text-align: right !important;
}

/* === Content side (group panel) === */
/* Same logic for left-side paragraph */
.woa-card-panel .wp-block-buttons.is-content-justification-center ~ .wp-block-paragraph,
.woa-card-panel .wp-block-buttons.is-content-justification-center + .wp-block-paragraph {
    text-align: center !important;
}

.woa-card-panel .wp-block-buttons.is-content-justification-right ~ .wp-block-paragraph,
.woa-card-panel .wp-block-buttons.is-content-justification-right + .wp-block-paragraph {
    text-align: right !important;
}


/* ----------------------------------------------------------------
   Product image panel  v1.0
   Alternative to the Cover block for images that must show at
   natural proportions — e.g. book covers, product shots.
   Use on a Group block replacing the Cover in the image column.

   Usage:
   1. In the image column, delete the Cover block
   2. Insert a Group block
   3. Add class "woa-image-panel" to the Group
   4. Set the Group's background colour via the Styles panel
   5. Insert an Image block inside — set its width as desired
      (e.g. 70% or a fixed px value) — it will be centred

   The Group automatically fills the full column height (flex:1)
   matching the content panel on the other side, and centres the
   image both horizontally and vertically with 30px padding.
---------------------------------------------------------------- */
:is(.woa-columns-no-gap, .woa-card) > .wp-block-column > .wp-block-group.woa-image-panel {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px !important;
    box-sizing: border-box;
}

/* Image inside the panel: constrain to available space, never upscale */
:is(.woa-columns-no-gap, .woa-card) > .wp-block-column > .wp-block-group.woa-image-panel
    .wp-block-image img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* ----------------------------------------------------------------
   Contained image cover  v1.0
   Apply to the Cover block in a card image column when the image
   should be shown in full (e.g. a book cover, product shot) rather
   than cropped to fill the column.

   Usage — Additional CSS class on the Cover block:
     woa-cover-contain

   How to set the background colour in the editor:
   1. Select the Cover block → Styles panel → Overlay
   2. Pick the desired colour (e.g. base, base-2, base-3)
   3. Set opacity to 0% — WP still applies has-X-background-color
      to the cover div itself, so the colour shows in the empty
      areas around the contained image. Setting opacity > 0% will
      tint or fully obscure the image.
   A transparent PNG or WebP with a pre-composited shadow works best.
---------------------------------------------------------------- */
/* Modern WP (6.4+) renders Cover images as <img object-fit:cover> not CSS background.
   Target the img element and switch object-fit to contain so the full image shows. */
:is(.woa-columns-no-gap, .woa-card) > .wp-block-column > .wp-block-cover.woa-cover-contain
    img.wp-block-cover__image-background {
    object-fit: contain !important;
}

/* Legacy fallback — older WP used CSS background-image on the cover div */
:is(.woa-columns-no-gap, .woa-card) > .wp-block-column > .wp-block-cover.woa-cover-contain {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}


/* ----------------------------------------------------------------
   Corner image utilities  v1.0
   Place a decorative image in any corner of a woa-card-panel (or
   any Group with woa-position-context).

   Usage — Additional CSS class on the Image block:
     woa-image-corner-tr   top-right,    5px from right, flush top
     woa-image-corner-br   bottom-right, 5px from right, flush bottom
     woa-image-corner-tl   top-left,     5px from left,  flush top
     woa-image-corner-bl   bottom-left,  5px from left,  flush bottom

   Image size is set normally in the editor (width field). The image
   is removed from flex flow and overlays panel content from the corner.
   No overflow clipping — illustrations may extend beyond the card edge.

   Standalone context class (for Groups outside woa-card-panel):
     woa-position-context  — add to any Group block
---------------------------------------------------------------- */

.woa-position-context {
    position: relative;
}

/* Shared base — absolute positioning, clear WP defaults */
.woa-card-panel .wp-block-image[class*="woa-image-corner"],
.woa-position-context .wp-block-image[class*="woa-image-corner"] {
    position: absolute;
    margin: 0 !important;
    max-width: none;             /* remove WP's 100% cap so editor width is respected */
    z-index: 1;
}

/* Individual corners (5px inset from card edge) */
.wp-block-image.woa-image-corner-tr { top:    0;    right:  5px; }
.wp-block-image.woa-image-corner-br { bottom: 0;    right:  5px; }
.wp-block-image.woa-image-corner-tl { top:    0;    left:   5px; }
.wp-block-image.woa-image-corner-bl { bottom: 0;    left:   5px; }


/* ----------------------------------------------------------------
   Scene card panel tint utilities  v1.0
   Apply to the woa-card-panel Group block inside a scene card to
   give the text overlay a semi-transparent schema-coloured backing.

   The background colour is taken from the card's active schema
   (--woa-s-bg) via color-mix(), so it works with any schema class.
   The fallback is Dahlia White (--wp--preset--color--base).

   Usage — Additional CSS class on the woa-card-panel Group block:
     "woa-card-panel woa-panel-25"   25% opacity tint (very light)
     "woa-card-panel woa-panel-50"   50% opacity tint (medium)
     "woa-card-panel woa-panel-75"   75% opacity tint (mostly solid)
     "woa-card-panel woa-panel-90"   90% opacity tint (near solid)

   Tip: 60–75% is usually the sweet spot — enough to read text
   clearly while still letting the illustration show through.
---------------------------------------------------------------- */
.woa-card.woa-scene-card .wp-block-group.woa-card-panel.woa-panel-25 {
    background-color: color-mix(in srgb, var(--woa-s-bg, var(--wp--preset--color--base)) 25%, transparent) !important;
}
.woa-card.woa-scene-card .wp-block-group.woa-card-panel.woa-panel-50 {
    background-color: color-mix(in srgb, var(--woa-s-bg, var(--wp--preset--color--base)) 50%, transparent) !important;
}
.woa-card.woa-scene-card .wp-block-group.woa-card-panel.woa-panel-75 {
    background-color: color-mix(in srgb, var(--woa-s-bg, var(--wp--preset--color--base)) 75%, transparent) !important;
}
.woa-card.woa-scene-card .wp-block-group.woa-card-panel.woa-panel-90 {
    background-color: color-mix(in srgb, var(--woa-s-bg, var(--wp--preset--color--base)) 90%, transparent) !important;
}


/* ----------------------------------------------------------------
   Scene card  v2.0
   A card where a large illustration spans the full card width and
   bleeds outside the card boundary at the top and one side.  The
   content (text + buttons) overlays the right (or left) portion of
   the illustration — the illustration IS the card background.

   Architecture
   ─────────────
   • Columns block  →  woa-card woa-scene-card woa-schema-N
     - overflow:visible so the illustration can bleed outside
     - border rendered via inset box-shadow (doesn't clip children)
     - schema sets text + button colours only (panel bg is transparent)

   • Left column  →  wp:column
     - wp:group.woa-scene-image (no background)
       - wp:image.woa-image-bleed-tl  (no width attr — CSS controls it)

   • Right column  →  wp:column
     - wp:group.woa-card-panel (transparent in scene cards)

   Illustration width
   ──────────────────
   The figure width is set via CSS (var(--wp--style--global--wide-size),
   = 1340px) so the block needs no inline style and stays valid in the
   editor.  Do NOT set a Width value in the Image block settings — that
   adds an inline style that conflicts with block validation in WP 6.4+.

   The card height is driven by the illustration's natural aspect ratio.
   A 2:1 landscape at full card width (~1340px) → ~670px tall card.

   Tip: choose an illustration that is lighter / emptier on the
   content side — this gives the overlaid text breathing room.
---------------------------------------------------------------- */

/* Columns container — overflow visible */
.woa-card.woa-scene-card {
    overflow: hidden;
}

/* Image column — overflow:visible lets the wide illustration exceed the 50% column width.
   Col 1 is always the image column in the DOM for both scene card variants. */
.woa-scene-card > .wp-block-column:first-child {
    overflow: visible;
}

/* Content column — DOM order (col2 after col1) naturally paints col2 on top,
   so text always renders above the overflowing illustration. */
.woa-scene-card > .wp-block-column:last-child {
    position: relative;
}

/* Right-image variant — flip visual column order.
   Col 1 (image) appears visually on the right; col 2 (text) on the left.
   DOM paint order is unchanged so text still renders above the illustration.
   Use class: woa-card woa-scene-card woa-scene-card-right woa-schema-N
   Use image class: woa-image-bleed-tr (flush to top-right corner) */
.woa-card.woa-scene-card.woa-scene-card-right {
    flex-direction: row-reverse;
}

/* Image column group — no background (illustration IS the background) */
.woa-scene-card > .wp-block-column > .wp-block-group.woa-scene-image {
    flex: 1;
    overflow: visible !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Content panel in a scene card — transparent so illustration shows through.
   The !important is necessary to override the schema's background-color rule.
   The illustration is always the background in a scene card. */
.woa-scene-card > .wp-block-column > .wp-block-group.woa-card-panel {
    background-color: transparent !important;
}

/* Bleed image figure — width set via CSS so the block needs no inline style.
   var(--wp--style--global--wide-size) = the theme's wide-width (1340px),
   making the illustration span the full card across both columns.
   max-width:none overrides WP's constrained-layout cap. */
.woa-scene-image .wp-block-image.woa-image-bleed-tl,
.woa-scene-image .wp-block-image.woa-image-bleed-tr,
.woa-scene-image .wp-block-image.woa-image-bleed-bl,
.woa-scene-image .wp-block-image.woa-image-bleed-br {
    display: block;
    line-height: 0; /* collapse figure whitespace */
    width: var(--wp--style--global--wide-size, 1340px) !important;
    max-width: none !important;
}

/* Image itself — fills whatever width is set on the figure. */
.woa-scene-image .wp-block-image[class*="woa-image-bleed"] img {
    width: 100%;
    height: auto;
    max-width: none; /* allow image to exceed column width */
    display: block;
}

/* Corner anchoring — image sits flush with the chosen corner of the card.
   tl = top-left, tr = top-right, bl = bottom-left, br = bottom-right.
   All four share the same zero-margin base; the class names are kept
   so editors can switch corner without changing the CSS. */
.woa-scene-image .wp-block-image.woa-image-bleed-tl {
    margin-top:    0 !important;
    margin-left:   0 !important;
    margin-right:  0 !important;
    margin-bottom: 0 !important;
}
.woa-scene-image .wp-block-image.woa-image-bleed-tr {
    margin-top:    0 !important;
    margin-right:  0 !important;
    margin-left:   calc(100% - var(--wp--style--global--wide-size, 1340px)) !important; /* anchors right edge of illustration flush with card right edge regardless of column split */
    margin-bottom: 0 !important;
}
.woa-scene-image .wp-block-image.woa-image-bleed-bl {
    margin-bottom: 0 !important;
    margin-left:   0 !important;
    margin-top:    0 !important;
    margin-right:  0 !important;
}
.woa-scene-image .wp-block-image.woa-image-bleed-br {
    margin-bottom: 0 !important;
    margin-right:  0 !important;
    margin-top:    0 !important;
    margin-left:   0     !important;
}

/* ----------------------------------------------------------------
   Scene card — Mobile layout
   At mobile widths the two columns stack (WP default "Stack on
   mobile" behaviour). Without overrides, the 1340px illustration
   expands the document width and prevents proper stacking.

   Fix: clip the card, shrink the illustration to 100%, give the
   content panel a solid schema background, and collapse the
   desktop-only spacer used to push text below the illustration.
---------------------------------------------------------------- */
@media (max-width: 781px) {
    /* WP generates flex-wrap:nowrap on this block via an inline <style> tag.
       Override it so the columns can stack on mobile.
       flex-direction:row resets row-reverse on the right-image variant so
       both variants stack the same way: image on top, text below. */
    .woa-card.woa-scene-card {
        flex-wrap: wrap !important;
        flex-direction: row !important;
        overflow: hidden !important; /* clip wide illustration */
    }

    /* Stack each column to full width */
    .woa-scene-card > .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }

    /* Image column: clip so the 1340px img doesn't overflow */
    .woa-scene-card > .wp-block-column:first-child {
        overflow: hidden !important;
    }

    /* Illustration: fill column width (not 1340px card width) */
    .woa-scene-image .wp-block-image.woa-image-bleed-tl,
    .woa-scene-image .wp-block-image.woa-image-bleed-tr,
    .woa-scene-image .wp-block-image.woa-image-bleed-bl,
    .woa-scene-image .wp-block-image.woa-image-bleed-br {
        width: 100% !important;
        margin-left: 0 !important; /* reset the -100% shift used on desktop for woa-image-bleed-tr */
    }

    /* Content panel: solid schema background — text now sits on its
       own row below the illustration, not floating over it */
    .woa-scene-card > .wp-block-column > .wp-block-group.woa-card-panel {
        background-color: var(--woa-s-bg, var(--wp--preset--color--base)) !important;
        padding-left: var(--wp--preset--spacing--50) !important;
    }

    /* Collapse any spacer blocks used on desktop to push text down.
       On mobile the text panel is its own row — no spacer needed. */
    .woa-scene-card .wp-block-spacer {
        height: 0 !important;
        min-height: 0 !important;
    }
}

/* ----------------------------------------------------------------
    Ensure the background image does not crop
---------------------------------------------------------------- */
.is-style-woa-overlay-card {
    background-size: contain !important; /* Forces the whole image to show */
    background-repeat: no-repeat !important;
    background-position: center !important;
    min-height: 500px; /* Adjust this to match your image's height */
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.woa-text-glass {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 3rem;
    max-width: 500px;
    margin-left: 5%;
}

/* ----------------------------------------------------------------
   WOA Gallery Portrait — consistent image height in a grid
   Add class "woa-gallery-portrait" to the Gallery block.
   Images display at natural proportions but are capped at a
   consistent height so all rows align neatly. Adjust the
   max-height value to suit your artwork dimensions.
---------------------------------------------------------------- */
.woa-gallery-portrait .wp-block-image img {
    max-height: 260px;
    width: auto;
    object-fit: contain;
}

/* ----------------------------------------------------------------
   WOA Image Grid 2×2 — four illustrations in a flush 2-column grid
   Add class "woa-image-grid-2x2" to a Group block, then place
   four Image blocks inside it (directly, or nested one Group deep).

   object-fit: cover  → images fill their cell (slight crop at edges)
   object-fit: contain → full image visible, letterboxed if needed
   aspect-ratio controls cell shape — 1/1 = square, 4/3 = landscape
----------------------------------------------------------------- */
.woa-image-grid-2x2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    /* Strip is-layout-constrained inner padding — alignwide handles the width */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* If WP wraps images in a nested inner Group, flatten it */
.woa-image-grid-2x2 > .wp-block-group {
    display: contents !important;
}

.woa-image-grid-2x2 .wp-block-image {
    margin: 0 !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    /* Override any WP columnSpan / rowSpan classes */
    grid-column: span 1 !important;
    grid-row: span 1 !important;
}

.woa-image-grid-2x2 .wp-block-image img {
    width: 100% !important;
    height: 100%;
    object-fit: cover !important;
    display: block;
}

/* ----------------------------------------------------------------
   WOA Image Grid 2×2 — gapped variant
   Add "woa-image-grid-2x2-gap" alongside "woa-image-grid-2x2"
   for a 20px gutter between all four cells.
----------------------------------------------------------------- */
.woa-image-grid-2x2.woa-image-grid-2x2-gap {
    gap: 20px !important;
}

/* ----------------------------------------------------------------
   woa-image-right — clip background image to the right portion only.
   Add alongside woa-cover-card when the panel is on the left and you
   want the photo to start where the panel ends (not bleed behind it).
   --woa-image-offset  default 22%  — adjust to match your panel width.
----------------------------------------------------------------- */
.woa-cover-card.woa-image-right .wp-block-cover__image-background,
.woa-cover-card.woa-image-right video.wp-block-cover__video-background {
    left: var(--woa-image-offset, 30%) !important;
    width: calc(100% - var(--woa-image-offset, 30%)) !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* ================================================================
   WOA Cover Overlay Card  (woa-card-cover-left/center/right)
   A wide Cover block (photo background) with a schema-coloured
   panel overlaid left, centre, or right.

   Container:  wp:cover  with  "woa-cover-card woa-panel-{pos} woa-schema-N"
   Panel:      wp:group  with  "woa-card-panel"  (optionally + "woa-panel-75" etc.)

   Panel position is set by woa-panel-left / woa-panel-center / woa-panel-right
   on the Cover block. Panel colour comes from the schema via --woa-s-bg.
   Add woa-panel-25/50/75/90 to the panel group for transparency.
================================================================ */

/* 1. Make inner container full-width and flex */
.woa-cover-card .wp-block-cover__inner-container {
    display: flex !important;
    align-items: center;
    max-width: none !important;
    width: 100% !important;
    padding-top: var(--wp--preset--spacing--70);
    padding-bottom: var(--wp--preset--spacing--70);
    padding-left: var(--wp--preset--spacing--50);
    padding-right: var(--wp--preset--spacing--50);
    box-sizing: border-box;
}

/* 2. Panel alignment — horizontal */
.woa-cover-card.woa-panel-left   .wp-block-cover__inner-container { justify-content: flex-start; }
.woa-cover-card.woa-panel-center .wp-block-cover__inner-container { justify-content: center; }
.woa-cover-card.woa-panel-right  .wp-block-cover__inner-container { justify-content: flex-end; }

/* 2b. Panel alignment — vertical.
   The Cover block is display:flex (row direction). justify-content = horizontal axis,
   align-items = vertical axis. So top/bottom override align-items on the Cover block
   itself — the inner container (width:100%) sits as a flex child and moves up/down. */
.woa-cover-card.woa-panel-top    { align-items: flex-start !important; }
.woa-cover-card.woa-panel-bottom { align-items: flex-end   !important; }

/* 2c. Panel inset — distance from the Cover edge to the panel.
   Applied on the Cover block; overrides base inner-container padding.
   H (Side Offset): left + right padding.  V (Top/Bottom Offset): top + bottom padding.
   sm = 100px | md = 200px | lg = 300px | xl = 400px
   No class = base rule padding applies (spacing-50 H, spacing-70 V).
   Note: H inset has no visual effect when panel is centre-positioned (justify-content:center
   shrinks available space equally both sides). V inset has no effect for middle-positioned panels. */
.woa-cover-card.woa-inset-h-sm .wp-block-cover__inner-container { padding-left: 100px !important; padding-right: 100px !important; }
.woa-cover-card.woa-inset-h-md .wp-block-cover__inner-container { padding-left: 200px !important; padding-right: 200px !important; }
.woa-cover-card.woa-inset-h-lg .wp-block-cover__inner-container { padding-left: 300px !important; padding-right: 300px !important; }
.woa-cover-card.woa-inset-h-xl .wp-block-cover__inner-container { padding-left: 400px !important; padding-right: 400px !important; }

.woa-cover-card.woa-inset-v-sm .wp-block-cover__inner-container { padding-top: 100px !important; padding-bottom: 100px !important; }
.woa-cover-card.woa-inset-v-md .wp-block-cover__inner-container { padding-top: 200px !important; padding-bottom: 200px !important; }
.woa-cover-card.woa-inset-v-lg .wp-block-cover__inner-container { padding-top: 300px !important; padding-bottom: 300px !important; }
.woa-cover-card.woa-inset-v-xl .wp-block-cover__inner-container { padding-top: 400px !important; padding-bottom: 400px !important; }

/* 3. Panel size — default 560px. Add a size class to the woa-card-panel Group block
   in the editor to control width per-card:
     woa-panel-sm (420px)  woa-panel-md (560px)  woa-panel-lg (660px)  woa-panel-xl (760px) */
.woa-cover-card .woa-card-panel {
    max-width: 560px;
    width: 100%;
    flex-shrink: 0;
}
.woa-cover-card .woa-card-panel.woa-panel-sm { max-width: 420px !important; }
.woa-cover-card .woa-card-panel.woa-panel-md { max-width: 560px !important; }
.woa-cover-card .woa-card-panel.woa-panel-lg { max-width: 660px !important; }
.woa-cover-card .woa-card-panel.woa-panel-xl { max-width: 760px !important; }

/* 4. Text colour — override Cover block's is-light (color:#000) with schema token.
   Targets both WP block classes (.wp-block-heading / .wp-block-paragraph) and bare
   element selectors (h1–h6 / p) so no text is missed regardless of WP version. */
.woa-cover-card .woa-card-panel,
.woa-cover-card .woa-card-panel p,
.woa-cover-card .woa-card-panel h1,
.woa-cover-card .woa-card-panel h2,
.woa-cover-card .woa-card-panel h3,
.woa-cover-card .woa-card-panel h4,
.woa-cover-card .woa-card-panel h5,
.woa-cover-card .woa-card-panel h6 {
    color: var(--woa-s-text, var(--wp--preset--color--contrast)) !important;
}

/* 5. Rectangular buttons — override WP's default pill shape (9999px border-radius) */
.woa-cover-card .woa-card-panel .wp-block-button__link {
    border-radius: 0 !important;
}

/* 6. Panel transparency utilities — add to the woa-card-panel Group block.
   Higher specificity (0,4,0) beats schemas.css solid-bg rule (0,2,0) so the
   color-mix wins even when both have !important. */
.woa-cover-card .wp-block-group.woa-card-panel.woa-panel-25 {
    background-color: color-mix(in srgb, var(--woa-s-bg, var(--wp--preset--color--base)) 25%, transparent) !important;
}
.woa-cover-card .wp-block-group.woa-card-panel.woa-panel-50 {
    background-color: color-mix(in srgb, var(--woa-s-bg, var(--wp--preset--color--base)) 50%, transparent) !important;
}
.woa-cover-card .wp-block-group.woa-card-panel.woa-panel-75 {
    background-color: color-mix(in srgb, var(--woa-s-bg, var(--wp--preset--color--base)) 75%, transparent) !important;
}
.woa-cover-card .wp-block-group.woa-card-panel.woa-panel-90 {
    background-color: color-mix(in srgb, var(--woa-s-bg, var(--wp--preset--color--base)) 90%, transparent) !important;
}

/* 7. Mobile: full-width panel, centred; collapse inset to small values */
@media (max-width: 781px) {
    .woa-cover-card .wp-block-cover__inner-container {
        justify-content: center !important;
        padding-left: var(--wp--preset--spacing--30) !important;
        padding-right: var(--wp--preset--spacing--30) !important;
    }
    .woa-cover-card[class*="woa-inset-h-"] .wp-block-cover__inner-container {
        padding-left: var(--wp--preset--spacing--30) !important;
        padding-right: var(--wp--preset--spacing--30) !important;
    }
    .woa-cover-card[class*="woa-inset-v-"] .wp-block-cover__inner-container {
        padding-top: var(--wp--preset--spacing--50) !important;
        padding-bottom: var(--wp--preset--spacing--50) !important;
    }
    .woa-cover-card .woa-card-panel {
        max-width: 100%;
    }
}

/* 2×2 illustration grid */
.woa-image-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px; /* or 0 for flush like your screenshot */
}

.woa-image-grid-2x2 .wp-block-image {
    margin: 5px;
    aspect-ratio: 1 / 1; /* forces all cells square */
    overflow: hidden;
}

.woa-image-grid-2x2 .wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* cover = crop to fill | contain = show full image with letterbox */
    display: block;
}

/* Center text vertically with a group. */
.woa-v-center {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}


/* ****************************************************
/* Make image peek over the top of a card 
*/
.woa-character-wrap {
    position: relative;
}

.woa-peek-character {
    position: absolute !important;
    top: 0;
    right: 80px;          /* adjust to taste */
    transform: translateY(-100%);
    width: 120px !important;  /* adjust to taste */
    z-index: 10;
    margin: 0 !important;
    pointer-events: none;
}

/* ----------------------------------------------------------------
   Contact page — left column flex so character pins to the bottom,
   aligning with the Send button at the foot of the form.
----------------------------------------------------------------- */
.woa-cf-left-col {
    display: flex !important;
    flex-direction: column !important;
}

.woa-cf-left-col .woa-character-wrap {
    margin-top: auto !important;   /* pushes character to bottom of column */
    align-self: flex-start;        /* don't stretch to fill column height */
    min-height: 0 !important;      /* override inline min-height set by editor */
}

.woa-contact-character {
    margin: 0 !important;
    width: 350px !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

.woa-contact-character img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important; /* override editor-injected aspect-ratio that crops the bear */
    object-fit: unset !important;
}

/* ----------------------------------------------------------------
   Products Query Grid — strip border-radius from featured images.
   Uses a structural selector (featured image as DIRECT child of
   .wp-block-post) so no custom class needed on the Query block.
   News cards are excluded because their image is nested inside
   .woa-news-card, not a direct child.
----------------------------------------------------------------- */
.wp-block-query .wp-block-post > .wp-block-post-featured-image,
.wp-block-query .wp-block-post > .wp-block-post-featured-image img,
.wp-block-query .wp-block-post > .wp-block-post-featured-image a,
.woa-products-grid .wp-block-post-featured-image,
.woa-products-grid .wp-block-post-featured-image img,
.woa-products-grid .wp-block-post-featured-image a {
    border-radius: 0 !important;
}

/* ----------------------------------------------------------------
   Decorative edge birds — News page
   Add "woa-bird-wrap" to a fullwidth Group (position context).
   Add "woa-bird-left" or "woa-bird-right" to an Image block inside.
   Birds sit at the viewport edges regardless of content width.
----------------------------------------------------------------- */
.woa-bird-wrap {
    position: relative;
    overflow: visible;
}

.woa-bird-left {
    position: absolute !important;
    left: calc(50% - 50vw) !important;  /* hard against viewport left edge */
    top: 20px;
    width: 390px !important;
    z-index: 2;
    margin: 0 !important;
    pointer-events: none;
}

.woa-bird-right {
    position: absolute !important;
    right: calc(50% - 50vw + 120px) !important;  /* inset from viewport edge */
    bottom: 0;
    transform: translateY(17%);          /* overlap into the footer */
    width: 300px !important;
    z-index: 100;                        /* above footer stacking context */
    margin: 0 !important;
    pointer-events: none;
}

/* ----------------------------------------------------------------
   Upcoming Products — centred content section
   Apply "woa-products-center" to the inner Group block containing
   the heading, paragraph and button.
----------------------------------------------------------------- */
.woa-products-center {
    max-width: 560px;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Hide edge birds on mobile to prevent overflow */
@media (max-width: 781px) {
    .woa-bird-left,
    .woa-bird-right {
        display: none !important;
    }
}