/* ==========================================================================
   KB Home Femmes (Section 09) — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-home-femmes. All values driven by tokens.css.

   Composition (final, redesigned as a true testimonial section):
     Centered 1140px editorial split. The LEFT column (~340px) carries
     the eyebrow → editorial H2 → a short Gold hairline → intro copy,
     with a bottom-left editorial tag (Gold vertical hairline + 2-line
     small uppercase label) pushed to the bottom of the column.

     The RIGHT column hosts a 2×2 editorial grid of four SOFT LUXURY
     testimonial cards. Each card is a real card (thin 1px Gold border,
     Porcelain ground, no shadow, no radius) that pairs a real portrait
     <img> on the LEFT with a text composition on the RIGHT. Inside the
     text column:
       - large Gold opening quotation mark
       - the testimonial quote (Raleway italic, Ink)
       - a short Gold hairline (decorative)
       - the client name (Raleway, Ink, large)
       - the city (Montserrat uppercase, Gold, letter-spaced)
       - the creation / year line (Montserrat body, muted Ink)

   Section spacing (locked):
     Section 09 owns the 100px TOP gap to Section 08 only. NO bottom
     padding. The 100px-top-only architecture is preserved.

   Elementor contract: every portrait is a real <img> selected through
   a MEDIA content control. No inline style="background-image:..." is
   ever emitted by the widget. All visual layering lives here in the
   child-theme CSS. Figures have NO background, padding, border, radius
   or shadow.

   No "review card" tropes: no star ratings, no icons other than the
   editorial quotation marks, no heavy shadows, no rounded boxes, no
   generic ecommerce styling. The only graphical elements are the
   thin Gold card border, the short Gold hairlines, the vertical
   hairline beside the bottom tag, and the large Gold opening quote.
   ========================================================================== */

/* Section root — owns the 100px TOP gap to Section 08 only. Lives
   inside the canonical 1140px content frame. No full-bleed escape. */
.kb-home-femmes {
    position: relative;
    width: min(
        calc(100% - 2 * var(--kb-gutter-desktop)),
        var(--kb-content-width)
    );
    max-width: var(--kb-content-width);
    margin-inline: auto;
    background-color: var(--kb-porcelain);
    color: var(--kb-ink);
    overflow: hidden;
    padding-top: var(--kb-section-space-desktop);
}

/* ==========================================================================
   Desktop inner — Section 09
   Two-column grid:
     340px intro column | 60px gap | 1fr cards column
   align-items: stretch so the intro column matches the cards column's
   height — the bottom-left tag is then pushed to the bottom via
   margin-top: auto on the .kb-home-femmes__tag element.
   ========================================================================== */
.kb-home-femmes__inner {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    column-gap: 60px;
    align-items: stretch;
}

/* ==========================================================================
   INTRO COLUMN (left)
   The column is a flex column so .kb-home-femmes__tag can be pushed
   to the bottom via margin-top: auto. The .kb-home-femmes__intro-top
   wrapper owns the eyebrow / title / hairline / intro copy stack
   and naturally sits at the top of the column.
   ========================================================================== */
.kb-home-femmes__intro {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-block: 8px;
    min-width: 0;
}

.kb-home-femmes__intro-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Eyebrow — unified across Sections 02–09. Montserrat 12px / 500 /
   uppercase / 0.18em / Gold. */
.kb-home-femmes__eyebrow {
    margin: 0 0 var(--kb-space-l) 0;
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--kb-gold);
}

.kb-home-femmes__eyebrow-text {
    display: inline-block;
}

/* Editorial H2 — Raleway, Ink, non-italic. */
.kb-home-femmes__title {
    margin: 0 0 var(--kb-space-m) 0;
    font-family: var(--kb-font-display);
    font-size: 48px;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.005em;
    color: var(--kb-ink);
    font-style: normal;
    text-wrap: balance;
    white-space: pre-line;
    max-width: 12ch;
}

/* Short Gold hairline under the title — restrained decorative
   element that ties the editorial intro to the cards block. */
.kb-home-femmes__intro-rule {
    display: block;
    width: 48px;
    height: 1px;
    background: var(--kb-gold);
    margin: 0 0 var(--kb-space-l) 0;
    opacity: 0.9;
}

/* Intro copy — Montserrat 15px / 400 / line-height 1.7 / Ink.
   white-space: pre-line so the editor-supplied line breaks are
   honored. NO monogram, NO logo beneath. */
.kb-home-femmes__intro-text {
    margin: 0;
    max-width: 340px;
    font-family: var(--kb-font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--kb-ink);
    white-space: pre-line;
    text-wrap: pretty;
}

/* Bottom-left editorial tag — pushed to the bottom of the intro
   column via margin-top: auto. A thin Gold vertical hairline sits
   to the LEFT of the two-line small uppercase label. */
.kb-home-femmes__tag {
    margin-top: auto;
    padding: var(--kb-space-xl) 0 0 22px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.kb-home-femmes__tag::before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--kb-space-xl);
    bottom: 4px;
    width: 1px;
    background: var(--kb-gold);
    opacity: 0.9;
}

.kb-home-femmes__tag-line {
    display: block;
    font-family: var(--kb-font-body);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--kb-gold);
    font-style: normal;
}

/* ==========================================================================
   CARDS GRID (right) — 2 × 2 editorial grid of testimonial cards.
   Each cell is a real card. The four cells share the parent reveal
   group; they are NEVER animated individually.
   ========================================================================== */
.kb-home-femmes__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 24px;
    align-content: start;
    min-width: 0;
}

/* ==========================================================================
   CARD — soft luxury treatment
   - Subtle 6px border radius for a refined, editorial feel
   - Soft directional ambient shadow from the LEFT side ONLY
     (negative x offset, zero y offset, large blur with low opacity).
     No top, right, or bottom shadow — avoids any clipped edges and
     gives a very subtle left-side depth.
   - Thin 1px Gold border (low opacity for restraint)
   - Porcelain background (same as section ground — the border is the
     sole structural differentiator so the card never feels "boxed")
   - Inner layout: portrait (LEFT) + card-body (RIGHT), flex row
   ========================================================================== */
.kb-home-femmes__card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background-color: var(--kb-porcelain);
    border: 1px solid color-mix(in srgb, var(--kb-gold) 38%, transparent);
    border-radius: 6px;
    box-shadow:
        -6px 0 24px rgba(0, 0, 0, 0.06),
        -2px 0 6px rgba(0, 0, 0, 0.04);
    margin: 0;
    padding: 0;
    overflow: hidden;
    min-width: 0;
}

/* Portrait — left side of the card. Fixed proportion (~38%) of the
   card width. Height is a definite ~240px desktop so the four cards
   read as a coherent set. object-fit: cover. */
.kb-home-femmes__portrait {
    position: relative;
    flex: 0 0 38%;
    min-height: 240px;
    margin: 0;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--kb-bordeaux) 6%, var(--kb-porcelain));
}

.kb-home-femmes__portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Placeholder surface for the editor canvas / pre-asset state. */
.kb-home-femmes__portrait-placeholder {
    position: absolute;
    inset: 0;
    display: block;
    background: linear-gradient(135deg, var(--kb-bordeaux) 0%, var(--kb-ink) 100%);
}

/* Card body — right side
   Two stacked groups: top = quote (mark + text), bottom = meta
   (hairline + name + city + year). The body uses justify-content:
   space-between so the quote sits at the top of the body and the
   meta is pinned to the bottom — matching the reference composition. */
.kb-home-femmes__card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px 26px;
    gap: 18px;
}

.kb-home-femmes__card-quote {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

/* Quotation mark — a real <img> rendered from a MEDIA control
   (uploadable SVG / image, same asset used across all 4 cards).
   Width is fixed; height is auto so the natural aspect ratio is
   preserved. object-fit: contain ensures the full mark is shown
   even if the uploaded asset isn't perfectly square. No transform,
   no scale, no horizontal compression. */
.kb-home-femmes__quote-mark {
    display: block;
    width: 38px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
    margin: 0 0 14px 0;
}

/* Quote — Raleway italic, Ink. The line breaks from the editor
   are honored via the <br> rendered in PHP. */
.kb-home-femmes__quote {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--kb-font-display);
    font-size: 15px;
    font-weight: 300;
    font-style: italic;
    line-height: 1.5;
    color: var(--kb-ink);
    text-wrap: pretty;
}

.kb-home-femmes__quote-text {
    display: inline;
}

/* Closing quotation mark — sits at the end of the quote text in
   the same italic style. The opening mark is the large decorative
   element above. */
.kb-home-femmes__quote-text::after {
    content: "\201D";
}

/* Card meta — name, city, year stacked at the bottom of the body. */
.kb-home-femmes__card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

/* Short Gold hairline above the name. */
.kb-home-femmes__rule {
    display: block;
    width: 28px;
    height: 1px;
    background: var(--kb-gold);
    margin: 0 0 10px 0;
    opacity: 0.9;
}

/* Client name — Raleway, non-italic, Ink. */
.kb-home-femmes__name {
    margin: 0;
    font-family: var(--kb-font-display);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--kb-ink);
    font-style: normal;
    text-wrap: balance;
}

/* City — Montserrat uppercase, Gold, letter-spaced. */
.kb-home-femmes__city {
    margin: 4px 0 0 0;
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--kb-gold);
    font-style: normal;
}

/* Creation / year — Montserrat body, muted Ink. */
.kb-home-femmes__year {
    margin: 2px 0 0 0;
    font-family: var(--kb-font-body);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: color-mix(in srgb, var(--kb-ink) 78%, transparent);
    font-style: normal;
}

/* ==========================================================================
   Tablet (≤ 1199px)
   Cards keep 2×2. Title scales down. Card padding tightens.
   Portrait minimum height drops slightly.
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-home-femmes {
        padding-top: var(--kb-section-space-tablet);
    }

    .kb-home-femmes__inner {
        grid-template-columns: 300px minmax(0, 1fr);
        column-gap: 48px;
    }

    .kb-home-femmes__title {
        font-size: 42px;
    }

    .kb-home-femmes__cards {
        column-gap: 20px;
        row-gap: 20px;
    }

    .kb-home-femmes__card-body {
        padding: 20px 22px;
        gap: 14px;
    }

    .kb-home-femmes__portrait {
        min-height: 210px;
    }

    .kb-home-femmes__quote-mark {
        width: 32px;
        margin: 0 0 12px 0;
    }

    .kb-home-femmes__quote {
        font-size: 14px;
    }

    .kb-home-femmes__name {
        font-size: 22px;
    }
}

/* ==========================================================================
   Mobile (≤ 767px) — single-column editorial stack
   Intro column first, then the 2x2 grid collapses to a single column.
   Each card switches to a COLUMN layout: image full-width on top,
   card body below. Cards remain readable, quotes remain visible.
   ========================================================================== */
@media (max-width: 767px) {
    .kb-home-femmes {
        padding-top: var(--kb-section-space-mobile);
    }

    .kb-home-femmes__inner {
        grid-template-columns: 1fr;
        row-gap: 40px;
        column-gap: 0;
    }

    .kb-home-femmes__intro,
    .kb-home-femmes__cards {
        padding-inline: var(--kb-gutter-mobile);
    }

    .kb-home-femmes__eyebrow {
        font-size: 11px;
        margin-bottom: var(--kb-space-m);
    }

    .kb-home-femmes__title {
        font-size: 36px;
        line-height: 1.1;
        max-width: none;
    }

    .kb-home-femmes__intro-text {
        max-width: none;
    }

    .kb-home-femmes__tag {
        padding-top: var(--kb-space-l);
    }

    .kb-home-femmes__tag::before {
        top: var(--kb-space-l);
    }

    .kb-home-femmes__cards {
        grid-template-columns: 1fr;
        row-gap: 18px;
    }

    .kb-home-femmes__card {
        flex-direction: column;
    }

    .kb-home-femmes__portrait {
        flex: 0 0 auto;
        width: 100%;
        min-height: 0;
        height: 320px;
    }

    .kb-home-femmes__card-body {
        padding: 24px;
    }

    .kb-home-femmes__quote-mark {
        width: 36px;
        margin: 0 0 14px 0;
    }

    .kb-home-femmes__name {
        font-size: 22px;
    }

    .kb-home-femmes__quote {
        font-size: 14px;
    }
}

/* ==========================================================================
   SCROLL REVEAL — Section 09
   Two reveal groups: intro column and cards grid. All four cards
   move as ONE block; they are never animated individually.
   ========================================================================== */
.kb-home-femmes__intro[data-kb-reveal="fade-up"] {
    transition-delay: 80ms;
    transition-duration: 950ms;
    --kb-reveal-distance: 22px;
}

.kb-home-femmes__cards[data-kb-reveal="fade-up"] {
    transition-delay: 160ms;
    transition-duration: 950ms;
    --kb-reveal-distance: 22px;
}

@media (max-width: 767px) {
    .kb-home-femmes__intro[data-kb-reveal="fade-up"],
    .kb-home-femmes__cards[data-kb-reveal="fade-up"] {
        --kb-reveal-distance: 14px;
        transition-duration: 800ms;
    }
}

/* Tablet (768–1024px) — middle typography point for the title. */
@media (min-width: 768px) and (max-width: 1024px) {
    .kb-home-femmes__title {
        font-size: 40px;
    }
}