/* ==========================================================================
   KB About Craft / Le Savoir-Faire (Section 04) — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-about-craft. All values driven by tokens.css.

   Composition (final):
     Centered 1140px editorial section on a Porcelain ground.

     TOP — 2-column grid (360px copy LEFT | 1fr image RIGHT),
       64px column gap, align-items: start. The eyebrow top is
       visually aligned with the top edge of the main image
       (NOT vertically centered). The right column holds a
       dominant 2-image composition: a large wide main image
       (height 420–460px) and a smaller detail image overlapping
       the LOWER-RIGHT area of the main image (35–40% of the
       main image width). No card, no shadow, no border.

     MIDDLE — 4 equal columns across the full 1140px section
       width. Each column = a Gold number, a Montserrat
       uppercase label, a Montserrat body. Thin Gold vertical
       separators between the 4 columns. NO cards, NO boxes,
       NO icons, NO shadow, NO rounded corners. The principles
       feel integrated into the section, not like UI cards.

     BOTTOM — one thin Gold horizontal rule spanning most of
       the section width, with ONE tiny restrained Gold
       marker at the exact center. Underneath, a large
       centered Raleway non-italic statement. No box around
       it. No ornament beyond the small center marker.

   Section spacing (locked):
     100px desktop / 80px tablet / 64px mobile. TOP-ONLY.
     No bottom padding (the next section owns its own top
     spacing).

   Elementor contract: every image is a real <img> selected
   through a MEDIA content control. No inline
   style="background-image:..." is ever emitted. All visual
   layering lives here in the child-theme CSS.

   No serif. No italic. No "Maison" wording. No decorative
   eyebrow line. No title underline. No ornate icons. No
   principle cards. No botanical ornaments. No rounded
   corners. No shadow.
   ========================================================================== */

/* ==========================================================================
   FULL-BLEED ESCAPE — Section 04
   ------------------------------------------------------------
   The Elementor container that holds this section is reset to
   padding 0 / width 100% so our own section root is the
   single source of truth for the outer dimensions. Mirrors
   the same escape used by the other KB sections.
   ========================================================================== */
.e-con:has(.kb-about-craft) {
    --container-default-width: 100% !important;
    --container-max-width: 100% !important;
    --container-default-padding: 0px !important;
    --container-default-padding-block: 0px !important;
    --container-default-padding-inline: 0px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    padding-block: 0 !important;
}

.e-con:has(.kb-about-craft) > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    --container-default-padding: 0px !important;
    --container-default-padding-block: 0px !important;
    --container-default-padding-inline: 0px !important;
}

/* ==========================================================================
   Section root — 1140px centered, 100px top spacing.
   Porcelain ground. Ink text. No bottom padding.
   ========================================================================== */
.kb-about-craft {
    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);
}

/* Inner — single flex column that carries the three editorial
   blocks: TOP (copy + image), PRINCIPLES (4 columns), ENDING
   (rule + final statement). */
.kb-about-craft__inner {
    width: 100%;
    max-width: var(--kb-content-width);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

/* ==========================================================================
   TOP — 2-column editorial split
     grid-template-columns: 400px minmax(0, 1fr)
     column-gap: 56px
     align-items: stretch — the left copy column and the right
     image composition share ONE row height (the taller of the
     two natural contents). The left column is height: 100% so
     the eyebrow / title / body sit at the top of the shared
     row, and the right image composition is height: 100% so
     the main image fills the full shared row height. The TOP
     of the eyebrow aligns exactly with the TOP of the main
     image because both columns have no top margin/padding.
   ========================================================================== */
.kb-about-craft__top {
    width: 100%;
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    column-gap: 56px;
    align-items: stretch;
    min-width: 0;
}

/* ==========================================================================
   LEFT — editorial copy
   Single flex column carrying eyebrow / title / body. No top
   padding, no extra top margin — so the eyebrow top matches
   the main image top.
   ========================================================================== */
.kb-about-craft__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    /* height: 100% so the copy column fills the shared top-row
       height (driven by the taller of copy vs. image). Content
       sits at the top of the column so the eyebrow top still
       aligns exactly with the main image top. */
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Eyebrow — uses the unified .kb-section-eyebrow primitive
   (Montserrat, Gold, uppercase, 12px / 0.18em / 500). The
   primitive owns the typography; the local class only exists
   for scoping and a tighter bottom margin so the gap to the
   title sits inside the project's 18-24px responsive range. */
.kb-about-craft__eyebrow {
    margin: 0 0 20px 0;
}

/* Title — Raleway, Ink, non-italic. Each line is its own
   <span> so the line breaks are structural (and balanced by
   text-wrap). No underline. No decorative line. No
   uppercase override. Strong editorial scale (Raleway
   display). */
.kb-about-craft__title {
    margin: 0 0 var(--kb-space-m) 0;
    display: flex;
    flex-direction: column;
    font-family: var(--kb-font-display);
    font-size: 44px;
    font-weight: 300;
    font-style: normal;
    line-height: 1.04;
    letter-spacing: -0.01em;
    color: var(--kb-ink);
    text-transform: none;
    text-wrap: balance;
}

.kb-about-craft__title em,
.kb-about-craft__title i {
    font-style: normal;
    color: var(--kb-ink);
}

.kb-about-craft__title-line {
    display: block;
}

/* Body — Montserrat, Ink, comfortable line-height. No serif,
   no italic. */
.kb-about-craft__body {
    display: flex;
    flex-direction: column;
    gap: var(--kb-space-s);
    max-width: 100%;
    width: 100%;
    margin-top: var(--kb-space-s);
}

.kb-about-craft__body p {
    margin: 0;
    font-family: var(--kb-font-body);
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.75;
    color: var(--kb-ink);
    text-wrap: pretty;
}

/* ==========================================================================
   RIGHT — Image composition
   A dominant 2-image editorial composition:
     - main image: large wide, fixed height range, object-fit
       cover, fills 100% of the grid cell.
     - detail image: smaller, absolutely positioned in the
       LOWER-RIGHT area, 35–40% of the main image width,
       slightly outside the lower-right corner (clean editorial
       overlap). No radius, no shadow, no border.
   The container is a relative positioning context. No top
   margin/padding — so the main image top matches the eyebrow
   top.
   ========================================================================== */
.kb-about-craft__media {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 0;
    /* height: 100% so the image composition fills the shared
       top-row height. The main image inside is height: 100% of
       this container. The detail image is absolutely positioned
       over the LOWER-RIGHT and MUST NOT increase the row height
       (it overflows the composition into the Porcelain space on
       the right). */
    height: 100%;
    margin: 0;
    padding: 0;
}

.kb-about-craft__media-main {
    position: relative;
    /* Main image occupies ~80% of the right composition width
       so a Porcelain negative-space band remains on the right
       for the detail image to extend into. height: 100% lets
       the main image fill the full shared top-row height
       without imposing a fixed pixel value. */
    width: 80%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background-color: color-mix(
        in srgb,
        var(--kb-ink) 92%,
        var(--kb-bordeaux)
    );
}

.kb-about-craft__media-main img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Detail image — absolutely positioned over the LOWER-RIGHT
   area of the image composition. Width = 38% of the
   composition. Positioned at right: 0; bottom: 8% of the
   composition height so it overlaps the main image partially
   (~45–55%) and extends into the Porcelain space on the right
   for clear breathing room. */
.kb-about-craft__media-detail {
    position: absolute;
    bottom: 8%;
    right: 0;
    width: 38%;
    aspect-ratio: 4 / 5;
    margin: 0;
    overflow: hidden;
    background-color: color-mix(
        in srgb,
        var(--kb-ink) 92%,
        var(--kb-bordeaux)
    );
    z-index: 2;
}

.kb-about-craft__media-detail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ==========================================================================
   MIDDLE — 4 Principles
   4 equal columns across the full 1140px section width. Thin
   Gold vertical separators BETWEEN the 4 columns. NO cards,
   NO boxes, NO icons, NO shadow, NO rounded corners. The
   principles feel integrated into the section, not like UI
   cards.

   Vertical spacing:
     top composition → principles: ~60px
   ========================================================================== */
.kb-about-craft__principles {
    margin: 60px 0 0 0;
    padding: 0;
    list-style: none;
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0;
    align-items: stretch;
}

.kb-about-craft__principle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
    padding: 0 var(--kb-space-m);
    background-color: transparent;
    border: 0;
    border-radius: 0;
}

/* Thin Gold vertical separator on the leading edge of every
   principle except the first one. The first principle has no
   leading separator so the row sits flush with the left edge
   of the section content. */
.kb-about-craft__principle + .kb-about-craft__principle {
    border-inline-start: 1px solid var(--kb-gold);
}

.kb-about-craft__principle:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
}

.kb-about-craft__principle:last-child {
    padding-inline-end: 0;
}

/* Gold number — Raleway display, Gold, light weight. The
   number sits ABOVE the label with a small em-dash separator
   in the source (e.g. "01 —"). We render the number and the
   em-dash as a single visual unit (Gold, Raleway, light). */
.kb-about-craft__principle-number {
    display: block;
    font-family: var(--kb-font-display);
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 0.05em;
    color: var(--kb-gold);
    margin-bottom: var(--kb-space-s);
}

/* Label — Montserrat uppercase, Bordeaux. */
.kb-about-craft__principle-label {
    margin: 0 0 var(--kb-space-s) 0;
    font-family: var(--kb-font-body);
    font-size: 13px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.3;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kb-bordeaux);
}

/* Description — Montserrat, Ink, comfortable line-height. */
.kb-about-craft__principle-text {
    margin: 0;
    font-family: var(--kb-font-body);
    font-size: 13px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.65;
    color: var(--kb-ink);
    text-wrap: pretty;
}

/* ==========================================================================
   BOTTOM — Editorial ending
   One thin Gold horizontal rule spanning most of the section
   width, with ONE tiny restrained Gold marker (small rotated
   square / diamond) at the exact center. Underneath, a large
   centered Raleway non-italic statement. No box around it.
   No ornament beyond the small center marker.

   Vertical spacing:
     principles → rule:  ~52px
     rule → final:        ~44px
   ========================================================================== */
.kb-about-craft__ending {
    margin-top: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* The rule is a 1px Gold line that spans ~85% of the section
   width. The marker is a small rotated square (8x8px, 45deg)
   sitting on the line at the exact center. */
.kb-about-craft__rule {
    position: relative;
    width: 85%;
    height: 1px;
    background-color: var(--kb-gold);
    margin: 0 0 44px 0;
}

.kb-about-craft__rule-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background-color: var(--kb-gold);
    transform: translate(-50%, -50%) rotate(45deg);
    display: block;
}

/* Final statement — large centered Raleway non-italic Ink. No
   box, no ornament. Two visual lines (rendered with <br> from
   a single \n-separated control). */
.kb-about-craft__final {
    margin: 0;
    font-family: var(--kb-font-display);
    font-size: 40px;
    font-weight: 300;
    font-style: normal;
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--kb-ink);
    text-align: center;
    text-wrap: balance;
    text-transform: none;
    max-width: 28ch;
}

.kb-about-craft__final em,
.kb-about-craft__final i {
    font-style: normal;
    color: var(--kb-ink);
}

/* ==========================================================================
   TABLET (≤ 1199px)
   80px top spacing. 32px side gutter. The TOP grid relaxes
   to 360px / 1fr with 48px gap. The main image keeps
   width: 80% and height: 100% from desktop — the shared
   top-row height is still driven by the taller of copy vs.
   image. Principles keep 4 equal columns. Final statement
   tightens.
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-about-craft {
        padding-top: var(--kb-section-space-tablet);
    }

    .kb-about-craft__top {
        padding-inline: var(--kb-gutter-tablet);
        grid-template-columns: 360px minmax(0, 1fr);
        column-gap: 48px;
    }

    .kb-about-craft__title {
        font-size: 44px;
    }

    .kb-about-craft__body p {
        font-size: 14px;
    }

    .kb-about-craft__final {
        font-size: 32px;
    }

    .kb-about-craft__principles {
        padding-inline: var(--kb-gutter-tablet);
    }
}

/* Stack vertically below 1024px so the two main columns never
   compete for narrow tablet space. The TOP grid collapses to
   a single column; the principles follow below; the ending
   follows the principles. On the stacked layout the main
   image reclaims the full width (no Porcelain band needed
   because the detail image is allowed to sit at the edge). */
@media (max-width: 1024px) {
    .kb-about-craft__top {
        grid-template-columns: 1fr;
        row-gap: var(--kb-space-l);
    }

    .kb-about-craft__media-main {
        width: 100%;
    }

    .kb-about-craft__media-detail {
        right: -16px;
        bottom: -24px;
        width: 32%;
    }
}

/* ==========================================================================
   MOBILE (≤ 767px)
   64px top spacing. 20px side gutter. Single column.

   Final mobile order (locked):
     1. eyebrow
     2. title
     3. body
     4. main image
     5. detail image
     6. 01 LA COUPE
     7. 02 LES MATIÈRES
     8. 03 LES FINITIONS
     9. 04 LE DÉTAIL
     10. bottom statement

   On mobile the detail image stacks BELOW the main image
   (full available width) — no overlap, no clipping.
   Principles stack vertically; vertical separators become
   horizontal TOP separators between items. The bottom rule
   and final statement remain centered.
   ========================================================================== */
@media (max-width: 767px) {
    .kb-about-craft {
        padding-top: var(--kb-section-space-mobile);
    }

    .kb-about-craft__top {
        padding-inline: var(--kb-gutter-mobile);
        row-gap: var(--kb-space-l);
    }

    .kb-about-craft__copy {
        order: 1;
    }

    .kb-about-craft__eyebrow {
        font-size: 12px;
    }

    .kb-about-craft__media {
        order: 2;
    }

    /* On mobile the image composition mirrors the desktop
       composition (scaled down): the detail image becomes a
       floating editorial inset over the LOWER-RIGHT of the
       main image. The wrapper is position: relative (inherited
       from desktop) and reserves enough bottom padding so the
       detail overflow never collides with the principles. */
    .kb-about-craft__media {
        /* Reserve space for the detail image overflow below
           the main image. ~48px keeps the airy editorial gap
           before the principles. */
        padding-bottom: 48px;
    }

    .kb-about-craft__media-main {
        /* Main image dominant, left-aligned (no centering) so
           the detail inset can extend into the Porcelain
           space on the right. */
        width: 88%;
        height: 320px;
    }

    .kb-about-craft__media-detail {
        /* Detail becomes a floating editorial inset over the
           LOWER-RIGHT, matching the desktop visual relationship
           at mobile scale. */
        position: absolute;
        right: 0;
        bottom: -12%;
        width: 50%;
        aspect-ratio: 4 / 5;
        margin: 0;
        z-index: 2;
    }

    .kb-about-craft__title {
        font-size: 36px;
    }

    .kb-about-craft__body p {
        font-size: 14px;
    }

    /* Principles — single column. No vertical line, no full
       borders. Only one small left-aligned horizontal divider
       between each item. Extra top gap before "01" for clean
       breathing room after the image composition. */
    .kb-about-craft__principles {
        margin-top: 72px;
        padding-inline: var(--kb-gutter-mobile);
        grid-template-columns: 1fr;
        row-gap: 0;
    }

    .kb-about-craft__principle {
        padding: 0;
        border: 0;
        border-radius: 0;
        border-inline-start: 0;
        border-top: 0;
        border-left: 0;
    }

    /* The desktop rule .kb-about-craft__principle + ... sets
       border-inline-start: 1px solid var(--kb-gold) and has
       higher specificity (0,2,0) than .kb-about-craft__principle
       (0,1,0). We MUST override it with the same selector
       pattern on mobile, otherwise the vertical Gold line
       between principle columns leaks onto the stacked mobile
       list as a continuous left rule. */
    .kb-about-craft__principle + .kb-about-craft__principle {
        border-inline-start: 0;
        border-left: 0;
    }

    /* Small editorial Gold divider on principles 01, 02, 03
       (rendered after each of them so it sits BETWEEN the
       current principle and the next one). No divider after
       04 (last child). */
    .kb-about-craft__principle:not(:last-child)::after {
        content: '';
        display: block;
        width: 110px;
        height: 1px;
        background-color: var(--kb-gold);
        opacity: 0.85;
        margin: 30px 0;
    }

    /* Bottom — diamond marker removed on mobile, divider
       shortened to the SAME width as the principle dividers
       (110px) and left-aligned. Statement left-aligned so both
       align with the principle content left edge. */
    .kb-about-craft__ending {
        margin-top: 40px;
        padding-inline: var(--kb-gutter-mobile);
        align-items: flex-start;
    }

    .kb-about-craft__rule {
        width: 110px;
        margin-inline: 0;
        margin-bottom: 36px;
    }

    /* Hide the desktop center diamond marker on mobile. */
    .kb-about-craft__rule-marker {
        display: none;
    }

    .kb-about-craft__final {
        font-size: 24px;
        max-width: 100%;
        text-align: left;
    }
}

/* ==========================================================================
   SCROLL REVEAL — Section 04 About Craft
   ------------------------------------------------------------
   Three visual groups animate as their own editorial units:
     - left copy (eyebrow / title / body, ONE object)
     - image composition (main + detail, ONE object)
     - principles + ending (ONE object — the bottom block
       reveals as a single group so the rule and statement
       settle together).
   The reveal system is unchanged. We only bind the existing
   fade-up behaviour to the group nodes.
   ========================================================================== */
.kb-about-craft__copy[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 24px;
    transition-delay: 0ms;
    transition-duration: 1000ms;
}

.kb-about-craft__media[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 24px;
    transition-delay: 80ms;
    transition-duration: 1000ms;
}

.kb-about-craft__principles[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 20px;
    transition-delay: 160ms;
    transition-duration: 1000ms;
}

.kb-about-craft__ending[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 20px;
    transition-delay: 220ms;
    transition-duration: 1000ms;
}

@media (max-width: 767px) {
    .kb-about-craft__copy[data-kb-reveal="fade-up"],
    .kb-about-craft__media[data-kb-reveal="fade-up"],
    .kb-about-craft__principles[data-kb-reveal="fade-up"],
    .kb-about-craft__ending[data-kb-reveal="fade-up"] {
        --kb-reveal-distance: 16px;
        transition-duration: 900ms;
    }
}

/* Tablet (768–1024px) — middle point between desktop and mobile.
   Only semantic typography: title 40px. */
@media (min-width: 768px) and (max-width: 1024px) {
    .kb-about-craft__title {
        font-size: 40px;
    }
}