/* ==========================================================================
   KB About Section 03 — Une vision de la couture
   Atlasyn × Khaoula Bouabidi

   Full-width immersive dark Bordeaux section with a section
   background image. The background extends to the full viewport
   width. The content remains boxed at 1140px.

   Composition (vertical):
     [ eyebrow              ]
     [ breathing space      ]
     [ manifesto title      ]   (Raleway, Porcelain, very large)
     [ breathing space      ]
     [ pillar 1 ] [ pillar 2 ] [ pillar 3 ]

   Elementor contract:
     - Elementor = content only. No style controls.
     - The background image is exposed as a MEDIA content control
       and rendered into a CSS custom property
       (--kb-about-philosophy-bg) on the section root. The
       background is then applied to a full-bleed decorative
       layer (.kb-about-philosophy__bg) that sits behind the
       content.
     - A dark Bordeaux overlay strength slider (0–85) controls
       the alpha of a second decorative layer.

   No serif. No italic. No "Maison" wording. No decorative eyebrow
   line. No title underline. No cards. No icons. No rounded corners.
   No shadow. No borders around blocks.
   ========================================================================== */

/* ==========================================================================
   Section root — full viewport width, dark base, no outer box.
   The background is rendered through the dedicated decorative
   layer (.kb-about-philosophy__bg) so the section itself is
   neutral and the background can be swapped or removed in one
   place.
   ========================================================================== */
.kb-about-philosophy {
    position: relative;
    width: 100%;
    margin: 100px 0 0 0;
    background-color: var(--kb-bordeaux);
    color: var(--kb-porcelain);
    overflow: hidden;
    isolation: isolate;
    /* Substantial immersive height is achieved through content +
       padding. We anchor generous vertical padding so the section
       feels cinematic without forcing a rigid giant height. */
    padding-block: var(--kb-section-space-desktop);
}

/* Full-bleed decorative background layer — the section background
   image. Sits behind the content via z-index 0. The section
   itself is z-index 1 above it. The background-image URL is
   injected by PHP (from the user-editable Elementor MEDIA
   control) on the style attribute. The decorative layer
   defaults to the dark Bordeaux base color so the section
   reads correctly even when no image is selected. */
.kb-about-philosophy__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--kb-bordeaux);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Restrained dark Bordeaux overlay (the alpha is driven by the
   --kb-about-philosophy-overlay custom property). Default 0.45
   keeps the copy readable while preserving the immersive feel. */
.kb-about-philosophy__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--kb-bordeaux);
    opacity: var(--kb-about-philosophy-overlay, 0.45);
    pointer-events: none;
}

/* Section 03 sits as a "dark process" block in the page flow.
   We need a controlled left-edge fade so the dark block does
   not bleed into adjacent sections. Top fade is handled by
   the parent layout. */

/* ==========================================================================
   Inner container — 1140px centered content frame.
   Sits above the background layer.
   ========================================================================== */
.kb-about-philosophy__inner {
    position: relative;
    z-index: 1;
    width: min(
        calc(100% - 2 * var(--kb-gutter-desktop)),
        var(--kb-content-width)
    );
    max-width: var(--kb-content-width);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}

/* ==========================================================================
   Head — eyebrow + manifesto title
   Vertical breathing room is governed by padding-block on the
   .kb-about-philosophy section so the head/pillars rhythm is
   driven by one source.
   ========================================================================== */
.kb-about-philosophy__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--kb-space-l);
    margin: 0 0 var(--kb-space-major) 0;
    max-width: 1000px;
}

.kb-about-philosophy__eyebrow {
    /* No-op — owned by .kb-section-eyebrow primitive. */
    font-size: 12px;
}

/* Manifesto title — Raleway, Porcelain, non-italic, very large
   editorial scale. Each line is its own <span> so line breaks
   are structural. No divider underneath. No serif. */
.kb-about-philosophy__title {
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: var(--kb-font-display);
    font-size: 44px;
    font-weight: 300;
    font-style: normal;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--kb-porcelain);
    text-transform: none;
    text-wrap: balance;
    max-width: 18ch;
}

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

/* ==========================================================================
   Pillars — 3 equal columns on desktop. Editorial composition:
   no cards, no borders, no backgrounds. Gold number, small Gold
   rule, Montserrat uppercase label in Porcelain, Montserrat
   description in muted Porcelain. They float over the background.
   ========================================================================== */
.kb-about-philosophy__pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 64px;
    row-gap: var(--kb-space-major);
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

.kb-about-philosophy__pillar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--kb-space-s);
    min-width: 0;
}

/* Editorial number — Gold, Raleway, large. */
.kb-about-philosophy__pillar-number {
    display: block;
    font-family: var(--kb-font-display);
    font-size: 32px;
    font-weight: 300;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0;
    color: var(--kb-gold);
    margin-bottom: var(--kb-space-s);
}

/* Short Gold horizontal rule below the number. Restrained. */
.kb-about-philosophy__pillar-rule {
    display: block;
    width: 36px;
    height: 1px;
    background-color: var(--kb-gold);
    margin-bottom: var(--kb-space-m);
}

/* Label — Montserrat, uppercase, Porcelain, tracked. */
.kb-about-philosophy__pillar-label {
    margin: 0 0 var(--kb-space-s) 0;
    font-family: var(--kb-font-body);
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kb-porcelain);
}

/* Description — Montserrat, muted Porcelain, comfortable
   line-height. */
.kb-about-philosophy__pillar-text {
    margin: 0;
    font-family: var(--kb-font-body);
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.65;
    color: var(--kb-porcelain-muted);
    text-wrap: pretty;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.kb-about-philosophy__pillar-text-line {
    display: block;
}

/* ==========================================================================
   TABLET (≤ 1199px)
   80px top spacing. 32px side gutter. Slight grid relaxation so
   the composition stays clean without horizontal overflow.
   Pillars remain in 3 columns if readable. Title scales down.
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-about-philosophy {
        margin-top: 80px;
        padding-block: var(--kb-section-space-tablet);
    }

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

    .kb-about-philosophy__head {
        margin-bottom: var(--kb-space-xl);
    }

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

    .kb-about-philosophy__pillars {
        column-gap: var(--kb-space-l);
    }
}

/* Stack pillars in 2+1 around 900px so the 3-column grid
   remains readable on narrower tablets. */
@media (max-width: 900px) {
    .kb-about-philosophy__pillars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: var(--kb-space-xl);
    }

    .kb-about-philosophy__pillar:last-child {
        grid-column: 1 / 3;
        max-width: 50%;
    }
}

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

   Final mobile order (locked):
     1. eyebrow
     2. manifesto title
     3. pillar 1 — FÉMINITÉ
     4. pillar 2 — JUSTESSE
     5. pillar 3 — INTEMPORALITÉ
   ========================================================================== */
@media (max-width: 767px) {
    .kb-about-philosophy {
        margin-top: 64px;
        padding-block: var(--kb-section-space-mobile);
    }

    .kb-about-philosophy__inner {
        padding-inline: var(--kb-gutter-mobile);
    }

    .kb-about-philosophy__head {
        margin-bottom: var(--kb-space-l);
    }

    .kb-about-philosophy__title {
        font-size: 36px;
        line-height: 1.15;
    }

    .kb-about-philosophy__pillars {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: var(--kb-space-l);
    }

    .kb-about-philosophy__pillar:last-child {
        grid-column: auto;
        max-width: 100%;
    }

    .kb-about-philosophy__pillar-number {
        font-size: 28px;
    }

    .kb-about-philosophy__pillar-rule {
        width: 32px;
    }
}

/* ==========================================================================
   SCROLL REVEAL — Section 03 About Philosophy
   ------------------------------------------------------------
   Two visual groups animate as their own editorial units:
     - head  (eyebrow + manifesto title, ONE object)
     - pillars (all 3 principles, ONE object)
   The reveal system is unchanged. We only bind the existing
   fade-up behaviour to two group nodes.
   ========================================================================== */
.kb-about-philosophy__head[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 28px;
    transition-delay: 0ms;
    transition-duration: 1100ms;
}

.kb-about-philosophy__pillars[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 24px;
    transition-delay: 160ms;
    transition-duration: 1100ms;
}

@media (max-width: 767px) {
    .kb-about-philosophy__head[data-kb-reveal="fade-up"],
    .kb-about-philosophy__pillars[data-kb-reveal="fade-up"] {
        --kb-reveal-distance: 18px;
        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-philosophy__title {
        font-size: 40px;
    }
}