/**
 * @package     Academic Suite
 * @subpackage  mod_articles_alaune
 * @copyright   (C) 2025 Institut Lumière Matière (ILM)
 * @license     MIT License
 *
 * Modern card grid with six selectable display modes and configurable aspect ratios.
 *
 * Display modes:
 *   .alaune-mode-hover     Image only, overlay reveals on hover (minimalist).
 *   .alaune-mode-caption   Image + persistent caption bar below (magazine).
 *   .alaune-mode-editorial Image with date badge + title outside (editorial).
 *   .alaune-mode-gradient  Image with permanent gradient + title (Netflix).
 *   .alaune-mode-feature   1 large card + small side cards (newspaper).
 *   .alaune-mode-masonry   Pinterest-style variable height grid.
 *
 * Aspect ratio classes (applied to .alaune-card-media):
 *   .alaune-ratio-1-1   Square
 *   .alaune-ratio-16-9  Landscape (default)
 *   .alaune-ratio-4-3   Classic
 *   .alaune-ratio-3-4   Portrait
 */

/* ====================================================================
   Mojito template reset — neutralise legacy rules from the mojito
   stylesheet (#articles img height:215px, #articles .date absolute,
   #articles h3 color, etc.) that would otherwise break our layout.
   Applied only inside .mod-articles-alaune.
   ==================================================================== */
.mod-articles-alaune,
.mod-articles-alaune * {
    box-sizing: border-box;
}

.mod-articles-alaune article {
    margin-bottom: 0 !important;
}

/* Neutralise mojito's `#articles .date { position:absolute; width:35px; height:46px; ... }` */
.mod-articles-alaune .alaune-card-date {
    position: static !important;
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
    z-index: auto !important;
    top: auto !important;
    left: auto !important;
}

/* Neutralise mojito's `#articles h3 { margin-top:0 }` only on margin-top
   (we set our own margins inside each mode). */
.mod-articles-alaune .alaune-card-title {
    margin-top: 0 !important;
}

/* ====================================================================
   Shared layout & card structure
   ==================================================================== */

/* Force full width — the module sits inside mojito's .row-flex which is
   itself a flex container; without these declarations our grid would collapse
   to its intrinsic content width. */
.mod-articles-alaune {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    flex: 1 1 100% !important;
    margin-left: -10px;
    margin-right: -10px;
    box-sizing: border-box;
}

/* The .alaune-card-wrapper carries Bootstrap col-* classes too; we keep flex
   only for vertical stacking inside the card. The Bootstrap width must stay
   intact, so we do NOT override width here. */
.mod-articles-alaune .alaune-card-wrapper {
    padding: 10px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.mod-articles-alaune .alaune-card {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
    background: #f5f5f5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.mod-articles-alaune .alaune-card:hover,
.mod-articles-alaune .alaune-card:focus {
    text-decoration: none;
    color: inherit;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    transform: translateY(-3px);
}

/* ---------- Aspect ratios (applied to .alaune-card-media) ----------
   We use the padding-bottom trick as the PRIMARY mechanism (works everywhere
   since 2010 with no support gap), then `aspect-ratio` as a no-op enhancement
   for modern browsers. Both !important to defeat any conflicting template CSS. */
.mod-articles-alaune .alaune-card-media {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    overflow: hidden !important;
    /* Safety net: even if everything else fails, the card has a minimum height. */
    min-height: 200px;
}

.mod-articles-alaune.alaune-ratio-1-1  .alaune-card-media { padding-bottom: 100%    !important; }
.mod-articles-alaune.alaune-ratio-16-9 .alaune-card-media { padding-bottom: 56.25%  !important; }
.mod-articles-alaune.alaune-ratio-4-3  .alaune-card-media { padding-bottom: 75%     !important; }
.mod-articles-alaune.alaune-ratio-3-4  .alaune-card-media { padding-bottom: 133.33% !important; }

/* !important on size/position is required to override the mojito template's
   `#articles img { width:100%; height:215px; }` rule (which would otherwise
   crush the image to a 215px-tall band regardless of card size). */
.mod-articles-alaune .alaune-card-media img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    border: 0 !important;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mod-articles-alaune .alaune-card:hover .alaune-card-media img,
.mod-articles-alaune .alaune-card:focus .alaune-card-media img {
    transform: scale(1.06);
}

/* ---------- Shared typography ---------- */
.mod-articles-alaune .alaune-card-title {
    margin: 0;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mod-articles-alaune .alaune-card-revue {
    font-style: italic;
}

/* ====================================================================
   Mode 1: HOVER — overlay only on hover, refined
   ==================================================================== */
.alaune-mode-hover .alaune-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.55) 35%,
        rgba(0, 0, 0, 0.1) 70%,
        rgba(0, 0, 0, 0) 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
}

.alaune-mode-hover .alaune-card:hover .alaune-card-overlay,
.alaune-mode-hover .alaune-card:focus .alaune-card-overlay {
    opacity: 1;
}

.alaune-mode-hover .alaune-card-content {
    padding: 22px 24px 20px;
    color: #ffffff;
    width: 100%;
    transform: translateY(15px);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.alaune-mode-hover .alaune-card:hover .alaune-card-content,
.alaune-mode-hover .alaune-card:focus .alaune-card-content {
    transform: translateY(0);
}

.alaune-mode-hover .alaune-card-date {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 10px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.alaune-mode-hover .alaune-card-title {
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 8px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.alaune-mode-hover .alaune-card-revue {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 768px) {
    .alaune-mode-hover .alaune-card-overlay {
        opacity: 1;
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0.35) 50%,
            rgba(0, 0, 0, 0) 100%
        );
    }
    .alaune-mode-hover .alaune-card-content { transform: translateY(0); }
}

/* ====================================================================
   Mode 2: CAPTION — persistent caption bar
   ==================================================================== */
.alaune-mode-caption .alaune-card {
    background: #ffffff;
    display: flex;
    flex-direction: column;
}

.alaune-mode-caption .alaune-card-caption {
    padding: 14px 16px 16px;
    background: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    flex: 1;
}

.alaune-mode-caption .alaune-card-date {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #69318f;
    margin-bottom: 8px;
}

.alaune-mode-caption .alaune-card-title {
    font-size: 15px;
    color: #1a1a1a;
    -webkit-line-clamp: 3;
    margin-bottom: 6px;
    transition: color 0.25s ease;
}

.alaune-mode-caption .alaune-card:hover .alaune-card-title,
.alaune-mode-caption .alaune-card:focus .alaune-card-title {
    color: #69318f;
}

.alaune-mode-caption .alaune-card-revue {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #888;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease, margin-top 0.3s ease;
}

.alaune-mode-caption .alaune-card:hover .alaune-card-revue,
.alaune-mode-caption .alaune-card:focus .alaune-card-revue {
    opacity: 1;
    max-height: 40px;
    margin-top: 6px;
}

/* ====================================================================
   Mode 3: EDITORIAL — date badge on image, title outside
   ==================================================================== */
.alaune-mode-editorial .alaune-card-editorial {
    background: transparent;
    box-shadow: none;
    border-radius: 4px;
}

.alaune-mode-editorial .alaune-card-editorial:hover,
.alaune-mode-editorial .alaune-card-editorial:focus {
    transform: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.alaune-mode-editorial .alaune-card-media {
    border-radius: 4px;
    overflow: hidden;
}

.alaune-mode-editorial .alaune-card-date-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.95);
    color: #1a1a1a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.alaune-mode-editorial .alaune-card-footer {
    display: block;
    padding: 14px 4px 0;
    text-decoration: none;
    color: inherit;
}

.alaune-mode-editorial .alaune-card-footer:hover,
.alaune-mode-editorial .alaune-card-footer:focus {
    text-decoration: none;
    color: inherit;
}

.alaune-mode-editorial .alaune-card-footer .alaune-card-title {
    font-size: 16px;
    color: #1a1a1a;
    line-height: 1.35;
    margin-bottom: 4px;
    transition: color 0.25s ease;
}

.alaune-mode-editorial .alaune-card-footer:hover .alaune-card-title,
.alaune-mode-editorial .alaune-card-footer:focus .alaune-card-title {
    color: #69318f;
}

.alaune-mode-editorial .alaune-card-footer .alaune-card-revue {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #888;
}

/* ====================================================================
   Mode 4: GRADIENT (Netflix) — permanent gradient + title, refined
   ==================================================================== */
.alaune-mode-gradient .alaune-card-gradient {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px 26px 22px;
    color: #ffffff;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.55) 30%,
        rgba(0, 0, 0, 0.2) 55%,
        rgba(0, 0, 0, 0) 80%
    );
}

.alaune-mode-gradient .alaune-card-title {
    font-size: 18px;
    line-height: 1.3;
    color: #ffffff;
    -webkit-line-clamp: 3;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    margin: 0;
}

.alaune-mode-gradient .alaune-card-meta {
    margin-top: 10px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.alaune-mode-gradient .alaune-card:hover .alaune-card-meta,
.alaune-mode-gradient .alaune-card:focus .alaune-card-meta {
    max-height: 80px;
    opacity: 1;
    margin-top: 14px;
}

.alaune-mode-gradient .alaune-card-date {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.alaune-mode-gradient .alaune-card-revue {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 768px) {
    .alaune-mode-gradient .alaune-card-meta {
        max-height: 80px;
        opacity: 1;
        margin-top: 14px;
    }
}

/* ====================================================================
   Mode 5: FEATURE — 1 large card + small side cards (newspaper style)
   ==================================================================== */
.alaune-mode-feature {
    /* Use a row layout that respects Bootstrap's col-md-X classes */
}

.alaune-mode-feature .alaune-feature-main {
    display: flex;
    flex-direction: column;
}

.alaune-mode-feature .alaune-feature-main .alaune-card {
    flex: 1;
    min-height: 400px;
}

.alaune-mode-feature .alaune-feature-main .alaune-card-media {
    height: 100% !important;
    min-height: 400px;
    padding-bottom: 0 !important;
}

.alaune-mode-feature .alaune-feature-main .alaune-card-title {
    font-size: 24px;
    line-height: 1.25;
    -webkit-line-clamp: 4;
}

.alaune-mode-feature .alaune-feature-side {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.alaune-mode-feature .alaune-feature-side-item {
    padding: 0 0 20px 0;
    flex: 1;
}

.alaune-mode-feature .alaune-feature-side-item:last-child {
    padding-bottom: 0;
}

.alaune-mode-feature .alaune-feature-side-item .alaune-card {
    height: 100%;
}

.alaune-mode-feature .alaune-feature-side-item .alaune-card-media {
    height: 0 !important;
    padding-bottom: 56.25% !important;
    min-height: 0;
}

.alaune-mode-feature .alaune-feature-side-item .alaune-card-title {
    font-size: 14px;
    -webkit-line-clamp: 2;
}

.alaune-mode-feature .alaune-feature-side-item .alaune-card-gradient {
    padding: 14px 16px 14px;
}

@media (max-width: 991px) {
    .alaune-mode-feature .alaune-feature-main .alaune-card {
        min-height: 280px;
    }
    .alaune-mode-feature .alaune-feature-main .alaune-card-title {
        font-size: 18px;
    }
}

/* ====================================================================
   Mode 7: FAITSMARQUANTS — mirrors mod_faitsmarquants visual style
   Date badge top-left on image, violet caption below.
   ==================================================================== */
.alaune-mode-faitsmarquants .alaune-fm-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

.alaune-mode-faitsmarquants .alaune-fm-card:hover,
.alaune-mode-faitsmarquants .alaune-fm-card:focus {
    text-decoration: none;
    color: inherit;
    transform: none;
    box-shadow: none;
}

.alaune-mode-faitsmarquants .alaune-fm-img-wrap {
    position: relative;
    display: block;
    overflow: hidden;
    background: #f0f0f0;
    width: 100%;
}

.alaune-mode-faitsmarquants .alaune-fm-img-wrap::before {
    content: '';
    display: block;
    padding-top: 75%; /* 4:3 ratio, identical to FM */
}

.alaune-mode-faitsmarquants .alaune-fm-img-wrap img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover;
    object-position: center;
    border: 1px solid #cececd !important;
    border-bottom: none !important;
    box-sizing: border-box;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.alaune-mode-faitsmarquants .alaune-fm-card:hover .alaune-fm-img-wrap img,
.alaune-mode-faitsmarquants .alaune-fm-card:focus .alaune-fm-img-wrap img {
    transform: scale(1.04);
}

.alaune-mode-faitsmarquants .alaune-fm-date-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(72, 44, 132, 0.88);
    color: #fff;
    z-index: 2;
    padding: 4px 9px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-align: center;
    border-bottom-right-radius: 2px;
    text-transform: uppercase;
}

.alaune-mode-faitsmarquants .alaune-fm-caption {
    background: rgba(0, 0, 0, 0.08);
    color: #693290;
    text-align: center;
    padding: 8px 6px;
    height: 80px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.alaune-mode-faitsmarquants .alaune-fm-caption-title {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #693290;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alaune-mode-faitsmarquants .alaune-fm-caption-revue {
    margin: 0;
    font-size: 12px;
    font-style: italic;
    font-weight: 700;
    color: #693290;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ====================================================================
   Mode 6: MASONRY — CSS columns, variable heights (Pinterest)
   ==================================================================== */
.alaune-mode-masonry {
    display: block;
}

.alaune-masonry-grid {
    column-count: 3;
    column-gap: 18px;
    width: 100%;
    padding: 0 10px;
}

.alaune-mode-masonry .alaune-masonry-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 18px;
    display: block;
    padding: 0;
}

.alaune-mode-masonry .alaune-card {
    background: #ffffff;
    display: block;
}

.alaune-mode-masonry .alaune-card-media {
    height: auto !important;
    padding-bottom: 0 !important;
    min-height: 0;
}

.alaune-mode-masonry .alaune-card-media img {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
}

.alaune-mode-masonry .alaune-card-caption {
    padding: 14px 16px 16px;
    background: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.alaune-mode-masonry .alaune-card-date {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #69318f;
    margin-bottom: 8px;
}

.alaune-mode-masonry .alaune-card-title {
    font-size: 15px;
    color: #1a1a1a;
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
    margin-bottom: 6px;
    transition: color 0.25s ease;
}

.alaune-mode-masonry .alaune-card:hover .alaune-card-title,
.alaune-mode-masonry .alaune-card:focus .alaune-card-title {
    color: #69318f;
}

.alaune-mode-masonry .alaune-card-revue {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #888;
}

@media (max-width: 991px) {
    .alaune-masonry-grid { column-count: 2; }
}

@media (max-width: 600px) {
    .alaune-masonry-grid { column-count: 1; }
}