/**
 * AIEO Category Extras — front-end hero block.
 *
 * Mobile-first CSS, two distinct layouts:
 *
 *   Mobile (≤767px) — stacked, no overlaps except title-on-image
 *   ──────────────────────────
 *   ┌────────────────────────┐
 *   │      ΑΡΩΜΑΤΑ            │  ← 50/70 Aeonik Light, title middle
 *   │   ┌──────────────────┐  │     sits on the image's TOP edge
 *   │   │   hero image     │  │
 *   │   └──────────────────┘  │
 *   │     headline (27/31)    │  ← description HIDDEN on mobile
 *   ├────────────────────────┤
 *   │   ───────────────────  │  ← full-width divider
 *   └────────────────────────┘
 *
 *   Desktop (≥768px) — title overlaps image top, body + divider overlap image bottom
 *   ──────────────────────────
 *   ┌─────────────────────────────────────────┐
 *   │            ΑΡΩΜΑΤΑ (117/171)            │  ← title middle on image top edge
 *   │ ┌──────────────────────────────────┐   │
 *   │ │          hero image              │   │
 *   │ │                                  │   │
 *   │ │ headline (LEFT)   description… (RIGHT) │  ← body overlaps image's lower portion
 *   │ │ ──────────────────────────────── │   │  ← divider crosses near image bottom,
 *   │ └──────────────────────────────────┘   │     full viewport width
 *   └─────────────────────────────────────────┘
 *
 * Title overlap mechanic (both breakpoints): negative margin-bottom equal
 * to half the title's line-height pulls the next element (image) up so
 * the title's vertical centre lands flush with the image's top edge.
 * Title sits at z-index:2 to remain readable over the photo.
 *
 * Body + divider overlap (desktop only): position:absolute anchored to
 * the section's bottom. Section height = title-visible + image-height,
 * so anchoring `bottom: <px>` lands within the image's lower portion
 * regardless of image aspect ratio.
 */

.aieo-category-hero {
    /* Single source of truth for the desktop overlap geometry. The body
       columns and divider position derive from these — change here to
       tune the whole hero in one place. */
    --hero-image-max:      1180px;   /* fixed desktop hero box width */
    --hero-image-height:    800px;   /* fixed desktop hero box height */
    --hero-image-overlap:    50px;   /* horizontal overlap of headline/description into image */
    --hero-divider-bottom:  140px;   /* line sits ~18% up from image bottom */
    --hero-body-gap-divider:  60px;  /* taller of headline/description ends this far above the line */
    --hero-body-bottom:     calc(var(--hero-divider-bottom) + var(--hero-body-gap-divider));
    --hero-headline-width:    400px; /* headline text-box width (fixed) */
    --hero-description-width: 450px; /* description text-box width (fixed) */

    margin: 0 0 var(--wp--preset--spacing--6, 40px);
    font-family: var(--wp--preset--font-family--aeonik, "Aeonik Pro", system-ui, sans-serif);
    color: var(--wp--preset--color--fg, #1a1a1a);
}

/* When the FSE template renders the block with align="full", the section
   stretches edge-to-edge of the viewport. Pad the inner content so the
   title, image and body keep some breathing room from the screen edges,
   but leave the divider unpadded so it truly spans the full width. */
.aieo-category-hero.alignfull {
    padding-inline: clamp(16px, 4vw, 80px);
    /* True full-bleed regardless of nesting depth. The block-supports `alignfull`
       only escapes ONE constrained ancestor's padding, so a page-hero placed
       inside a page's constrained <main> + .entry-content (TWO padded levels)
       stays inset/offset (and its divider with it). The 50%-vs-50vw trick escapes
       ALL ancestor padding to the viewport edge; on a top-level archive hero
       (already full width) it resolves to ~0, so there's no change there.
       `!important` is REQUIRED: WordPress core's `.has-global-padding > .alignfull`
       rule has the SAME specificity (0,2,0) and is emitted in later (inline)
       global styles, so without it core wins and re-insets the section by one
       padding — which is exactly the page-hero-vs-category-hero mismatch. */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/* ── Title ─────────────────────────────────────────────────────────── */

/* `--aieo-title-overlap` is half the title's line-height. We change it
   per-breakpoint so the title's vertical centre always lands on the
   image's top edge, regardless of the title's responsive font size. */
.aieo-category-hero__title {
    --aieo-title-overlap: 35px;        /* half of mobile line-height (70px) */
    text-align: center;
    margin: 0 0 calc(0px - var(--aieo-title-overlap));
    position: relative;
    z-index: 2;
}
.aieo-category-hero__title h1 {
    margin: 0;
    font-family: inherit;
    font-weight: 300;            /* Aeonik Light */
    letter-spacing: 0.038em;
    text-transform: uppercase;
    color: inherit;
    /* Mobile typography: fluid via `clamp(min, preferred, max)` so a
       long Greek word like ΕΠΑΓΓΕΛΜΑΤΙΚΕΣ (14 chars) doesn't overflow
       a 360px phone viewport.
         24px floor   — readable even at the narrowest sizes
         9vw preferred — scales smoothly with viewport
         50px ceiling  — matches the design spec on tablets near 560px+
       Combined with `overflow-wrap: anywhere` as a final safety net,
       the title can break a long word across lines if even the
       clamp-shrunk size still wouldn't fit. */
    font-size: clamp(24px, 9vw, 50px);
    line-height: 1.4;             /* same ratio as 70/50 desktop spec */
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

@media (min-width: 768px) {
    .aieo-category-hero__title {
        /* Overlap = half the title line-height, derived from the (now
           box-proportional) title font so the title's vertical centre keeps
           landing on the image's top edge as the font scales. 0.73 = 1.46/2. */
        --aieo-title-overlap: calc(var(--hero-title-fs, 117px) * 0.73);
    }
    .aieo-category-hero__title h1 {
        /* Desktop: 117 / 171 (≈1.46). Scales with the hero box (--hero-title-fs)
           so it stays in proportion to the image at every width. */
        font-size: var(--hero-title-fs, 117px);
        line-height: 1.46;
    }
}

/* ── Image ─────────────────────────────────────────────────────────── */

.aieo-category-hero__image {
    display: block;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    z-index: 1;
    /* Mobile baseline aspect-ratio so an empty image container still
       reserves visual space — desktop overrides below to 1180/800.
       `min-height` is the safety net: if the browser has an aspect-
       ratio quirk on a particular flex/grid context, we still get a
       visible box. */
    aspect-ratio: 1180 / 800;
    min-height: 220px;
}
/* Placeholder treatment for terms with no own AND no inherited image.
   A subtle gradient + a single inline-SVG icon centred in the box,
   sized to the 1180×800 hero box so the layout never collapses. */
.aieo-category-hero__image--placeholder {
    background-color: #f0f0f1;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='96' height='96' fill='none' stroke='%23bbbbbb' stroke-width='1.4'><rect x='3' y='4' width='18' height='16' rx='2'/><circle cx='9' cy='10' r='1.5'/><path d='M3 18 l5-5 l4 4 l3-3 l6 6'/></svg>"),
        linear-gradient(135deg, #f5f5f7 0%, #e7e8ec 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: clamp(56px, 9vw, 110px), cover;
}
.aieo-category-hero__image picture {
    display: block;
    width: 100%;
    height: 100%;
}
.aieo-category-hero__image img.aieo-category-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 768px) {
    /* Desktop: fixed 1180×800 hero box. Explicit `height` instead of
       `aspect-ratio` because some flex/grid contexts (incl. WC's
       product-archive layout) override aspect-ratio and collapse the
       box to its content height — which is zero for an empty
       placeholder. Explicit pixels are unconditional. Any uploaded
       image is scaled and cropped via `object-fit: cover` to fill the
       box, so the overlap geometry stays consistent term-to-term. */
    .aieo-category-hero__image {
        width: 100%;
        max-width: var(--hero-image-max, 1180px);
        height: var(--hero-image-height, 800px);
        aspect-ratio: auto;
        min-height: 0;
    }
}

/* ── Body (headline + description) ─────────────────────────────────── */

.aieo-category-hero__body {
    /* Mobile: normal flow under the image, single column, centred. */
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px 64px;
    margin: 24px 0 32px;
    text-align: center;
    align-items: start;
}

.aieo-category-hero__headline {
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    /* Mobile typography: 27 / 31. */
    font-size: 27px;
    line-height: 31px;
}
.aieo-category-hero__headline p { margin: 0 0 8px; }
.aieo-category-hero__headline p:last-child { margin: 0; }

.aieo-category-hero__description {
    /* Mobile: hidden by spec — only the headline communicates on small
       screens, where vertical real estate is at a premium. */
    display: none;
    font-family: inherit;
    font-weight: 400;
    line-height: 1.22;
    color: var(--wp--preset--color--fg, #1a1a1a);
}
.aieo-category-hero__description p { margin: 0 0 12px; }
.aieo-category-hero__description p:last-child { margin: 0; }

@media (min-width: 768px) {
    /* Section becomes the positioned ancestor for absolute body + divider. */
    .aieo-category-hero {
        position: relative;
        /* RESPONSIVE HERO — UNIFORM proportional scale.
           The desktop hero is a fixed 1180×800 composition: a centred image
           with the headline in the LEFT margin and the description in the RIGHT
           margin, overlapping the image edges. To keep ALL of it on-screen at
           every width we scale the WHOLE composition down together as the
           viewport narrows — image width AND height, the text-box widths, the
           overlap/divider/body offsets, and the type. Every dimension below is
           `--hero-image-max × (its design value ÷ 1180)`, so changing the one
           driver scales the hero uniformly: same shape, just smaller, never
           clipped and never a tall sliver.
           --hero-image-max is sized so the (now-scaled) description still clears
           the viewport edge: image_max = 1180/990 × (½ viewport − padding)
           ≈ 59vw − 60px. Capped at the 1180px design width (≥~2100px keeps the
           exact original look), floored at 360px. */
        --hero-image-max: clamp(360px, calc(59vw - 60px), 1180px);
        --hero-image-height:      calc(var(--hero-image-max) * 0.6780);  /* 800 / 1180 */
        --hero-image-overlap:     calc(var(--hero-image-max) * 0.0424);  /* 50 / 1180 */
        --hero-divider-bottom:    calc(var(--hero-image-max) * 0.1186);  /* 140 / 1180 */
        --hero-body-gap-divider:  calc(var(--hero-image-max) * 0.0508);  /* 60 / 1180 */
        /* EQUAL widths → the headline (left) and description (right) extend the
           SAME distance into their margins, so the left/right margins are
           mirror-symmetric at every width. (450/1180; was 400 for the headline,
           which made the right side reach 50px further out than the left.) */
        --hero-headline-width:    calc(var(--hero-image-max) * 0.3814);  /* 450 / 1180 */
        --hero-description-width: calc(var(--hero-image-max) * 0.3814);  /* 450 / 1180 */
        /* Type rides the same scale; floored for readability, capped at design. */
        --hero-title-fs:    clamp(44px, calc(var(--hero-image-max) * 0.0992), 117px);  /* 117 / 1180 */
        --hero-headline-fs: clamp(22px, calc(var(--hero-image-max) * 0.0347), 41px);   /* 41 / 1180 */
        --hero-desc-fs:     clamp(13px, calc(var(--hero-image-max) * 0.0153), 18px);   /* 18 / 1180 */
    }

    /* Body anchored to the section's bottom — its content lands within
       the image's lower portion. The 3-column grid carves out a middle
       column that's `image_max - 2 * overlap` wide, so headline (left
       column) ends `overlap` px past the image's left edge and
       description (right column) starts `overlap` px before the image's
       right edge. min(...) ensures the side columns never collapse below
       100px on narrow desktop viewports. */
    .aieo-category-hero__body {
        position: absolute;
        /* Body is locked onto the image's box: same width, same horizontal
           centre. That way "50px inside the image" is just `overlap` px
           from the body's own edges — independent of viewport width. */
        width: var(--hero-image-max);
        left: 50%;
        transform: translateX(-50%);
        bottom: var(--hero-body-bottom);
        margin: 0;
        gap: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        /* Vertically center headline + description against each other so
           their middles align. The taller item still anchors to the
           body's bottom edge (which is `gap-divider` px above the line). */
        align-items: center;
        text-align: initial;
        z-index: 3;
    }

    .aieo-category-hero__headline {
        /* Left half. Tracked at column's right edge (= body centre =
           image centre). Translate shifts the box LEFT by
           `image_max/2 - overlap` so the right edge lands exactly
           `overlap` px inside the image's left edge. Width is fixed;
           text wraps within. */
        grid-column: 1 / 2;
        justify-self: end;
        transform: translateX(calc(var(--hero-image-overlap) - (var(--hero-image-max) / 2)));
        width: var(--hero-headline-width);
        font-size: var(--hero-headline-fs, 41px);
        line-height: 1.12;
        text-align: right;
    }

    .aieo-category-hero__description {
        display: block;
        /* Right half — mirror of headline. Tracked at column's left
           edge (body centre); translate shifts RIGHT so the box starts
           exactly `overlap` px inside the image's right edge. */
        grid-column: 2 / 3;
        justify-self: start;
        transform: translateX(calc((var(--hero-image-max) / 2) - var(--hero-image-overlap)));
        width: var(--hero-description-width);
        font-size: var(--hero-desc-fs, 18px);
        line-height: 1.22;
        text-align: left;
        margin-left: 0;
    }
}

/* ── Full-width divider ────────────────────────────────────────────── */

/* Mirrors `.ff-product-tabs__section` — 1px solid border-color line.
   Mobile: in normal flow at the bottom of the section.
   Desktop: absolute, anchored just above the image's bottom edge so
   the line crosses the lower portion of the photo. Full viewport width
   on every render. */
.aieo-category-hero__divider {
    border: 0;
    /* Spec: 1px solid black. Use the brand `--fg` token (which is black
       in roosterx-ff) so themes that override it stay consistent. */
    border-top: 1px solid var(--wp--preset--color--fg, #000);
    margin: 0;
    height: 0;
    width: 100%;
}
.aieo-category-hero.alignfull .aieo-category-hero__divider {
    /* Cancel the section's padding-inline so the line lands flush with
       the viewport edges. */
    margin-inline: calc(0px - clamp(16px, 4vw, 80px));
}
.aieo-category-hero:not(.alignfull):not(.alignwide) .aieo-category-hero__divider {
    /* Constrained context — escape the parent's max-width via the
       50%-vs-50vw trick so the divider still spans full width. */
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
}

@media (min-width: 768px) {
    .aieo-category-hero__divider {
        position: absolute;
        bottom: var(--hero-divider-bottom);
        z-index: 2;
    }
    /* Override the alignfull mobile breakout — on desktop we use
       absolute positioning, so margin-inline isn't doing anything;
       use left/right instead so the line still spans the viewport. */
    .aieo-category-hero.alignfull .aieo-category-hero__divider {
        margin-inline: 0;
        left:  calc(0px - clamp(16px, 4vw, 80px));
        right: calc(0px - clamp(16px, 4vw, 80px));
        width: auto;
    }
    .aieo-category-hero:not(.alignfull):not(.alignwide) .aieo-category-hero__divider {
        left:  calc(50% - 50vw);
        right: calc(50% - 50vw);
        margin: 0;
        width: 100vw;
    }
}

/* ── Variants: only one column populated → centre + widen ──────────── */

.aieo-category-hero--no-headline .aieo-category-hero__body,
.aieo-category-hero--no-description .aieo-category-hero__body {
    grid-template-columns: 1fr;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ── Variant: landing — extra airy spacing since no products follow ─ */

.aieo-category-hero--landing {
    margin-bottom: 64px;
}

/* ── Variant: no image — title doesn't need to overlap anything ────── */

.aieo-category-hero--no-image .aieo-category-hero__title {
    --aieo-title-overlap: 0px;
    margin-bottom: 32px;
    position: static;
    z-index: auto;
}

/* ── Subcategory chip strip ───────────────────────────────────────────
 *
 * Rendered by [aieo_category_chips] / <!-- wp:aieo/category-chips /-->.
 * Logic mirrors the legacy femme-fataleV2 sibling/children walker:
 *   • Parent term has its own pill, marked `--parent`, rendered first.
 *   • Active term carries `.is-active` + `aria-current=page` and reads
 *     as a filled pill.
 *   • All other siblings/children are outlined pills.
 *
 * Brand: rounded pills, accent border, accent text. Active = solid
 * accent fill with white text. Hover = filled.
 */

/* Chip values are admin-tunable. The wrapper carries inline custom
   properties from PHP; these `var()` reads pick them up with the
   originally-shipped defaults as fallbacks for any chip that ever
   renders without inline style. */
.aieo-category-chips {
    margin: 24px 0 32px;
    font-family: var(--wp--preset--font-family--aeonik, "Aeonik Pro", system-ui, sans-serif);
    color: var(--aieo-chip-text-color, var(--wp--preset--color--fg, #1a1a1a));
}

.aieo-category-chips__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aieo-chip-gap, 30px 35px);
    justify-content: center;
    /* Default keeps the strip at full width (mobile + tablet behaviour). */
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Desktop constraint: cap at 3/5 of the available width so chips wrap to
   another row once the strip would otherwise span more than 60% of the
   page. Centred, so the wrap point is symmetric on both sides. */
@media (min-width: 768px) {
    .aieo-category-chips__inner {
        max-width: 60%;
    }
}

.aieo-category-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--aieo-chip-padding, 8px 22px);
    border-style: solid;
    border-width: var(--aieo-chip-border-width, 1px);
    border-color: var(--aieo-chip-border-color, var(--wp--preset--color--accent, #F46767));
    border-radius: var(--aieo-chip-border-radius, 0);
    background: transparent;
    color: var(--aieo-chip-text-color, var(--wp--preset--color--fg, #1a1a1a));
    font-size: 16px;
    line-height: 1.25;
    font-weight: 400;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
    white-space: nowrap;
}
.aieo-category-chip:hover,
.aieo-category-chip:focus-visible {
    background: var(--aieo-chip-border-color, var(--wp--preset--color--accent, #F46767));
    color: #ffffff;
    outline: none;
}

/* Active chip = solid accent fill + white text. aria-current acts as a
   second hook so styling survives even if a renderer drops the class. */
.aieo-category-chip.is-active,
.aieo-category-chip[aria-current="page"] {
    background: var(--aieo-chip-border-color, var(--wp--preset--color--accent, #F46767));
    color: #ffffff;
    pointer-events: none;        /* clicking the active chip is a no-op */
    cursor: default;
}

/* Parent (back-up) chip — slightly heavier weight + a trailing arrow
   glyph so the navigation hint reads at a glance. */
.aieo-category-chip--parent {
    font-weight: 500;
}
.aieo-category-chip--parent::before {
    content: "‹ ";
    margin-right: 2px;
    opacity: 0.7;
}

/* When the strip is rendered alignfull, give it the same horizontal
   padding as the hero so it lines up with the rest of the archive. */
.aieo-category-chips.alignfull {
    padding-inline: clamp(16px, 4vw, 80px);
}

/* ── Mobile horizontal slider (opt-in via `--mobile-slider` modifier) ──
 * Pure-CSS scroller (no JS): the inner row stops wrapping and gains
 * native horizontal scroll with touch gestures + a styled scrollbar.
 * Active chip stays click-enabled here so a tap on it does nothing
 * but keep the page; siblings are reachable by drag/swipe. */
@media (max-width: 767px) {
    .aieo-category-chips--mobile-slider .aieo-category-chips__inner {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        align-items: center;
        scrollbar-width: thin;
        scrollbar-color: rgba(0,0,0,0.2) transparent;
        scroll-snap-type: x proximity;
        padding-bottom: 6px;          /* room for scrollbar without clipping focus rings */
        -webkit-overflow-scrolling: touch;
    }
    .aieo-category-chips--mobile-slider .aieo-category-chip {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
    .aieo-category-chips--mobile-slider .aieo-category-chips__inner::-webkit-scrollbar {
        height: 4px;
    }
    .aieo-category-chips--mobile-slider .aieo-category-chips__inner::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.2);
        border-radius: 2px;
    }
    .aieo-category-chips--mobile-slider .aieo-category-chips__inner::-webkit-scrollbar-track {
        background: transparent;
    }
}

@media (max-width: 480px) {
    .aieo-category-chip {
        font-size: 14px;
    }
}

/* --- Linked hero (aieo/blog-hero): image + headline + description link to the
   post, with NO underline + the hero's OWN text colour (never the theme's link
   red), in every state. !important beats the theme's elements.link colour +
   content-link underline. --- */
.aieo-category-hero--linked a,
.aieo-category-hero__media-link,
.aieo-category-hero__text-link {
    color: inherit !important;
    text-decoration: none !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
}
.aieo-category-hero--linked a:hover,
.aieo-category-hero--linked a:focus,
.aieo-category-hero__media-link:hover,
.aieo-category-hero__media-link:focus,
.aieo-category-hero__text-link:hover,
.aieo-category-hero__text-link:focus {
    color: inherit !important;
    text-decoration: none !important;
}
.aieo-category-hero__media-link {
    display: block;
}
.aieo-category-hero--linked .aieo-category-hero__headline a:hover,
.aieo-category-hero--linked .aieo-category-hero__description a:hover {
    opacity: 0.82;
}
.aieo-category-hero--linked .aieo-category-hero__media-link img {
    transition: transform 0.4s ease;
}
.aieo-category-hero--linked .aieo-category-hero__media-link:hover img {
    transform: scale(1.02);
}

/* --- Blog subcategories dropdown (aieo/blog-subcategories) — chip-styled native
   <select>, byte-identical look to aieo/post-related-categories. --- */
.aieo-blog-subcats { width: auto; }
.aieo-blog-subcats__form { margin: 0; }
.aieo-blog-subcats__select {
    width: auto;
    max-width: 100%;
    padding: 7px 28px 7px 12px;
    border: 1px solid var(--wp--preset--color--contrast, #1a1a1a);
    border-radius: 999px;
    background-color: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 0.8rem;
    line-height: 1.2;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='currentColor'><path d='M6 8.5 1.5 4h9z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 9px 9px;
}
.aieo-blog-subcats__select:focus {
    outline: 2px solid var(--wp--preset--color--accent, #1a1a1a);
    outline-offset: 2px;
}

/* ── Category footer hero ────────────────────────────────────────────────
 * Image LEFT, small rich text RIGHT, with the hero divider line cutting across
 * the image near its bottom. The image is a FIXED-WIDTH "viewport" that
 * STRETCHES to (at least) the text's height — width is cover-cropped (hidden),
 * the proper height is shown — so the line always crosses the image while the
 * text sits above it. Block: aieo/category-footer-hero. */
.aieo-category-footer-hero {
    /* Geometry drivers — tune the whole composition from here. */
    --ffh-img-w:       clamp(220px, 26vw, 320px);   /* fixed image column width */
    --ffh-img-min:     clamp(300px, 30vw, 440px);   /* min image height (short text) */
    --ffh-divider-up:  28px;                         /* image slice shown BELOW the line */
    --ffh-body-clear:  56px;                         /* gap below the text before the line */
    --ffh-font:        clamp(13px, 0.9vw, 15px);     /* body type — like the header hero description */

    margin: var(--wp--preset--spacing--6, 40px) 0;
    font-family: var(--wp--preset--font-family--aeonik, "Aeonik Pro", system-ui, sans-serif);
    color: var(--wp--preset--color--fg, #1a1a1a);
}
.aieo-category-footer-hero.alignfull { padding-inline: clamp(16px, 4vw, 80px); }

.aieo-category-footer-hero__inner {
    position: relative;                 /* anchor for the absolute divider */
    display: grid;
    grid-template-columns: var(--ffh-img-w) 1fr;
    column-gap: clamp(28px, 4vw, 64px);
    align-items: stretch;               /* image column grows to the text's height */
}

/* Fixed-width image box on the LEFT that stretches to the row height; the photo
 * cover-fills it (width cropped, height shown). */
.aieo-category-footer-hero__image {
    grid-column: 1;
    align-self: stretch;
    position: relative;
    min-height: var(--ffh-img-min);
    overflow: hidden;
}
.aieo-category-footer-hero__image > img,
.aieo-category-footer-hero__image > picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.aieo-category-footer-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Small body text on the RIGHT, top-aligned; padding-bottom keeps the last line
 * clear of the divider. */
.aieo-category-footer-hero__body {
    grid-column: 2;
    align-self: start;
    font-size: var(--ffh-font);
    line-height: 1.5;
    padding-bottom: var(--ffh-body-clear);
}
.aieo-category-footer-hero__body > :first-child { margin-top: 0; }
.aieo-category-footer-hero__body h1,
.aieo-category-footer-hero__body h2,
.aieo-category-footer-hero__body h3,
.aieo-category-footer-hero__body h4,
.aieo-category-footer-hero__body h5,
.aieo-category-footer-hero__body h6 {
    font-weight: 600;
    line-height: 1.25;
    font-size: calc(var(--ffh-font) * 1.18);
    margin: 1.2em 0 0.35em;
}
.aieo-category-footer-hero__body p  { margin: 0 0 0.85em; }
.aieo-category-footer-hero__body ul,
.aieo-category-footer-hero__body ol { margin: 0 0 0.85em 1.2em; }

/* Divider — absolute, spans the whole block, sits --ffh-divider-up up from the
 * row bottom so it cuts the image's lower edge; the text above clears it. */
.aieo-category-footer-hero__divider {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--ffh-divider-up);
    border: 0;
    border-top: 1px solid var(--wp--preset--color--fg, #000);
    margin: 0;
    height: 0;
    z-index: 2;
}

/* Text reads left-aligned here; legacy footer_text often carries inline
 * `text-align:center` from the old centred block — force left. */
.aieo-category-footer-hero__body,
.aieo-category-footer-hero__body h1, .aieo-category-footer-hero__body h2,
.aieo-category-footer-hero__body h3, .aieo-category-footer-hero__body h4,
.aieo-category-footer-hero__body h5, .aieo-category-footer-hero__body h6,
.aieo-category-footer-hero__body p,  .aieo-category-footer-hero__body li {
    text-align: left !important;
}

/* No-image variant: single column, divider back to normal flow. */
.aieo-category-footer-hero--no-image .aieo-category-footer-hero__inner {
    grid-template-columns: 1fr;
}
.aieo-category-footer-hero--no-image .aieo-category-footer-hero__body { padding-bottom: 0; }
.aieo-category-footer-hero--no-image .aieo-category-footer-hero__divider {
    position: static;
    margin-top: clamp(24px, 3vw, 40px);
}

/* Mobile: stack image over text, divider in normal flow below. */
@media (max-width: 781px) {
    .aieo-category-footer-hero__inner { display: block; }
    .aieo-category-footer-hero__image {
        position: relative;
        min-height: 0;
        max-width: 280px;
        margin: 0 auto 20px;
        aspect-ratio: 3 / 4;
    }
    .aieo-category-footer-hero__body { padding-bottom: 0; }
    .aieo-category-footer-hero__divider { position: static; margin-top: 24px; }
}