// ==========================================================================
// ProjectDetail Page Layout Styles
// Project showcase page template: header (title + client/category meta), hero image,
// content blocks (text/text-image/gallery), and "related projects" footer.
// BEM Methodology: .project-detail (Block) → .project-detail__element
//
// Modeled on assets/styles/pages/_actualite.scss (same mixins, same edit-mode outline
// pattern) — see "Repeatable Block Templates (Exception)" in
// spec-driven-development/rules/section-component-architecture.md. No dedicated mask SVGs
// exist yet for ProjectDetail: reuses Actualité's mountain-mask assets (same visual
// language) rather than duplicating near-identical artwork.
// ==========================================================================

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

$project-detail-title-size: 36px;
// Hero title overlaid on the featured image (node 409-624) reuses .page-hero__title but at
// a larger, photo-legible scale than the generic page-hero band — fluid between the H2 token
// (mobile) and a fixed desktop ceiling rather than a single fixed size, per the responsive
// requirement.
$project-detail-hero-title-size: clamp(#{$font-size-h2}, 6vw, 80px);
// Height of the torn/wavy bottom-mask band already hardcoded on `.project-detail__hero-image`
// below (`mask-size: 100% 80px`) — reused here so the hero overlay's bottom padding clears the
// masked strip instead of letting the title/tags get visually clipped by it.
$project-detail-hero-mask-height: 80px;

// --------------------------------------------------------------------------
// Block: .project-detail
// --------------------------------------------------------------------------
.project-detail {
    width: 100%;
    position: relative;
    z-index: 1;

    .container {
        padding-top: 0;
    }
}

// --------------------------------------------------------------------------
// Element: .project-detail__bg
// Fixed mountain-mask background, color interpolated $color-primary-lighter →
// $color-neutral on scroll by assets/project-detail.ts (GSAP ScrollTrigger).
// --------------------------------------------------------------------------
.project-detail__bg {
    @include fixed-mountain-bg('../../images/actualite-mountain-mask-v2.svg', $color-primary-lighter);
}

// --------------------------------------------------------------------------
// Element: .project-detail__hero-image
// Torn/wavy bottom edge, same technique as .actualite-page__hero-image.
// --------------------------------------------------------------------------
.project-detail__hero-image {
    width: 100%;
    position: relative;
    margin-bottom: $spacing-xl;
    border-bottom: 1px solid color-mix(in srgb, $color-primary 30%, transparent);

    &::after {
        content: "";
        height: 1px;
        width: 100%;
        background: $color-primary-dark;
        position: absolute;
        bottom: calc(-1px - #{$spacing-xl});
        left: 0;
    }
}

.project-detail__hero-img {
    width: 100%;
    // 100% = hauteur du ratio choisi (cadrage) ; sans ratio le parent est en auto → hauteur naturelle.
    height: 100%;
    object-fit: cover;
    display: block;
}

// --------------------------------------------------------------------------
// Element: .project-detail__hero-overlay
// Title + subtitle + tag pills (node 409-624), stacked bottom-left directly on top of the
// hero image instead of rendering above it in a separate `.page-hero` band. A scrim gradient
// keeps the light text legible over any photo; bottom padding clears the parent's torn-edge
// mask band so text never sits inside the masked-out strip.
// --------------------------------------------------------------------------
.project-detail__hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: $spacing-md;

    @media (min-width: $breakpoint-md) {
        padding: $spacing-lg;
    }

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(to top, color-mix(in srgb, $color-dark 70%, transparent) 0%, color-mix(in srgb, $color-dark 25%, transparent) 45%, transparent 75%);
    }

    // Override the generic, centered `.page-hero` band styling for this left-aligned,
    // photo-overlaid context. Scoped under `.project-detail__hero-overlay` rather than
    // changing `.page-hero`/`.page-hero__title--lato` themselves, since those are shared with
    // Actualité (see components/_page-hero.scss, templates/pages/actualite.html.twig).
    .page-hero {
        width: 100%;
        align-items: flex-start;
        padding: 0;
        margin-bottom: 0;
        border-bottom: none;
        text-align: left;
    }

    .page-hero__ico {
        display: none;
    }

    .page-hero__title {
        text-align: left;
        color: $color-light;
        font-family: $font-family-serif;
        font-size: $project-detail-hero-title-size;

        @media (min-width: $breakpoint-md) {
            font-size: $project-detail-hero-title-size;
        }
    }

    .page-hero__subtitle {
        text-align: left;
        color: $color-light;
        max-width: 42ch;
        font-family: $font-family-sans;
        font-weight: 400;
        font-size: $font-size-h3;
        line-height: 130%;
        letter-spacing: 0%;
    }
}

// --------------------------------------------------------------------------
// Element: .project-detail__hero-tags
// Tag pill list (Page<->Tag relation, TagPicker.ts), rendered as filled light pills so they
// read clearly over a photo — overrides the default `.tag` outline style (see
// components/_tag.scss).
// --------------------------------------------------------------------------
.project-detail__hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-xs;
    margin-top: $spacing-sm;
}

.project-detail__hero-tag.tag {
    background: $color-light;
    color: $color-primary-dark;
    border: none;

    &::before,
    &::after {
        content: none;
    }
}

// --------------------------------------------------------------------------
// Element: .project-detail__blocks / __add-block
// --------------------------------------------------------------------------
.project-detail__blocks {
    display: flex;
    flex-direction: column;
    max-width: $breakpoint-blog;
    margin-left: auto;
    margin-right: auto;
}

.project-detail__add-block {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-sm;
    max-width: $breakpoint-blog;
    margin: $spacing-md auto 0;
}

// --------------------------------------------------------------------------
// Modifier: .project-detail--edit-mode
// Same inline-edit outline treatment as .actualite-page--edit-mode.
// --------------------------------------------------------------------------
.project-detail--edit-mode {
    .page-hero__title,
    .page-hero__subtitle,
    .project-detail__meta-item--client,
    .project-detail__description,
    .actualite-block__title,
    .actualite-block__subtitle,
    .actualite-block__body,
    .project-detail-info__title,
    .project-detail-info__text,
    .project-detail-info__item-label,
    .project-detail-info__item-value,
    .project-detail-block-paragraphs-image__paragraph-title,
    .project-detail-block-paragraphs-image__paragraph-subtitle,
    .project-detail-block-paragraphs-image__paragraph-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;
            }
        }
    }
}

// ==========================================================================
// Gallery block (components/_project-detail-block-gallery.html.twig)
// BEM Methodology: .project-detail-block-gallery (Block) → __element
// ProjectDetail-only block type, no Actualité equivalent.
// ==========================================================================

.project-detail-block-gallery__title {
    margin-bottom: $spacing-md;
}

.project-detail-block-gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: $spacing-md;
}

.project-detail-block-gallery__item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: color-mix(in srgb, $color-primary 5%, transparent);
}

.project-detail-block-gallery__item.is-editable {
    cursor: grab;

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

.project-detail-block-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-detail-block-gallery__remove {
    position: absolute;
    top: $spacing-xs;
    left: $spacing-xs;
    z-index: 1;
    border: none;
    border-radius: $radius-sm;
    background-color: color-mix(in srgb, $color-dark 60%, transparent);
    color: $color-light;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;

    &:hover {
        background-color: color-mix(in srgb, $color-dark 85%, transparent);
    }
}

.project-detail-block-gallery__add {
    margin-top: $spacing-md;
}

// ==========================================================================
// "Le projet" info block (components/_project-detail-info.html.twig)
// BEM Methodology: .project-detail-info (Block) → __element
// Top-level content field group (decision (a)), always exactly one instance directly under
// the hero — see spec-driven-development/project-detail-redesign.md. Framed top/bottom by
// horizontal rules; left column is title + rich text (quote-style left accent border), right
// column is a label/value definition list.
// ==========================================================================

.project-detail-info {
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: $spacing-lg;
    max-width: $breakpoint-blog;
    margin: 0 auto $spacing-xl;
    padding: $spacing-lg 0;
    border-top: 1px solid color-mix(in srgb, $color-primary 30%, transparent);

    @media (min-width: $breakpoint-md) {
        flex-direction: row;
        gap: $spacing-xl;
        padding: $spacing-xl 0;
    }
}

.project-detail-info__left {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: $spacing-md;
    border-bottom: 1px solid color-mix(in srgb, $color-primary 30%, transparent);
    padding-bottom: $spacing-lg;

    @media (min-width: $breakpoint-md) {
        width: 60%;
        border-bottom: none;
        padding-bottom: 0;
    }
}

.project-detail-info__title {
    margin: 0;
    font-family: $font-family-serif;
    font-weight: 400;
    color: $color-primary-dark;
    font-size: $font-size-h2;

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

.project-detail-info__text {
    display: flex;
    flex-direction: column;
    gap: $spacing-sm;
    border-left: 1px solid $color-primary;
    padding-left: $spacing-md;
    font-family: $font-family-sans;
    font-size: $font-size-base;
    color: $color-primary-dark;
    line-height: $line-height-base;

    p {
        margin: 0;
    }
}

.project-detail-info__right {
    min-width: 0;
    display: flex;
  flex-direction: column;
  justify-content: end;

    @media (min-width: $breakpoint-md) {
        width: 40%;
    }
}

.project-detail-info__items {
    margin: 0;
}

.project-detail-info__item {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: $spacing-sm;
    padding: $spacing-sm 0;
    border-bottom: 1px solid $color-primary;
}

.project-detail-info__item-label {
    margin: 0;
    font-family: $font-family-sans;
    font-size: $font-size-base;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: $color-primary-dark;
    font-weight: 400;
    line-height: 160%;
    letter-spacing: 0%;
    text-transform: uppercase;
}

.project-detail-info__item-value {
    margin: 0;
    font-family: $font-family-sans;
    font-size: $font-size-base;
    font-weight: 700;
    color: $color-primary-dark;
    text-align: right;
    margin-left: auto;
    font-style: bold;
    line-height: 160%;
    letter-spacing: 0%;
}

.project-detail-info__item-remove {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: color-mix(in srgb, $color-primary-dark 60%, transparent);
    cursor: pointer;
    font-size: $font-size-base;
    line-height: 1;
    padding: $spacing-xs;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(110%, -50%);

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

.project-detail-info__item-handle {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-110%, -50%);
    padding: $spacing-xs;
    color: color-mix(in srgb, $color-primary-dark 60%, transparent);
    cursor: grab;
    font-size: $font-size-base;
    line-height: 1;
    letter-spacing: -0.2em;
    user-select: none;

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

    &:active {
        cursor: grabbing;
    }
}

.project-detail-info__item.is-dragging {
    opacity: 0.4;
}

.project-detail-info__add {
    margin-top: $spacing-md;
}

// ==========================================================================
// paragraphs-image block (components/_project-detail-block-paragraphs-image.html.twig)
// BEM Methodology: .project-detail-block-paragraphs-image (Block) → __element
// ProjectDetail-only block type. Reuses Expertise's `.expertise-list` grid/sticky/
// aspect-ratio layout shell (see components/_expertise-list.scss, imported by
// assets/project-detail.ts) for the two-column structure — only paragraph-specific
// typography and the repeatable add/remove controls stay block-local below.
// ==========================================================================

.project-detail-block-paragraphs-image {
    width: 100%;
    max-width: $breakpoint-blog;
    margin: 0 auto;
    padding: $spacing-lg 0;

    @media (min-width: $breakpoint-md) {
        padding: $spacing-xl 0;
    }
}

.project-detail-block-paragraphs-image__paragraphs {
    display: flex;
    flex-direction: column;
    gap: $spacing-lg;
}

.project-detail-block-paragraphs-image__paragraph {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: $spacing-sm;
}

.project-detail-block-paragraphs-image__paragraph-title {
    margin: 0;
    font-family: $font-family-serif;
    font-weight: 400;
    color: $color-primary-dark;
    font-size: $project-detail-title-size;

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

.project-detail-block-paragraphs-image__paragraph-subtitle {
    margin: 0;
    font-family: $font-family-sans;
    font-size: $font-size-lg;
    font-weight: 700;
    color: $color-primary-dark;
}

.project-detail-block-paragraphs-image__paragraph-text {
    margin: 0;
    border-left: 1px solid color-mix(in srgb, $color-primary 30%, transparent);
    padding-left: $spacing-md;
    font-family: $font-family-sans;
    font-size: $font-size-base;
    color: $color-primary-dark;
    line-height: $line-height-base;

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

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

.project-detail-block-paragraphs-image__paragraph-remove {
    align-self: flex-start;
    border: none;
    background: transparent;
    color: color-mix(in srgb, $color-primary-dark 60%, transparent);
    cursor: pointer;
    font-size: $font-size-base;
    line-height: 1;
    padding: $spacing-xs;

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

.project-detail-block-paragraphs-image__add {
    margin-top: $spacing-md;
    align-self: flex-start;
}

// ==========================================================================
// before-after block (components/_project-detail-block-before-after.html.twig)
// BEM Methodology: .project-detail-block-before-after (Block) → __element
// ProjectDetail-only block type. Static container/handle/label styling only — the
// interactive `clip-path` drag behavior lives in assets/components/before-after-slider.ts
// (decision (c) in the redesign plan) and is not touched here.
// ==========================================================================

.project-detail-block-before-after {
    // `.actualite-block` (shared class also present on this element) makes it a flex column
    // item of `.project-detail__blocks`. Flex items default to `min-width: auto`, which for
    // an item containing an `aspect-ratio` box resolves to that box's content-based min size
    // rather than 0 — without this override the item refuses to shrink below that size and
    // overflows the container on narrow viewports instead of stretching to 100% width.
    min-width: 0;
    width: 100%;
    // max-width: $breakpoint-blog;
    margin: 0 auto;
    padding: $spacing-lg 0;

    @media (min-width: $breakpoint-md) {
        padding: $spacing-xl 0;
    }
}

.project-detail-block-before-after__container {
    position: relative;
    width: 100%;
    min-height: 320px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: color-mix(in srgb, $color-primary 8%, transparent);

    @media (min-width: $breakpoint-md) {
        aspect-ratio: 16 / 7.5;
    }

    // Bottom scrim so the "Avant"/"Après" labels stay legible over any pair of photos,
    // regardless of the current clip position (uniform across the full width, so it never
    // shifts or doubles up at the divider line).
    &::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        background: linear-gradient(to top, color-mix(in srgb, $color-dark 55%, transparent) 0%, transparent 35%);
    }
}

.project-detail-block-before-after__layer {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.project-detail-block-before-after__layer--after {
    z-index: 2;
    // Fallback for the pre-JS/no-JS paint: matches BeforeAfterSlider's DEFAULT_PERCENT (50)
    // so the slider still reads correctly before assets/components/before-after-slider.ts
    // mounts and takes over via inline style.
    clip-path: inset(0 50% 0 0);

    .editable-image__tooltip {
        left: 8px;
        right: auto;
    }
}

.project-detail-block-before-after__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-detail-block-before-after__label {
    position: absolute;
    z-index: 4;
    bottom: $spacing-sm;
    color: $color-light;
    font-family: $font-family-serif;
    font-weight: 400;
    font-size: $font-size-h4;
    pointer-events: none;

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

.project-detail-block-before-after__label--before {
    left: $spacing-sm;

    @media (min-width: $breakpoint-md) {
        left: $spacing-md;
    }
}

.project-detail-block-before-after__label--after {
    right: $spacing-sm;

    @media (min-width: $breakpoint-md) {
        right: $spacing-md;
    }
}

// Divider handle: draggable affordance (assets/components/before-after-slider.ts drives
// `left` + `clip-path` inline on pointer/keyboard interaction). Sized to the WCAG 2.1 AA
// minimum touch target (~44px) with a visible grab cursor and a double-arrow icon, per the
// redesign plan's explicit accessibility requirement for this control.
.project-detail-block-before-after__handle {
    position: absolute;
    z-index: 5;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: color-mix(in srgb, $color-light 80%, transparent);
    cursor: grab;
    touch-action: none;

    &:active {
        cursor: grabbing;
    }

    &:focus-visible {
        outline: 2px solid $color-light;
        outline-offset: 2px;
    }

    // The draggable "knob": centered on the divider line, 44px minimum hit target.
    &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: color-mix(in srgb, $color-light 90%, transparent);
        border: 1px solid $color-primary;
    }
}

.project-detail-block-before-after__handle-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    font-family: $font-family-sans;
    font-size: $font-size-base;
    line-height: 1;
    color: $color-primary-dark;
    pointer-events: none;

    &::before {
        content: '\2194'; // ↔ — visual "drag horizontally" affordance
    }
}

// ==========================================================================
// "Projets suivants" related footer card (components/_project-detail-card.html.twig)
// BEM Methodology: .project-detail-related__card (Block) → __element
// Full-bleed overlay card: image fills the card, category badge + title sit inside the
// image over a bottom gradient scrim. Sits inside `.actualite-related`/`.actualite-related__cards`
// (dark/primary-color footer band + 2-col grid, reused as-is — see
// templates/components/_project-detail-related.html.twig).
// ==========================================================================

.project-detail-related__card {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}

.project-detail-related__card-image {
    position: relative;
    width: 100%;
    height: 280px;
    background-color: color-mix(in srgb, $color-light 10%, transparent);

    @media (min-width: $breakpoint-md) {
        height: 340px;
    }
}

.project-detail-related__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;

    .project-detail-related__card:hover & {
        transform: scale(1.04);
    }
}

.project-detail-related__card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, color-mix(in srgb, $color-dark 70%, transparent) 0%, color-mix(in srgb, $color-dark 10%, transparent) 45%, transparent 70%);
}

.project-detail-related__card-content {
    position: absolute;
    z-index: 2;
    left: $spacing-sm;
    right: $spacing-sm;
    bottom: $spacing-sm;

    @media (min-width: $breakpoint-md) {
        left: $spacing-md;
        right: $spacing-md;
        bottom: $spacing-md;
    }
}

.project-detail-related__card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-xs;
    margin-bottom: $spacing-xs;
}

.project-detail-related__card-headline {
    margin: 0;
    font-family: $font-family-serif;
    font-weight: 400;
    color: $color-light;
    font-size: $font-size-h4;
    line-height: 1.3;
}