// ==========================================================================
// Actualité Content Block Component
// BEM Methodology: .actualite-block (Block) → .actualite-block__element → .actualite-block--modifier
//
// Mobile stacking (50/50 -> stacked) is driven by a per-block modifier class
// (--mobile-image-before / --mobile-image-after) rather than one global rule,
// since `mobileImagePosition` is independent per block (Decision #6).
// ==========================================================================

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

// Local typography tokens for this component: 36px/18px don't exist in the
// shared heading scale ($font-size-h2 is 40px), so they're declared here
// rather than hardcoded inline, per block/element scoping conventions.
$actualite-block-title-size: 36px;
$actualite-block-subtitle-size: 18px;

// --------------------------------------------------------------------------
// Block: .actualite-block
// --------------------------------------------------------------------------
.actualite-block {
    display: flex;
    flex-direction: column;
    gap: $spacing-md;
    padding: $spacing-lg 0;

    &:last-child {
        border-bottom: none;
    }

    @media (min-width: $breakpoint-md) {
        flex-direction: row;
        // Allows the admin-only editor controls bar (order: -1, flex-basis: 100%,
        // see _editor.scss) to sit on its own line above the image/text row instead
        // of being squeezed into a 3rd column — image + text are 50%/50% (see
        // .actualite-block--text-image below) so they still fill exactly one line.
        flex-wrap: wrap;
        gap: $spacing-lg;
    }

    .link-btn {
        margin-right: auto;
    }
}

// --------------------------------------------------------------------------
// Modifier: .actualite-block--text-only
// --------------------------------------------------------------------------
.actualite-block--text-only {
    flex-direction: column;
}

// --------------------------------------------------------------------------
// Element: .actualite-block__text
// --------------------------------------------------------------------------
.actualite-block__text {
    display: flex;
    flex-direction: column;
    gap: $spacing-sm;
    flex: 1;
    border-top: 1px solid $color-primary-dark;
    padding-top: $spacing-lg;
    padding-bottom: $spacing-lg;
}

// --------------------------------------------------------------------------
// Element: .actualite-block__title
// --------------------------------------------------------------------------
.actualite-block__title {
    font-family: $font-family-serif;
    font-size: $actualite-block-title-size;
    color: $color-primary-dark;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

// --------------------------------------------------------------------------
// Element: .actualite-block__subtitle
// --------------------------------------------------------------------------
.actualite-block__subtitle {
    font-family: $font-family-sans;
    font-size: $actualite-block-subtitle-size;
    font-weight: 700;
    color: $color-primary-dark;
    margin: 0;
}

// --------------------------------------------------------------------------
// Element: .actualite-block__body
// --------------------------------------------------------------------------
.actualite-block__body {
    font-family: $font-family-sans;
    font-size: $font-size-base;
    color: $color-primary-dark;
    line-height: 1.6;

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

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

// --------------------------------------------------------------------------
// Element: .actualite-block__image
// --------------------------------------------------------------------------
.actualite-block__image {
    flex: 1;
    overflow: hidden;
}

// --------------------------------------------------------------------------
// Element: .actualite-block__img
// --------------------------------------------------------------------------
.actualite-block__img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    display: block;

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

// --------------------------------------------------------------------------
// Modifier: .actualite-block--text-image
// Base layout for text+image blocks: desktop 50/50 split.
// --------------------------------------------------------------------------
.actualite-block--text-image {
    .actualite-block__text,
    .actualite-block__image {
        @media (min-width: $breakpoint-md) {
            width: 50%;
        }
    }
}

// --------------------------------------------------------------------------
// Modifier: .actualite-block--image-left
// Desktop: image column first (flex order).
// --------------------------------------------------------------------------
.actualite-block--image-left {
    @media (min-width: $breakpoint-md) {
        .actualite-block__image {
            order: 1;
        }

        .actualite-block__text {
            order: 2;
        }
    }
}

// --------------------------------------------------------------------------
// Modifier: .actualite-block--image-right
// Desktop: image column second (flex order) - mirror of --image-left.
// --------------------------------------------------------------------------
.actualite-block--image-right {
    @media (min-width: $breakpoint-md) {
        .actualite-block__image {
            order: 2;
        }

        .actualite-block__text {
            order: 1;
        }
    }
}

// --------------------------------------------------------------------------
// Modifier: .actualite-block--mobile-image-before
// Mobile: image stacked above text, independent of desktop --image-left/right.
// --------------------------------------------------------------------------
.actualite-block--mobile-image-before {
    @media (max-width: #{$breakpoint-md - 1px}) {
        .actualite-block__image {
            order: 1;
        }

        .actualite-block__text {
            order: 2;
        }
    }
}

// --------------------------------------------------------------------------
// Modifier: .actualite-block--mobile-image-after
// Mobile: image stacked below text, independent of desktop --image-left/right.
// --------------------------------------------------------------------------
.actualite-block--mobile-image-after {
    @media (max-width: #{$breakpoint-md - 1px}) {
        .actualite-block__image {
            order: 2;
        }

        .actualite-block__text {
            order: 1;
        }
    }
}