/* ============================================================
   Leek Food — Cartes de restaurant
   ------------------------------------------------------------
   Styles partagés par la liste des restaurants (restaurants.php)
   et la page « Mes favoris » (favorites.php).

   Historique : ces règles vivaient dans un bloc <style> inline au
   sein de restaurants.php. favorites.php, qui réutilise exactement
   la même carte, n'en héritait donc pas : les vignettes s'affichaient
   en taille naturelle et la grille se cassait. Elles sont ici pour
   qu'une seule définition serve les deux pages.
   ============================================================ */

/* Restaurant Cards */
.resto-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--bg-surface);
    border: 1px solid var(--border);
}

.resto-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1) !important;
}

.resto-cover-wrap {
    position: relative;
    height: 190px;
    overflow: hidden;
}

.resto-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.resto-card:hover .resto-cover-img {
    transform: scale(1.08);
}

.resto-cover-overlay {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
}

/* Badges on cover */
.badge-rating {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    padding: 0.3rem 0.75rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.badge-premium {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    padding: 0.3rem 0.75rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.resto-avatar-overlay {
    position: absolute;
    bottom: -18px;
    left: 16px;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    border: 3px solid var(--bg-surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    background: var(--bg-surface);
    z-index: 2;
}

.resto-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resto-title-link:hover {
    color: var(--primary, #f97316) !important;
}

.resto-meta-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.meta-tag {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-surface-2);
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-xs);
}

.resto-delivery-badge {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-body);
    background: var(--bg-surface-2);
    padding: 0.3rem 0.7rem;
    border-radius: 50px;
    border: 1px solid var(--border);
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Empty Card */
.resto-empty-card {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    border: 1px dashed var(--border-strong);
}

.btn-soft-danger {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger-border);
}
.btn-soft-danger:hover {
    background: var(--danger-bg);
    color: var(--danger);
    filter: brightness(0.96);
}

/* ============================================================
   Ajustement du bouton « favori » sur la carte
   ------------------------------------------------------------
   Le cœur est en bottom-right et non top-right : le coin haut-droit
   est déjà occupé par la pastille de note (.badge-rating) et le coin
   haut-gauche par le badge Premium. Le coin bas-droit est libre, et
   le dégradé de la vignette y assure le contraste.
   ============================================================ */
.resto-cover-wrap .favorite-btn {
    top: auto;
    bottom: 12px;
    right: 12px;
}

/* ============================================================
   Bandeau « À la une » (bannières promotionnelles)
   ------------------------------------------------------------
   Rangée à défilement horizontal, calée sur le scroll-snap : sur
   mobile les vignettes se succèdent au doigt, sur desktop elles
   débordent volontairement pour inviter au défilement.
   Le fond est une photo, donc le texte reste blanc dans les deux
   thèmes — le voile dégradé garantit le contraste.
   ============================================================ */
.promo-strip {
    display: grid;
    grid-auto-flow: column;
    /* minmax(290px, 1fr) : avec une ou deux bannières elles s'étirent pour
       remplir la ligne ; dès qu'elles ne tiennent plus, la largeur mini
       reprend la main et la rangée devient défilable. Un simple
       grid-auto-columns fixe laissait un grand vide à droite. */
    grid-auto-columns: minmax(290px, 1fr);
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem;
    scrollbar-width: thin;
}

/* Sur mobile la colonne pleine largeur empêcherait de voir qu'il y en a
   d'autres : on garde une vignette légèrement plus étroite que l'écran
   pour que la suivante dépasse. */
@media (max-width: 575.98px) {
    .promo-strip {
        grid-auto-columns: min(78vw, 300px);
    }
}

.promo-strip::-webkit-scrollbar {
    height: 6px;
}
.promo-strip::-webkit-scrollbar-thumb {
    background: var(--border-strong, #cbd5e1);
    border-radius: 999px;
}

.promo-card {
    position: relative;
    display: block;
    height: 150px;
    border-radius: 18px;
    overflow: hidden;
    scroll-snap-align: start;
    text-decoration: none;
    background: var(--bg-inset, #f1f5f9);
    box-shadow: 0 2px 10px rgba(15, 23, 42, .08);
    transition: transform .18s ease, box-shadow .18s ease;
}
.promo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .16);
}
.promo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.promo-card__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .18) 55%, rgba(0, 0, 0, 0) 100%);
}

.promo-card__tag {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #334155;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.promo-card__body {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem;
}

.promo-card__name {
    color: #fff;
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.2;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

.promo-card__cta {
    flex: 0 0 auto;
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .38);
    backdrop-filter: blur(4px);
}
.promo-card:hover .promo-card__cta {
    background: rgba(255, 255, 255, .3);
}

@media (prefers-reduced-motion: reduce) {
    .promo-card,
    .promo-card:hover {
        transition: none;
        transform: none;
    }
}