/*
 * Carte produit du menu public.
 * Règles portées depuis le projet initial (`misaju/frontoffice/views/pages/menu/P_Menu.css`,
 * section « Carte produit »). Les variables `--menu-*` / `--a11y-*` sont déclarées par
 * `public/css/pages/P_Menu.css` ; les variables `--misaju-item-*` restent pilotées par le
 * display_template (DisplayTemplatePresenter) et ont donc la priorité quand elles existent.
 */

.menu-items-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    /* `--misaju-items-gap` vient du préréglage de forme (Studio « Rendu global »). */
    gap: var(--misaju-items-gap, 14px);
}

@media (min-width: 620px) {
    .menu-items-wrapper:not(.c-items-grid--cols-1):not(.c-items-grid--cols-3) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.c-items-grid--cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.c-items-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

html[data-a11y-spacing='relaxed'] .menu-items-wrapper {
    gap: 18px;
}

/* ── Carte produit (image en tête, grille) ─────────────────── */

.menu-item {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Largeur à réserver à droite pour ne pas passer sous le badge « voir » :
       son décalage droit (12px) + ses paddings (2 × 9px) + un libellé court en
       11px gras majuscules. Suit `--a11y-scale` comme le badge lui-même. */
    --menu-item-hint-gutter: calc(70px * var(--a11y-scale));
    /* Ordre de priorité : display_template (`--misaju-item-*`) > préréglage de forme du
       Studio (`--misaju-card-*`) > valeur de référence du projet initial. */
    padding: var(--misaju-card-padding, 16px);
    border-color: var(--misaju-item-border-color, var(--menu-border));
    border-width: var(--misaju-item-border-width, var(--misaju-card-border-width, 1px));
    border-style: solid;
    border-radius: var(--misaju-item-border-radius, var(--menu-radius));
    background: var(--misaju-item-bg, var(--menu-card-bg));
    color: var(--misaju-item-text-color, var(--misaju-item-name-color, var(--menu-ink)));
    box-shadow: var(--misaju-item-shadow, var(--misaju-card-shadow, var(--menu-shadow-card)));
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* Déclencheur étiré : rend toute la carte cliquable sans imbriquer
   titres/listes dans le lien (sémantique valide). */
.menu-item-open {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--misaju-item-border-radius, var(--menu-radius));
    background: transparent;
    cursor: pointer;
}

.menu-item-open:focus-visible {
    outline: 3px solid var(--menu-focus);
    outline-offset: 3px;
}

/* Indice visuel « voir » : signale qu'une fiche détaillée s'ouvre au clic.
   Purement décoratif (aria-hidden) et non cliquable (le lien étiré gère l'ouverture). */
.menu-item-hint {
    position: absolute;
    right: 12px;
    bottom: 10px;
    z-index: 2;
    pointer-events: none;
    padding: 3px 9px;
    border-radius: var(--menu-radius-pill);
    background: var(--menu-strong);
    color: #fff;
    font-family: var(--menu-font-body);
    font-size: calc(11px * var(--a11y-scale));
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.88;
}

/*
 * Gouttière du badge « voir ».
 *
 * Le badge est posé en absolu dans le coin bas-droit, AU-DESSUS du contenu
 * (`z-index: 2`, fond opaque). Quand la dernière ligne de la carte est le prix
 * unique — produit sans description ni caractéristiques — le badge le
 * recouvrait intégralement : le prix, aligné à droite, était bien présent dans
 * le HTML mais invisible sur la carte publique.
 *
 * On réserve donc à droite de cette ligne la place occupée par le badge. La
 * règle est volontairement restreinte au seul cas de collision : dès qu'une
 * description ou des caractéristiques suivent le prix, celui-ci n'est plus la
 * dernière ligne et le rendu de référence est conservé tel quel.
 */
.menu-item:not(:has(.menu-item-attributes)) .menu-item-body > .menu-item-price--single:last-child {
    padding-right: var(--menu-item-hint-gutter);
}

@media (hover: hover) {
    .menu-item:hover .menu-item-hint {
        opacity: 1;
    }

    .menu-item:hover {
        transform: translateY(-2px);
        border-color: var(--menu-border-strong);
        box-shadow: 0 20px 44px rgba(28, 25, 23, 0.12);
    }

    .menu-item:hover .menu-item-name {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

.menu-item-image {
    order: -1;
    display: block;
    width: var(--misaju-item-image-size, 100%);
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    margin: var(--misaju-item-image-margin, 0 0 14px);
    border-radius: var(--misaju-item-image-radius, 6px);
    background: var(--misaju-item-image-bg, var(--menu-surface-soft));
    object-fit: cover;
    /* Recadrage par le bas : le haut de l'image (souvent le sujet) reste visible quand le
       ratio source diffère du 16/9 attendu. */
    object-position: top;
}

.menu-item-status {
    order: 0;
    display: inline-block;
    align-self: flex-start;
    margin: 0 0 8px;
    padding: 4px 9px;
    border-radius: 4px;
    color: #fff;
    font-size: calc(11px * var(--a11y-scale));
    font-weight: 700;
    text-transform: uppercase;
}

.menu-item-status--unavailable {
    background: #a92318;
}

.menu-item-status--success {
    background: var(--menu-primary);
}

.menu-item-body {
    order: 1;
    min-width: 0;
}

.menu-item-name-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    min-width: 0;
    flex-wrap: wrap;
}

/* Prix unique : sur sa propre ligne sous le nom, aligné à droite (pas de trait de conduite). */
.menu-item-price--single {
    margin: 6px 0 0;
    text-align: right;
}

.menu-item-name {
    margin: 0;
    color: var(--misaju-item-name-color, var(--menu-ink));
    font-family: var(--menu-font-display);
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0;
}

/* Trait de conduite (pointillés) reliant le nom de la variante à son prix. */
.menu-price-leader {
    flex: 1 1 auto;
    min-width: 16px;
    height: 0;
    margin: 0 6px;
    border-bottom: 2px dotted var(--menu-leader);
    transform: translateY(-0.3em);
}

.menu-item-price,
.menu-price-row dd {
    flex: 0 0 auto;
    color: var(--misaju-item-desc-color, var(--menu-ink));
    font-size: calc(15px * var(--a11y-scale));
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    white-space: nowrap;
}

.menu-item-description {
    margin: 12px 0 0;
    color: var(--misaju-item-desc-color, var(--menu-muted));
    font-size: calc(14px * var(--a11y-scale));
    line-height: var(--a11y-line-height);
}

.menu-price-rows {
    display: grid;
    gap: calc(7px * var(--a11y-scale));
    margin: 12px 0 0;
    padding: 0;
}

.menu-price-row {
    display: flex;
    align-items: baseline;
    gap: 0;
}

.menu-price-row dt {
    flex: 0 1 auto;
    color: var(--misaju-item-desc-color, var(--menu-muted));
    font-size: calc(14px * var(--a11y-scale));
    font-weight: 500;
}

.menu-price-row dd {
    flex: 0 0 auto;
}

.menu-price-row dt,
.menu-price-row dd {
    margin: 0;
}

.menu-item-custom-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 8px 0 0;
}

.menu-cf-item {
    display: inline-flex;
    gap: 4px;
    margin: 0;
    font-size: calc(12px * var(--a11y-scale));
}

.menu-cf-label,
.menu-cf-value {
    margin: 0;
    color: var(--misaju-item-desc-color, var(--menu-muted));
}

.menu-cf-value {
    font-weight: 700;
}

.menu-item-attributes {
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
}

.menu-item-tags,
.menu-item-allergens {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.attr-pill {
    display: flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid currentColor;
    border-radius: var(--menu-radius-pill);
    background: transparent;
    color: var(--misaju-item-desc-color, var(--menu-muted));
    font-size: calc(12px * var(--a11y-scale));
    font-weight: 800;
    line-height: 1.2;
    opacity: 0.82;
}

/* Tags : reprennent la couleur primaire du thème (ou celle du display_template). */
.attr-tag {
    background: var(--misaju-tag-bg, transparent);
    color: var(--misaju-tag-text, var(--menu-primary));
    opacity: 1;
}

/* Allergènes : affichés sans bordure, pour une lisibilité maximale. */
.attr-allergen {
    border: none;
    padding: 0;
    background: var(--misaju-allergen-bg, transparent);
    color: var(--misaju-allergen-text, var(--menu-ink));
    opacity: 1;
}

.attr-allergens-label {
    display: flex;
    align-items: center;
    min-height: 28px;
    line-height: 1.2;
    color: var(--menu-ink);
    font-size: calc(11px * var(--a11y-scale));
    font-weight: 800;
}

/* Effets de survol/apparition (hover_effect / reveal_effect, spec §4.5). */
.hover-zoom:hover { transform: scale(1.02); }
.hover-glow:hover { box-shadow: 0 0 0 3px var(--misaju-color-accent); }
.hover-elevate:hover { transform: translateY(-4px); }

@keyframes misaju-anim-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes misaju-anim-slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes misaju-anim-scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

.anim-fade-in { animation: misaju-anim-fade-in 0.4s ease both; }
.anim-slide-up { animation: misaju-anim-slide-up 0.4s ease both; }
.anim-scale-in { animation: misaju-anim-scale-in 0.4s ease both; }

/* Comportement d'un produit désactivé (disabled_behavior, spec §4.5). */
.item-unavailable { opacity: 0.72; }
.disabled-greyed { opacity: 0.5; filter: grayscale(0.6); }
.disabled-outofstock,
.disabled-full { opacity: 0.7; }

/* Puces tags/allergènes de la FICHE produit (structure `c-item-detail__*`, hors carte). */
.c-item-detail__taxonomy {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0;
    margin: var(--misaju-spacing-sm) 0;
}

.c-taxonomy-chip--badge {
    background-color: var(--misaju-tag-bg, var(--misaju-color-secondary));
    color: var(--misaju-tag-text, var(--misaju-color-text));
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.c-taxonomy-chip--pill {
    background-color: var(--misaju-allergen-bg, var(--misaju-color-secondary));
    color: var(--misaju-allergen-text, var(--misaju-color-text));
    font-size: 0.75rem;
    padding: 0.15rem 0.6rem;
    border-radius: var(--misaju-radius-pill, 999px);
}

.c-item-detail__custom-fields {
    list-style: none;
    padding: 0;
    margin: var(--misaju-spacing-sm) 0;
    font-size: 0.85rem;
}

.c-item-detail__custom-field-label {
    font-weight: 600;
    margin-inline-end: 0.25rem;
}