/**
 * 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);
}

/* ── 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 {
        --aieo-title-overlap: 85px;    /* half of desktop line-height (~171px) */
    }
    .aieo-category-hero__title h1 {
        /* Desktop: 117 / 171 (≈1.46), fluid down to 64px on tablets. */
        font-size: clamp(64px, 9vw, 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;
    }

    /* 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: clamp(32px, 3.2vw, 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: 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;
    }
}