/*
  LH Projects Block – Frontend styles
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=Jost:wght@300;400&display=swap');

/* ── Base ──────────────────────────────────────────────────────────────── */
.lh-pr {
    --lh-pr-bg:       #0a0a0a;
    --lh-pr-card-bg:  #111111;
    --lh-pr-text:     #ffffff;
    --lh-pr-muted:    #aaaaaa;
    --lh-pr-accent:   #c8a882;
    --lh-pr-tag-bg:   rgba(255,255,255,.1);
    --lh-pr-tag-text: #cccccc;
    --lh-pr-btn-bg:   #ffffff;
    --lh-pr-btn-text: #111111;
    --lh-pr-border:   #222222;
    --lh-pr-gap:      6px;

    font-family: 'Jost', system-ui, sans-serif !important;
    font-size: 16px !important;
    padding: 3rem 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.lh-pr *,
.lh-pr *::before,
.lh-pr *::after {
    box-sizing: border-box !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ACCUEIL — Mosaïque bento
   Layout : 2 rangées, chacune est un flex row
     Rangée 1 : grande (2/3) à gauche  + petite (1/3) à droite
     Rangée 2 : petite (1/3) à gauche  + grande (2/3) à droite
══════════════════════════════════════════════════════════════════════════ */

.lh-pr__mosaic {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    max-width: 1080px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.lh-pr__mosaic-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 0 !important;
    width: 100% !important;
}

.lh-pr__mosaic-row--1 {
    height: 380px !important;
}

.lh-pr__mosaic-row--2 {
    height: 320px !important;
}

/* Item 1 — grande image gauche (2/3) */
.lh-pr__mosaic-item--1 {
    flex: 2 !important;
}

/* Item 2 — petite image droite (1/3) */
.lh-pr__mosaic-item--2 {
    flex: 1 !important;
}

/* Item 3 — petite image gauche (1/3) */
.lh-pr__mosaic-item--3 {
    flex: 1 !important;
}

/* Item 4 — grande image droite (2/3) */
.lh-pr__mosaic-item--4 {
    flex: 2 !important;
}

/* Common mosaic item */
.lh-pr__mosaic-item--1,
.lh-pr__mosaic-item--2,
.lh-pr__mosaic-item--3,
.lh-pr__mosaic-item--4 {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.lh-pr__mosaic-item--1 img,
.lh-pr__mosaic-item--2 img,
.lh-pr__mosaic-item--3 img,
.lh-pr__mosaic-item--4 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.55s ease !important;
    filter: brightness(0.75) !important;
}

.lh-pr__mosaic-item--1:hover img,
.lh-pr__mosaic-item--2:hover img,
.lh-pr__mosaic-item--3:hover img,
.lh-pr__mosaic-item--4:hover img {
    transform: scale(1.06) !important;
    filter: brightness(0.6) !important;
}

/* Dark gradient at bottom for legibility */
.lh-pr__mosaic-item--1::after,
.lh-pr__mosaic-item--2::after,
.lh-pr__mosaic-item--3::after,
.lh-pr__mosaic-item--4::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.2) 45%, transparent 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Caption */
.lh-pr__mosaic-caption {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 1.5rem 1.75rem !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3rem !important;
}

.lh-pr__mosaic-cat {
    display: block !important;
    font-family: 'Jost', system-ui, sans-serif !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,.65) !important;
    line-height: 1.4 !important;
}

.lh-pr__mosaic-title {
    display: block !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    font-style: normal !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
}

.lh-pr__mosaic-cta {
    display: block !important;
    font-family: 'Jost', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    margin-top: 0.75rem !important;
    opacity: 0 !important;
    transform: translateY(6px) !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}

.lh-pr__mosaic-item--1:hover .lh-pr__mosaic-cta,
.lh-pr__mosaic-item--2:hover .lh-pr__mosaic-cta,
.lh-pr__mosaic-item--3:hover .lh-pr__mosaic-cta,
.lh-pr__mosaic-item--4:hover .lh-pr__mosaic-cta {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Responsive mosaïque */
@media (max-width: 680px) {
    .lh-pr__mosaic-row {
        flex-direction: column !important;
        height: auto !important;
    }
    .lh-pr__mosaic-row--1,
    .lh-pr__mosaic-row--2 {
        height: auto !important;
    }
    .lh-pr__mosaic-item--1,
    .lh-pr__mosaic-item--2,
    .lh-pr__mosaic-item--3,
    .lh-pr__mosaic-item--4 {
        flex: none !important;
        height: 240px !important;
        width: 100% !important;
    }
}

@media (min-width: 681px) and (max-width: 900px) {
    .lh-pr__mosaic-row--1 { height: 280px !important; }
    .lh-pr__mosaic-row--2 { height: 240px !important; }
}

/* ── Footer CTA ────────────────────────────────────────────────────────── */
.lh-pr__footer {
    text-align: center !important;
    margin-top: 2rem !important;
}

.lh-pr__cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-family: 'Jost', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #111111 !important;
    background: #ffffff !important;
    border: none !important;
    padding: 0.875rem 2.25rem !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: opacity 0.2s !important;
    line-height: 1.4 !important;
}

.lh-pr__cta-btn:hover {
    opacity: 0.85 !important;
    color: #111111 !important;
    text-decoration: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE RÉALISATIONS — Grille 3 colonnes + filtres
══════════════════════════════════════════════════════════════════════════ */

.lh-pr--page {
    padding: 3rem 1.5rem !important;
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Filter tabs */
.lh-pr__filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin-bottom: 2.5rem !important;
}

.lh-pr__filter-btn {
    font-family: 'Jost', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,.5) !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    padding: 0.5rem 1.25rem !important;
    cursor: pointer !important;
    transition: background 0.2s, color 0.2s, border-color 0.2s !important;
    line-height: 1.4 !important;
}

.lh-pr__filter-btn:hover,
.lh-pr__filter-btn.is-active {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: #ffffff !important;
}

/* Grid */
.lh-pr__grid--page {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--lh-pr-gap) !important;
}

@media (max-width: 720px) {
    .lh-pr__grid--page {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .lh-pr__grid--page {
        grid-template-columns: 1fr !important;
    }
}

.lh-pr__grid-item {
    display: flex !important;
}

.lh-pr__grid-item.is-hidden {
    display: none !important;
}

/* Card */
.lh-pr__card {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    aspect-ratio: 3/4 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.lh-pr__card-img-wrap {
    position: absolute !important;
    inset: 0 !important;
}

.lh-pr__card-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.55s ease !important;
    filter: brightness(0.75) !important;
}

.lh-pr__card:hover .lh-pr__card-img {
    transform: scale(1.06) !important;
    filter: brightness(0.55) !important;
}

/* Gradient overlay */
.lh-pr__card::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(0,0,0,.80) 0%, rgba(0,0,0,.2) 50%, transparent 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.lh-pr__card-caption {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 1.5rem 1.5rem !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3rem !important;
}

.lh-pr__card-cat {
    display: block !important;
    font-family: 'Jost', system-ui, sans-serif !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,.6) !important;
    line-height: 1.4 !important;
}

.lh-pr__card-title {
    display: block !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    font-style: normal !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lh-pr__card-desc {
    display: block !important;
    font-family: 'Jost', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    color: rgba(255,255,255,.7) !important;
    margin: 0.35rem 0 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.35s ease, opacity 0.35s ease !important;
    opacity: 0 !important;
}

.lh-pr__card:hover .lh-pr__card-desc {
    max-height: 80px !important;
    opacity: 1 !important;
}

.lh-pr__card-cta {
    display: block !important;
    font-family: 'Jost', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    margin-top: 0.75rem !important;
    opacity: 0 !important;
    transform: translateY(6px) !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}

.lh-pr__card:hover .lh-pr__card-cta {
    opacity: 1 !important;
    transform: translateY(0) !important;
}