/**
 * Shortcode [gas_activites_masonry]
 * Layout : CSS Grid — rangées à hauteur fixe, colonnes irrégulières
 * Dépend de gas-design-tokens.css
 *
 * NOTE : spécificité doublée (.gas-masonry .gas-masonry__xxx)
 * pour contrer les overrides du thème sur img/a.
 */

/* =============================================
   CONTAINER — grille 12 colonnes, hauteur fixe par rangée
   ============================================= */

.gas-masonry {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 220px;
    gap: var(--gas-space-m);
    max-width: 960px;
    margin: 0 auto;
}

/* =============================================
   ITEM — spécificité doublée
   ============================================= */

.gas-masonry .gas-masonry__item {
    display: block;
    position: relative;
    border-radius: var(--gas-radius-l);
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    min-height: 0;
    max-height: none;
    height: auto;
}

/* =============================================
   LARGEURS via grid-column span
   Ligne 1 : 3 + 5 + 4 = 12
   Ligne 2 : 5 + 4 + 3 = 12
   ============================================= */

.gas-masonry .gas-masonry__item--1 { grid-column: span 3; }
.gas-masonry .gas-masonry__item--2 { grid-column: span 5; }
.gas-masonry .gas-masonry__item--3 { grid-column: span 4; }
.gas-masonry .gas-masonry__item--4 { grid-column: span 5; }
.gas-masonry .gas-masonry__item--5 { grid-column: span 4; }
.gas-masonry .gas-masonry__item--6 { grid-column: span 3; }

/* =============================================
   IMAGE — absolute, couvre 100% de la cellule grid
   Spécificité doublée pour contrer le thème
   ============================================= */

.gas-masonry .gas-masonry__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: none;
    max-width: none;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

/* Imagify enveloppe <img> dans <picture> — cibler le <img> intérieur */
.gas-masonry .gas-masonry__image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gas-masonry .gas-masonry__item:hover .gas-masonry__image,
.gas-masonry .gas-masonry__item:hover .gas-masonry__image img {
    transform: scale(1.05);
}

/* =============================================
   OVERLAY — titre au survol
   ============================================= */

.gas-masonry .gas-masonry__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    padding: var(--gas-space-m);
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.3) 40%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gas-masonry .gas-masonry__item:hover .gas-masonry__overlay,
.gas-masonry .gas-masonry__item:focus .gas-masonry__overlay {
    opacity: 1;
}

/* =============================================
   TITLE
   ============================================= */

.gas-masonry .gas-masonry__title {
    margin: 0;
    font-size: var(--gas-text-m);
    font-weight: var(--gas-weight-semibold);
    color: var(--gas-white);
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transform: translateY(8px);
    transition: transform 0.3s ease;
}

.gas-masonry .gas-masonry__item:hover .gas-masonry__title {
    transform: translateY(0);
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 640px) {
    .gas-masonry {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 150px;
        gap: var(--gas-space-s);
    }

    /* 2 par ligne : 3+3, 4+2, 2+4 */
    .gas-masonry .gas-masonry__item--1 { grid-column: span 3; }
    .gas-masonry .gas-masonry__item--2 { grid-column: span 3; }
    .gas-masonry .gas-masonry__item--3 { grid-column: span 4; }
    .gas-masonry .gas-masonry__item--4 { grid-column: span 2; }
    .gas-masonry .gas-masonry__item--5 { grid-column: span 2; }
    .gas-masonry .gas-masonry__item--6 { grid-column: span 4; }

    .gas-masonry .gas-masonry__item {
        border-radius: var(--gas-radius-m);
    }

    .gas-masonry .gas-masonry__title {
        font-size: var(--gas-text-s);
    }

    .gas-masonry .gas-masonry__overlay {
        padding: var(--gas-space-s);
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .gas-masonry {
        grid-auto-rows: 180px;
    }
}

/* Touch devices — overlay toujours visible */
@media (hover: none) {
    .gas-masonry .gas-masonry__overlay {
        opacity: 1;
    }

    .gas-masonry .gas-masonry__title {
        transform: translateY(0);
    }
}