// ==========================================================================
// About Page Layout Styles ("L'agence")
// Figma: node-id=92-1278
// Sections: hero, intro (text+photo), philosophie (gradient band, quote),
// équipe (text+photo), savoir-faire (dark band, skill grid), "c'est quoi
// galta ?" (3 photo/text columns), footer transition mask.
// BEM Methodology: .about-{section} (Block) → .about-{section}__element
// ==========================================================================

@use '../base/variables' as *;

// --------------------------------------------------------------------------
// Block: .about-page
// --------------------------------------------------------------------------
.about-page {
    width: 100%;
    position: relative;
    z-index: 1;
}

// Fixed mountain-mask backdrop, color interpolated $color-primary-lighter → $color-neutral on
// scroll by assets/about.ts (GSAP ScrollTrigger) - same technique as .actualite-page__bg
// in _actualite.scss, reusing the same mountain silhouette asset for visual consistency
// across page templates rather than exporting a bespoke shape for this page.
.about-page__bg {
    position: fixed;
    top: 60vh;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    background-color: $color-primary-lighter;
    // Color driven frame-by-frame by GSAP scrub (assets/about.ts) — the global
    // theme-change fade in base/_reset.scss would fight it and lag the scrub.
    transition: none;
    mask-image: url('../../images/actualite-mountain-mask-v2.svg'), linear-gradient(#000, #000);
    mask-repeat: no-repeat, no-repeat;
    mask-position: top, top;
    mask-size: 100% auto, 100% 100%;
    mask-composite: exclude;
    -webkit-mask-image: url('../../images/actualite-mountain-mask-v2.svg'), linear-gradient(#000, #000);
    -webkit-mask-repeat: no-repeat, no-repeat;
    -webkit-mask-position: top, top;
    -webkit-mask-size: 100% auto, 100% 100%;
    -webkit-mask-composite: destination-out;
}

.about-page__hero-wrap {
    position: relative;
}

// Decorative curved line behind the "L'agence" hero title (about-hero-vector.svg,
// exported from Figma node 143:202). Purely ornamental - hidden on small screens
// to avoid overlapping the wrapped title.
.about-page__hero-decoration {
    display: none;
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-6%);
    width: 465px;
    max-width: 60vw;
    height: 429px;
    background-image: url('../../images/about/about-hero-vector.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    z-index: 0;

    @media (min-width: $breakpoint-lg) {
        display: block;
    }
}

.about-page__hero-wrap .page-hero {
    position: relative;
    z-index: 1;
}

.about-page__hero-wrap .page-hero__title--xl {
    font-size: $font-size-h1;

    @media (min-width: $breakpoint-md) {
        font-size: 96px;
    }
}

// Wavy mountain-mask transition right before the global site footer, reusing
// the same asset/technique as .actualite-related:before in _actualite.scss.
.about-page__footer-mask {
    width: 100%;
    height: calc(#{$footer-mask-height});
    background-color: $color-neutral;
}

// --------------------------------------------------------------------------
// Shared helpers for this file: vertical divider line used between a title
// and its body text throughout the page (intro, équipe, galta columns).
// --------------------------------------------------------------------------
%about-vertical-divider {
    flex-shrink: 0;
    width: 1px;
    align-self: stretch;
    background-color: $color-primary-lighter;
    display: none;

    @media (min-width: $breakpoint-md) {
        display: block;
    }
}

// ==========================================================================
// Section: .about-intro
// ==========================================================================
.about-intro {
    display: flex;
    flex-direction: column;
    gap: $spacing-lg;
    padding: $spacing-xl 0;

    @media (min-width: $breakpoint-lg) {
        flex-direction: row;
        align-items: flex-start;
        gap: $spacing-xl;
    }
}

.about-intro__col--text {
    display: flex;
    flex-direction: column;
    gap: $spacing-lg;
    flex: 1 1 0;
    min-width: 0;
}

.about-intro__title {
    font-family: $font-family-serif;
    font-weight: 400;
    font-size: $font-size-h3;
    line-height: 1.7;
    color: $color-primary-dark;
    margin: 0;

    @media (min-width: $breakpoint-md) {
        font-size: $font-size-h2;
    }
}

.about-intro__body-row {
    display: flex;
    gap: $spacing-lg;
    align-items: stretch;
}

.about-intro__divider {
    @extend %about-vertical-divider;
}

.about-intro__body {
    font-family: $font-family-sans;
    font-size: $font-size-base;
    line-height: $line-height-base;
    color: $color-primary-dark;

    p {
        margin: 0 0 $spacing-sm 0;

        &:last-child {
            margin-bottom: 0;
        }
    }
}

.about-intro__col--image {
    flex-shrink: 0;
    width: 100%;

    @media (min-width: $breakpoint-lg) {
        width: 394px;
    }
}

.about-intro__image {
    position: relative;
    width: 100%;
    height: 340px;
    overflow: hidden;
    background-color: color-mix(in srgb, $color-primary-dark 6%, transparent);

    @media (min-width: $breakpoint-lg) {
        height: 568px;
    }
}

.about-intro__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

// ==========================================================================
// Section: .about-philosophie (full-width gradient band)
// ==========================================================================
.about-philosophie {
    width: 100%;
    padding: $spacing-xl 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: $spacing-lg;
}

.about-philosophie__title {
    font-family: $font-family-serif;
    font-weight: 400;
    font-size: $font-size-h2;
    color: $color-primary-dark;
    text-align: center;
    margin: 0;
    margin-right: auto;

    @media (min-width: $breakpoint-md) {
        font-size: 64px;
    }
}

.about-philosophie__row {
    width: 100%;
    max-width: $breakpoint-wrapper;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: $spacing-lg;
    align-items: center;

    @media (min-width: $breakpoint-lg) {
        flex-direction: row;
        align-items: stretch;
    }
}

.about-philosophie__image {
    position: relative;
    flex: 1 1 0;
    width: 100%;
    min-height: 320px;
    overflow: hidden;
    background-color: color-mix(in srgb, $color-primary-dark 6%, transparent);

    @media (min-width: $breakpoint-lg) {
        min-height: 560px;
    }
}

.about-philosophie__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-philosophie__col {
    flex: 1 1 0;
    display: flex;
    gap: $spacing-lg;
    align-items: flex-end;
}

.about-philosophie__divider {
    @extend %about-vertical-divider;
}

.about-philosophie__content {
    display: flex;
    flex-direction: column;
    gap: $spacing-lg;
    min-width: 0;
}

.about-philosophie__quote {
    font-family: $font-family-sans;
    font-size: $font-size-base;
    line-height: $line-height-base;
    color: $color-primary-dark;

    p {
        margin: 0 0 $spacing-sm 0;

        &:last-child {
            margin-bottom: 0;
        }
    }
}

.about-philosophie__author-name {
    font-family: $font-family-serif;
    font-weight: 400;
    font-size: $font-size-h3;
    color: $color-primary-dark;
    margin: 0;
}

.about-philosophie__author-role {
    font-family: $font-family-sans;
    font-weight: 700;
    font-size: $font-size-lg;
    color: $color-primary-dark;
    margin: $spacing-xs 0 0 0;
}

// ==========================================================================
// Section: .about-equipe
// ==========================================================================
.about-equipe {
    width: 100%;
    max-width: $breakpoint-wrapper;
    margin: 0 auto;
    padding: $spacing-xl 0;
}

.about-equipe__row {
    display: flex;
    flex-direction: column-reverse;
    gap: $spacing-lg;
    align-items: center;

    @media (min-width: $breakpoint-lg) {
        flex-direction: row;
        align-items: stretch;
    }
}

.about-equipe__col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: $spacing-md;
    min-width: 0;
}

.about-equipe__title {
    font-family: $font-family-serif;
    font-weight: 400;
    font-size: $font-size-h2;
    color: $color-primary-dark;
    text-align: center;
    margin: 0;

    @media (min-width: $breakpoint-md) {
        font-size: 64px;
        text-align: left;
    }
}

.about-equipe__body-row {
    display: flex;
    gap: $spacing-lg;
    align-items: stretch;
    padding: 0 $spacing-xl 0 $spacing-lg;
}

.about-equipe__divider {
    @extend %about-vertical-divider;
}

.about-equipe__body {
    font-family: $font-family-sans;
    font-size: $font-size-base;
    line-height: $line-height-base;
    color: $color-primary-dark;

    p {
        margin: 0 0 $spacing-sm 0;

        &:last-child {
            margin-bottom: 0;
        }
    }
}

.about-equipe__image {
    position: relative;
    width: 100%;
    height: 260px;
    flex-shrink: 0;
    overflow: hidden;
    background-color: color-mix(in srgb, $color-primary-dark 6%, transparent);

    @media (min-width: $breakpoint-lg) {
        width: 394px;
        height: 311px;
    }
}

.about-equipe__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

// ==========================================================================
// Section: .about-savoir-faire (full-width dark band)
// ==========================================================================
.about-savoir-faire {
    position: relative;
    width: 100%;
    background-color: $color-primary;
    padding: $spacing-xl $spacing-md $spacing-xl;
    // padding: $spacing-xl $spacing-md $spacing-xl * 1.8;
    display: flex;
    flex-direction: column;
    gap: $spacing-lg;

    @media (min-width: $breakpoint-lg) {
        padding: $spacing-xl $spacing-xl $spacing-xl;
        // padding: $spacing-xl $spacing-xl $spacing-xl * 1.8;
    }

    &:before {
        content: "";
        position: absolute;
        display: block;
        width: 100%;
        bottom: 100%;
        left: 0;
        height: $footer-mask-height;
        background-color: $color-primary;
        mask-image: url("../../images/footer-mountain-mask.svg");
        mask-size: auto 100%;
        mask-position: center bottom;
        mask-repeat: repeat-x;
        -webkit-mask-image: url("../../images/footer-mountain-mask.svg");
        -webkit-mask-size: auto 100%;
        -webkit-mask-position: center bottom;
        -webkit-mask-repeat: repeat-x;
        transform: translateY(1px);
        z-index: 1;
    }
}

.about-savoir-faire__header {
    display: flex;
    flex-direction: column;
    gap: $spacing-md;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    margin-bottom: $spacing-lg;

    @media (min-width: $breakpoint-md) {
        flex-direction: row;
        text-align: left;
    }
}

.about-savoir-faire__title {
    font-family: $font-family-serif;
    font-weight: 400;
    font-size: $font-size-h2;
    color: $color-neutral;
    margin: 0;

    @media (min-width: $breakpoint-md) {
        font-size: 64px;
    }
}

.about-savoir-faire__link {
    display: inline-flex;
    align-items: center;
    gap: $spacing-xs;
}

.about-savoir-faire__link-icon {
    flex-shrink: 0;
}

.about-savoir-faire__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: $spacing-lg $spacing-md;

    @media (min-width: $breakpoint-md) {
        grid-template-columns: repeat(3, 1fr);
    }
}

.about-savoir-faire__item {
    display: flex;
    gap: $spacing-sm;
    align-items: stretch;
    padding-left: $spacing-md;
}

.about-savoir-faire__item-divider {
    flex-shrink: 0;
    width: 1px;
    background-color: color-mix(in srgb, $color-primary-lighter 50%, transparent);
}

.about-savoir-faire__item-label {
    font-family: $font-family-sans;
    font-weight: 700;
    font-size: $font-size-lg;
    color: $color-neutral;
    margin: 0;
}

// ==========================================================================
// Section: .about-galta ("C'est quoi galta ?")
// ==========================================================================
.about-galta {
    position: relative;
    width: 100%;
    background-color: $color-neutral;
    // Vertical padding only: the scrolling line runs edge to edge (see .about-galta__track
    // for the side gutters).
    padding: $spacing-xl 0;
    display: flex;
    flex-direction: column;
    gap: $spacing-lg;

    &:before {
        content: "";
        position: absolute;
        display: block;
        width: 100%;
        bottom: 100%;
        left: 0;
        height: $footer-mask-height;
        background-color: $color-neutral;
        mask-image: url("../../images/footer-mountain-mask.svg");
        mask-size: auto 100%;
        mask-position: center bottom;
        mask-repeat: repeat-x;
        -webkit-mask-image: url("../../images/footer-mountain-mask.svg");
        -webkit-mask-size: auto 100%;
        -webkit-mask-position: center bottom;
        -webkit-mask-repeat: repeat-x;
        transform: translateY(1px);
        z-index: 1;
    }
}

.about-galta__title {
    padding: 0 var(--about-galta-gutter);
    font-family: $font-family-serif;
    font-weight: 400;
    font-size: $font-size-h2;
    color: $color-primary-dark;
    text-align: center;
    margin: 0;

    @media (min-width: $breakpoint-md) {
        font-size: 64px;
    }
}

// Public: pinned by assets/about.ts (HorizontalPinScroll), which scrubs the track sideways
// with the mouse wheel. Without it (reduced motion, nothing to scroll) the viewport is a
// native horizontal scroller; `.is-horizontal-pinned` (added by HorizontalPinScroll) hides
// the overflow so the scrub is the only way to move.
.about-galta__pin {
    --about-galta-gap: #{$spacing-lg};
    // Space before the first item / after the last one, so the line never sticks to the screen edge.
    --about-galta-gutter: clamp(#{$spacing-md}, 8vw, 120px);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: $spacing-lg;

    @media (min-width: $breakpoint-lg) {
        --about-galta-gap: #{$spacing-xl};
    }
}

.about-galta__viewport {
    width: 100%;
    overflow-x: auto;
    // Items are sized against the viewport width (cqw), not the window's.
    container-type: inline-size;
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
    }

    .is-horizontal-pinned & {
        overflow: hidden;
    }
}

// A single grid row: every item gets the height of the tallest one (tallest text + the 25px
// below), and the photos stretch to that same height.
.about-galta__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: stretch;
    gap: var(--about-galta-gap);
    width: max-content;
    padding: 0 var(--about-galta-gutter);
    will-change: transform; // Firefox needs this compositing hint for smooth pinned transforms
}

// One photo + text pair: photo on the left, text on the right (stacked on small screens, where
// the photo is 16/9; beside the text its height follows the tallest text instead).
// Large screens: an item is 60% of the line between the gutters (photo size unchanged, the text
// column gets the extra width), so the next item peeks in; more overflow and are scrubbed sideways.
.about-galta__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: $spacing-md;
    width: 85cqw;

    @media (min-width: $breakpoint-md) {
        flex-direction: row;
        align-items: stretch;
        width: 90cqw;
    }

    @media (min-width: $breakpoint-lg) {
        width: calc((100cqw - 2 * var(--about-galta-gutter)) * 0.6);
    }
}

.about-galta__image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; // stacked layout; items expose no ratio setting
    overflow: hidden;
    background-color: color-mix(in srgb, $color-primary-dark 6%, transparent);

    @media (min-width: $breakpoint-md) {
        flex: 0 0 50%;
        width: 50%;
        // Height = row height (tallest text + 25px, see .about-galta__col); min-height keeps a
        // photo-only or short-text item visible.
        aspect-ratio: auto;
        min-height: 220px;

        @media (min-width: $breakpoint-lg) {
            flex-basis: 46%;
            width: 46%;
        }
    }
}

.about-galta__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
}

.about-galta__col {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    justify-content: flex-start; // text starts at the top, level with the photo
    gap: $spacing-md;

    @media (min-width: $breakpoint-md) {
        // The photo is 25px taller than the tallest text (the row is as tall as the tallest item).
        padding-bottom: 25px;
    }
}

.about-galta__divider {
    width: 100%;
    height: 1px;
    background-color: $color-primary-lighter;
}

.about-galta__text {
    font-family: $font-family-sans;
    font-size: $font-size-base;
    line-height: $line-height-base;
    color: $color-primary-dark;

    p {
        margin: 0 0 $spacing-sm 0;

        &:last-child {
            margin-bottom: 0;
        }
    }
}

// --------------------------------------------------------------------------
// Edit mode of "C'est quoi galta ?": no pin / sideways track, a grid showing every item at
// once (like .project-detail-block-gallery__grid) with a drag handle + remove button per item.
// --------------------------------------------------------------------------
.about-page--edit-mode {
    .about-galta__viewport {
        overflow: visible;
    }

    .about-galta__track {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr));
        align-items: stretch;
        width: auto;
    }

    .about-galta__item {
        width: auto;
        padding: $spacing-xs;
        border: 1px dashed color-mix(in srgb, $color-primary-dark 30%, transparent);

        &.is-dragging {
            opacity: 0.4;
        }
    }

    .about-galta__image.is-empty-image {
        min-height: 220px;
    }
}

.about-galta__item-controls {
    position: absolute;
    top: $spacing-sm;
    left: $spacing-sm;
    z-index: 6;
    display: flex;
    gap: $spacing-xs;
}

.about-galta__item-handle,
.about-galta__item-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: $radius-sm;
    background-color: $color-light;
    color: $color-primary-dark;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.about-galta__item-handle {
    cursor: grab;
}

.about-galta__item-remove:hover {
    color: $color-secondary-dark;
}

.about-galta__add {
    align-self: center;
    padding: $spacing-xs $spacing-md;
    border: 1px dashed $color-primary-dark;
    border-radius: $radius-sm;
    background: transparent;
    color: $color-primary-dark;
    font-family: $font-family-sans;
    font-size: $font-size-base;
    cursor: pointer;

    &:hover:not(:disabled) {
        background-color: color-mix(in srgb, $color-primary-dark 8%, transparent);
    }

    &:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }
}

// --------------------------------------------------------------------------
// Modifier: .about-page--edit-mode
// Same inline-edit affordance treatment as .actualite-page--edit-mode.
// --------------------------------------------------------------------------
.about-page--edit-mode {
    .page-hero__title,
    .about-intro__title,
    .about-intro__body,
    .about-philosophie__quote,
    .about-philosophie__author-name,
    .about-philosophie__author-role,
    .about-equipe__body,
    .about-savoir-faire__item-label,
    .about-galta__text {
        position: relative;

        &[data-editable="true"] {
            outline: 1px dashed color-mix(in srgb, $color-primary 30%, transparent);
            outline-offset: 4px;
            transition: outline-color 0.2s ease;

            &:hover {
                outline-color: $color-primary;
            }
        }
    }
}