/* ===============================================================
   TDF — Cards "Grid TDF" & "Standard TDF"
   Utilisé par : content-listing-grid-tdf.php, content-listing-standard-tdf.php
   Chargé globalement via inc/customizer-grid-tdf.php (front).
   =============================================================== */

/* ─── Grille parente : on force display:grid quand nos cards sont présentes
   (override le .list-layout flex-column par défaut) ─── */
.list-layout:has(.tdf-listing-card-wrap),
.grid-layout:has(.tdf-listing-card-wrap),
.listings-container:has(.tdf-listing-card-wrap) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 20px !important;
    flex-direction: row !important;
}
@media (max-width: 991px) {
    .list-layout:has(.tdf-listing-card-wrap),
    .grid-layout:has(.tdf-listing-card-wrap),
    .listings-container:has(.tdf-listing-card-wrap) {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 767px) {
    .tdf-mobile-scroll .list-layout:has(.tdf-listing-card-wrap),
    .tdf-mobile-scroll .grid-layout:has(.tdf-listing-card-wrap),
    .tdf-mobile-scroll .listings-container:has(.tdf-listing-card-wrap) {
        display: flex !important;
        grid-template-columns: none !important;
    }
    body:not(.tdf-mobile-scroll-active) .list-layout:has(.tdf-listing-card-wrap),
    body:not(.tdf-mobile-scroll-active) .grid-layout:has(.tdf-listing-card-wrap),
    body:not(.tdf-mobile-scroll-active) .listings-container:has(.tdf-listing-card-wrap) {
        grid-template-columns: 1fr !important;
    }
}

.tdf-listing-card-wrap { display:flex; width:100%; }

/* ─── Variante horizontale (standard_tdf) : image gauche / infos droite (desktop) ─── */
.list-layout:has(.tdf-listing-card-wrap--horiz),
.grid-layout:has(.tdf-listing-card-wrap--horiz),
.listings-container:has(.tdf-listing-card-wrap--horiz) {
    grid-template-columns: 1fr !important;
}
@media (min-width: 768px) {
    .tdf-listing-card--horiz { flex-direction: row !important; }
    .tdf-listing-card--horiz .tdf-card-media {
        flex: 0 0 38%;
        max-width: 38%;
        border-radius: 14px 0 0 14px !important;
        height: auto;
        min-height: 240px;
        align-self: stretch;
    }
    .tdf-listing-card--horiz .tdf-card-media.listing-image-container-nl {
        height: auto;
        border-radius: 14px 0 0 14px !important;
    }
    .tdf-listing-card--horiz .tdf-card-body {
        flex: 1 1 auto;
        padding: 18px 20px;
        justify-content: flex-start;
        gap: 8px;
    }
    .tdf-listing-card--horiz .tdf-card-title { font-size: 17px; -webkit-line-clamp: 2; }
    .tdf-listing-card--horiz .tdf-card-specs { font-size: 13px; }
    .tdf-listing-card--horiz .tdf-card-price { font-size: 17px; }
}
@media (min-width: 992px) {
    .tdf-listing-card--horiz .tdf-card-media {
        flex: 0 0 32%;
        max-width: 32%;
    }
}

/* ─── Card ─── */
.tdf-listing-card {
    position:relative;
    display:flex; flex-direction:column;
    width:100%;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
    transition:transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s, border-color .22s;
    font-family:'Raleway', system-ui, -apple-system, sans-serif;
}
.tdf-listing-card:hover {
    transform:translateY(-3px);
    box-shadow:0 6px 20px rgba(0,0,0,.08);
    border-color:#d1d5db;
}

/* ─── Media (image + carrousel) ─── */
.tdf-listing-card .tdf-card-media {
    position:relative;
    width:100%;
    background:#f1f5f9;
    overflow:hidden;
    border-radius:14px 14px 0 0;
}
.tdf-listing-card .tdf-card-media.listing-image-container-nl {
    height:220px;
}

/* Mini-slider autonome (TDF) */
.tdf-listing-card .slider-wrapper-nl {
    position:relative; width:100%; height:100%; display:block;
}
.tdf-listing-card .slider-wrapper-nl .slider-image-nl {
    position:absolute !important; inset:0 !important;
    top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
    width:100% !important; height:100% !important; object-fit:cover;
    opacity:0; transition:opacity .35s ease !important;
    transform:none !important;
    pointer-events:none;
    display:block !important;
}
.tdf-listing-card .slider-wrapper-nl .slider-image-nl.tdf-active,
.tdf-listing-card .slider-wrapper-nl .slider-image-nl:only-child,
.tdf-listing-card .slider-wrapper-nl:not(.tdf-slider-ready) .slider-image-nl:first-child {
    opacity:1 !important;
}

/* Mobile : pas de carrousel — seule la 1re image, flèches masquées */
@media (max-width: 767px) {
    .tdf-listing-card .slider-wrapper-nl .slider-image-nl { display:none !important; }
    .tdf-listing-card .slider-wrapper-nl .slider-image-nl:first-child { display:block !important; opacity:1 !important; }
    .tdf-listing-card .slider-arrow-nl { display:none !important; }
}

/* Flèches du slider */
.tdf-listing-card .slider-arrow-nl {
    position:absolute; top:50%; transform:translateY(-50%);
    width:30px; height:30px; border-radius:50%;
    background:rgba(255,255,255,.92);
    display:flex; align-items:center; justify-content:center;
    color:#1f2937; font-size:12px;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
    opacity:0; transition:opacity .2s;
    z-index:5; cursor:pointer;
}
.tdf-listing-card:hover .slider-arrow-nl { opacity:1; }
.tdf-listing-card .slider-arrow-nl.left-nl  { left:8px; }
.tdf-listing-card .slider-arrow-nl.right-nl { right:8px; }

/* Badges haut-gauche */
.tdf-listing-card .tdf-card-badges-tl {
    position:absolute; top:10px; left:10px;
    display:flex; gap:5px; flex-wrap:wrap;
    z-index:4; max-width:calc(100% - 60px);
}
.tdf-listing-card .tdf-badge {
    display:inline-flex; align-items:center; gap:4px;
    font-size:10.5px; font-weight:700; letter-spacing:.02em;
    padding:4px 8px; border-radius:999px;
    background:rgba(20,19,31,.85); color:#fff;
    backdrop-filter:blur(4px);
}
.tdf-listing-card .tdf-badge--featured  { background:#f59e0b; color:#fff; }
.tdf-listing-card .tdf-badge--sponsored { background:#7c3aed; color:#fff; }
.tdf-listing-card .tdf-badge i { font-size:9px; }

/* Favori haut-droite */
.tdf-listing-card .tdf-card-fav {
    position:absolute; top:10px; right:10px;
    width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,.95);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 6px rgba(0,0,0,.12);
    z-index:4; cursor:pointer;
    transition:transform .15s;
}
.tdf-listing-card .tdf-card-fav:hover { transform:scale(1.08); }
.tdf-listing-card .tdf-card-fav .fa-heart { font-size:15px; color:#ef4444; }
.tdf-listing-card .tdf-card-fav .fa-regular.fa-heart { color:#6b7280; }

/* Overlay bas (statut + catégorie chip) */
.tdf-listing-card .tdf-card-overlay-bl {
    position:absolute; bottom:10px; left:10px; right:10px;
    display:flex; gap:6px; flex-wrap:wrap; align-items:center;
    z-index:3;
}
.tdf-listing-card .tdf-card-status,
.tdf-listing-card .tdf-card-cat-chip,
.tdf-listing-card .tdf-card-loc {
    display:inline-flex; align-items:center; gap:4px;
    font-size:10.5px; font-weight:700;
    line-height:1.6em;
    letter-spacing:0.1em;
    padding:4px 9px; border-radius:999px;
    background:rgba(20,19,31,.8); color:#fff;
    backdrop-filter:blur(4px);
    text-transform:uppercase;
}
.tdf-listing-card .tdf-card-loc i { font-size:9px; }
.tdf-listing-card .tdf-status--open    { background:#16a34a; }
.tdf-listing-card .tdf-status--warn    { background:#f59e0b; }
.tdf-listing-card .tdf-status--soon    { background:#2563eb; }
.tdf-listing-card .tdf-status--closed  { background:#6b7280; }

/* ─── Body ─── */
.tdf-listing-card .tdf-card-body {
    display:flex; flex-direction:column; gap:6px;
    padding:14px; text-decoration:none; color:inherit;
    flex:1 1 auto;
}
/* Middle (titre + lieu + date) centré verticalement, price-row en bas */
.tdf-listing-card .tdf-card-middle {
    flex:1 1 auto;
    display:flex; flex-direction:column;
    justify-content:center;
    gap:6px;
}
.tdf-listing-card .tdf-card-price-row {
    margin-top:auto;
}
.tdf-listing-card .tdf-card-top {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    min-height:14px;
}
.tdf-listing-card .tdf-card-cat {
    font-size:10.5px; color:#64748b;
    letter-spacing:.05em; text-transform:uppercase; font-weight:700;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tdf-listing-card .tdf-card-rating {
    display:inline-flex; align-items:center; gap:3px;
    font-size:11.5px; font-weight:700; color:#1a202c;
    flex-shrink:0;
}
.tdf-listing-card .tdf-card-rating i { color:#f59e0b; font-size:10px; }

.tdf-listing-card .tdf-card-title {
    font-family:'Poppins', system-ui, sans-serif;
    font-size:15px; font-weight:600; color:#0f172a;
    line-height:1.3; letter-spacing:-.01em;
    margin:0;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
}
.tdf-listing-card .tdf-card-verified,
.tdf-listing-card .tdf-card-instant {
    font-size:13px; vertical-align:middle; margin-left:4px;
}
.tdf-listing-card .tdf-card-verified { color:#16a34a; }
.tdf-listing-card .tdf-card-instant  { color:#f59e0b; }

.tdf-listing-card .tdf-card-specs {
    font-size:12px; color:#475569; line-height:1.4;
    display:flex; align-items:center; gap:5px;
}
.tdf-listing-card .tdf-card-specs i { color:#94a3b8; font-size:11px; }

/* Lieu : 12px ; Date : 14px */
.tdf-listing-card .tdf-card-loc-row {
    font-size:12px; font-weight:600; color:#334155;
}
.tdf-listing-card .tdf-card-loc-row i { font-size:11px; }
.tdf-listing-card .tdf-card-date-row {
    font-size:14px; font-weight:600;
}
.tdf-listing-card .tdf-card-date-row i { font-size:13px; color:inherit; opacity:.85; }

/* Date colorée selon listing_type (même couleur que la chip cat) */
.tdf-listing-card[data-listing-type="event"]       .tdf-card-date-row { color:#da667b; }
.tdf-listing-card[data-listing-type="service"]     .tdf-card-date-row { color:#F59E0B; }
.tdf-listing-card[data-listing-type="classifieds"] .tdf-card-date-row { color:#10B981; }
.tdf-listing-card[data-listing-type="rental"]      .tdf-card-date-row { color:#6366F1; }

.tdf-listing-card .tdf-card-price-row {
    display:flex; align-items:center; justify-content:space-between;
    margin-top:4px; padding-top:8px;
    border-top:1px dashed #e5e7eb;
}
.tdf-listing-card .tdf-card-price {
    font-family:'Poppins', system-ui, sans-serif;
    font-size:15px; font-weight:700; color:#0f172a;
    letter-spacing:-.02em;
}
.tdf-listing-card .tdf-card-cmp {
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:50%;
    background:#f1f5f9; color:#475569;
    transition:transform .2s, background .2s, color .2s;
}
.tdf-listing-card:hover .tdf-card-cmp { transform:translateX(2px); }

/* Palette du cmp selon _listing_type (mêmes couleurs que les chips catégorie) */
.tdf-listing-card[data-listing-type="event"]       .tdf-card-cmp { background:#fdf0f2; color:#da667b; }
.tdf-listing-card[data-listing-type="service"]     .tdf-card-cmp { background:#FFF8E7; color:#F59E0B; }
.tdf-listing-card[data-listing-type="classifieds"] .tdf-card-cmp { background:#ECFDF5; color:#10B981; }
.tdf-listing-card[data-listing-type="rental"]      .tdf-card-cmp { background:#EFF1FF; color:#6366F1; }

.tdf-listing-card[data-listing-type="event"]:hover       .tdf-card-cmp { background:#da667b; color:#fff; }
.tdf-listing-card[data-listing-type="service"]:hover     .tdf-card-cmp { background:#F59E0B; color:#fff; }
.tdf-listing-card[data-listing-type="classifieds"]:hover .tdf-card-cmp { background:#10B981; color:#fff; }
.tdf-listing-card[data-listing-type="rental"]:hover      .tdf-card-cmp { background:#6366F1; color:#fff; }

@media (max-width:767px) {
    .tdf-listing-card .tdf-card-body { padding:12px; gap:5px; }
    .tdf-listing-card .tdf-card-title { font-size:14px; }
    .tdf-listing-card .tdf-card-price { font-size:14px; }
    /* (Pas de "opacity:1" sur les flèches : elles sont déjà display:none ci-dessus.) */
}

/* Compat mobile-scroll : la card prend toute la largeur du conteneur */
.tdf-mobile-scroll .list-layout .tdf-listing-card-wrap .tdf-listing-card {
    height:100%;
}