/* =====================================================================
   FrolliAMOci — PAGINA HOME
   Obiettivo: pasticceria + hero + 6 funzioni visibili senza scroll
   significativo su 360×800.
   ===================================================================== */

.home {
    display: grid;
    gap: var(--space-3);
    grid-template-areas:
        "shop"
        "hero"
        "actions";
}
.home__shop    { grid-area: shop; }
.home__hero    { grid-area: hero; }
.home__actions { grid-area: actions; }

/* ---------- HeroCard ---------- */
.hero-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--radius-xl);
    /* box stilizzato: lo spazio è corretto anche senza immagine (niente layout shift) */
    aspect-ratio: 16 / 10;
    min-height: 196px;
    /* sfondo di brand: visibile se l'immagine manca o sta caricando */
    background:
        radial-gradient(120% 90% at 85% 40%, #E7B48A 0%, transparent 60%),
        linear-gradient(115deg, #4A2618 0%, #7A4428 55%, #C48A5C 100%);
    box-shadow: var(--shadow-card);
    color: var(--color-text-inverse);
}
.hero-card__media { position: absolute; inset: 0; z-index: -2; }
.hero-card__img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 70% 50%;       /* crop gradevole: soggetto a destra, testo a sinistra */
    transition: transform 600ms var(--ease-out);
}
.hero-card::before {                 /* velo per la leggibilità del titolo */
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(38, 16, 8, 0.78) 0%, rgba(38, 16, 8, 0.45) 45%, rgba(38, 16, 8, 0) 78%);
}
.hero-card__content {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5);
}
.hero-card__title {
    max-width: min(62%, 9.5em);   /* colonna testo a sinistra: il soggetto della foto resta libero */
    font-size: var(--fs-hero);
    font-weight: var(--fw-heavy);
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-wrap: balance;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}
.hero-card__heart {
    display: inline-block;
    color: var(--color-accent);
    font-size: 0.72em;
    vertical-align: 0.05em;
    transform-origin: 50% 60%;
    animation: heart-beat 2.6s var(--ease-out) 600ms 2;
}
@keyframes heart-beat {
    0%, 60%, 100% { transform: scale(1) rotate(-8deg); }
    15% { transform: scale(1.22) rotate(-8deg); }
    30% { transform: scale(0.96) rotate(-8deg); }
    45% { transform: scale(1.12) rotate(-8deg); }
}
.hero-card__subtitle { max-width: 26em; font-size: var(--fs-sm); opacity: 0.92; }
.hero-card__cta { margin-top: var(--space-1); padding-inline: var(--space-5); min-height: 46px; }
.hero-card__cta .icon { transition: transform var(--dur-base) var(--ease-out); }
/* link esteso: tutta la card è toccabile, un solo elemento interattivo per lo screen reader */
.hero-card__cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hero-card:hover .hero-card__img { transform: scale(1.03); }
.hero-card:hover .hero-card__cta .icon { transform: translateX(3px); }
.hero-card:active .hero-card__cta { transform: scale(0.97); }
.hero-card:has(.hero-card__cta:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.hero-card__cta:focus-visible { outline: none; }

/* ---------- Quick actions: griglia 3 × 2 che si riadatta alle feature attive ---------- */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}
.quick-actions[data-count="1"] { grid-template-columns: 1fr; }
.quick-actions[data-count="2"],
.quick-actions[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.quick-action {
    /* colori della tile: sovrascrivibili per singola funzione */
    --tile-tint: var(--tint-rose);
    --tile-ink: var(--color-accent-strong);

    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px;
    min-height: 118px;
    padding: var(--space-3) var(--space-1);
    background: var(--color-surface);
    /* v1.33: forma, bordo e ombra dal tema grafico (variabili --qa-*), altrimenti quelli FrolliAMOci */
    border: var(--qa-border, 0 solid transparent);
    border-radius: var(--qa-radius, var(--radius-lg));
    box-shadow: var(--qa-shadow, var(--shadow-card), inset 0 0 0 1px var(--color-border));
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    transition: transform var(--dur-fast) ease, box-shadow var(--dur-base) ease;
    animation: tile-in var(--dur-slow) var(--ease-out) both;
}
.quick-action:nth-child(2) { animation-delay: 30ms; }
.quick-action:nth-child(3) { animation-delay: 60ms; }
.quick-action:nth-child(4) { animation-delay: 90ms; }
.quick-action:nth-child(5) { animation-delay: 120ms; }
.quick-action:nth-child(6) { animation-delay: 150ms; }
@keyframes tile-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

.quick-action:hover { box-shadow: var(--qa-shadow-hover, var(--shadow-raised), inset 0 0 0 1px var(--color-border)); transform: translateY(-2px); }

/* v1.33 — bottone con immagine a tutta larghezza: il testo (predefinito o del tema) sta in una banda in basso che cresce col corpo del testo */
.quick-action--cover { justify-content: flex-end; gap: 0; padding: 0; overflow: hidden; isolation: isolate; }
.quick-action__cover { position: absolute; inset: 0; z-index: -1; background: var(--tile-tint); }
.quick-action__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.quick-action--cover:hover .quick-action__img { transform: scale(1.05); }
.quick-action--cover .quick-action__label {
    width: 100%; padding: 0.42em 0.45em 0.48em;
    font-size: var(--qa-band-fs, 14px); line-height: 1.12;
    background: color-mix(in srgb, var(--color-surface) 84%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 -1px 0 color-mix(in srgb, var(--color-text) 8%, transparent);
}
.quick-action--cover .quick-action__meta { position: absolute; top: 6px; left: 50%; translate: -50% 0; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.quick-action:active { transform: scale(0.96); }

.quick-action__icon {
    display: grid; place-items: center;
    width: 54px; height: 54px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #fff 0%, var(--tile-tint) 62%);
    box-shadow: inset 0 -3px 0 rgba(92, 46, 28, 0.06), 0 6px 14px -8px var(--tile-ink);
    color: var(--tile-ink);
    font-size: 1.45rem;
    transition: transform var(--dur-base) var(--ease-out);
}
.quick-action:hover .quick-action__icon { transform: rotate(-6deg) scale(1.06); }

.quick-action__label {
    font-size: 0.9rem;
    font-weight: var(--fw-heavy);
    line-height: 1.15;
    text-wrap: balance;
}
.quick-action__meta {
    max-width: calc(100% - 6px);
    padding: 3px 7px;
    border-radius: var(--radius-pill);
    font-size: 0.68rem;
    font-weight: var(--fw-bold);
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-wrap: balance;
    animation: badge-in var(--dur-slow) var(--ease-out) both;
}
.quick-action__meta--queue   { background: var(--tint-caramel); color: #6B3A1A; }
.quick-action__meta--loyalty { background: var(--tint-rose); color: var(--color-accent-strong); }

/* Identità cromatica delle sei funzioni (il grafico agisce qui) */
.quick-action--assistant    { --tile-tint: #FBD9E3; --tile-ink: #C8385C; }
.quick-action--budget       { --tile-tint: #FDDCD8; --tile-ink: #D4566A; }
.quick-action--cake-builder { --tile-tint: #FCEBDD; --tile-ink: #B24A36; }
.quick-action--pickup       { --tile-tint: #F8DFC4; --tile-ink: #A95A1C; }
.quick-action--queue        { --tile-tint: #FBE3CC; --tile-ink: #B8641F; }
.quick-action--loyalty      { --tile-tint: #FAD8CE; --tile-ink: #C22E44; }
.quick-action--virtual-tray { --tile-tint: #F6DCC0; --tile-ink: #8A4A16; }

/* Su schermi molto bassi (es. 360×640 con barra browser) si compatta ulteriormente */
@media (max-width: 767px) and (max-height: 720px) {
    .hero-card { aspect-ratio: 16 / 9; min-height: 176px; }
    .quick-action { min-height: 104px; gap: 4px; }
    .quick-action__icon { width: 46px; height: 46px; font-size: 1.25rem; }
    .shop-selector { min-height: 68px; }
    .shop-selector__thumb { width: 54px; height: 54px; }
}

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
    .home { gap: var(--space-4); }
    .hero-card { aspect-ratio: 2 / 1; }
    .hero-card__content { padding: var(--space-7); gap: var(--space-4); }
    .quick-actions { gap: var(--space-3); }
    .quick-action { min-height: 148px; gap: var(--space-2); }
    .quick-action__icon { width: 66px; height: 66px; font-size: 1.8rem; }
    .quick-action__label { font-size: var(--fs-md); }
    .quick-action__meta { font-size: var(--fs-xs); }
}

/* ---------- Desktop 1024–1279: colonna ampia ---------- */
@media (min-width: 1024px) {
    .hero-card { aspect-ratio: 21 / 9; min-height: 300px; }
    .quick-actions:not([data-count="4"]):not([data-count="2"]):not([data-count="1"]) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .quick-actions[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Desktop ≥ 1280: composizione bento ---------- */
@media (min-width: 1280px) {
    .home {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        grid-template-areas:
            "hero shop"
            "hero actions";
        grid-template-rows: auto 1fr;
        gap: var(--space-5);
        align-items: stretch;
    }
    .home__hero { display: flex; }
    .hero-card { aspect-ratio: auto; width: 100%; min-height: 470px; }
    .hero-card__content { padding: var(--space-8); }
    .home__actions { display: flex; }
    .quick-actions,
    .quick-actions:not([data-count="4"]):not([data-count="2"]):not([data-count="1"]) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }
    .quick-actions[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quick-action { min-height: 0; }
}

/* ---------- In evidenza (Sezione 11): contenuti scelti dalla pasticceria (quanti: Super Admin, 1–12; come: la pasticceria — una sotto l'altra o carosello) ---------- */
.home:has(> .home__featured) { grid-template-areas: "shop" "hero" "actions" "featured"; }
.home__featured { grid-area: featured; display: grid; gap: var(--space-2); }
.home__section-title { font-size: var(--fs-lg); font-weight: var(--fw-heavy); margin: var(--space-1) 2px 0; }
.featured-list { display: grid; gap: var(--space-3); }
.featured-card {
    display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
    padding: var(--space-2); padding-right: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    color: var(--color-text); text-decoration: none;
    transition: transform var(--dur-fast) ease;
}
.featured-card:active { transform: scale(0.985); }
.featured-card__media { width: 96px; height: 96px; border-radius: var(--radius-md); overflow: hidden; background: var(--tint-caramel); }
.featured-card__img { width: 100%; height: 100%; object-fit: cover; }
.featured-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.featured-card__kicker { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent-strong); }
.featured-card__title { font-size: var(--fs-md); font-weight: var(--fw-heavy); line-height: 1.2; }
.featured-card__sub { font-size: var(--fs-sm); color: var(--color-text-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.featured-card__chev { color: var(--color-text-muted); }
/* «Una sotto l'altra» (predefinito): righe con foto a sinistra; da tablet in su due colonne */
@media (min-width: 768px) {
    .featured-list:not(.featured-list--rail):not([data-count="1"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    .home:has(> .home__featured) { grid-template-areas: "hero shop" "hero actions" "featured featured"; grid-template-rows: auto 1fr auto; }
    .featured-card { grid-template-columns: 120px minmax(0, 1fr) auto; }
    .featured-card__media { width: 120px; height: 96px; }
}

/* v1.32 — larghezza dell'immagine nelle righe (solo «una sotto l'altra»): Minima · Media (predefinita) · Ampia · Piena · Extra.
   Le immagini si ritagliano nel retrobottega con le stesse proporzioni; qui object-fit: cover le adatta allo spazio reale. */
.featured-list:not(.featured-list--rail) .fc--w-medium { grid-template-columns: 45% minmax(0, 1fr) auto; }
.featured-list:not(.featured-list--rail) .fc--w-wide { grid-template-columns: 62% minmax(0, 1fr) auto; }
.featured-list:not(.featured-list--rail) :is(.fc--w-medium, .fc--w-wide) .featured-card__media { width: 100%; height: 96px; }
.featured-list:not(.featured-list--rail) .fc--w-full { grid-template-columns: minmax(0, 1fr) auto; }
.featured-list:not(.featured-list--rail) .fc--w-extra { grid-template-columns: minmax(0, 1fr); padding: 0; overflow: hidden; }
.featured-list:not(.featured-list--rail) :is(.fc--w-full, .fc--w-extra) .featured-card__media { width: 100%; height: auto; aspect-ratio: 10 / 3; }
.featured-list:not(.featured-list--rail) .fc--w-extra .featured-card__media { border-radius: 0; }
@media (min-width: 1280px) {
    .featured-list:not(.featured-list--rail) :is(.fc--w-medium, .fc--w-wide) .featured-card__media { height: 112px; }
}
/* testo personalizzato su 2 righe e immagine al posto del testo */
.featured-card__sub--custom { -webkit-line-clamp: 2; }
.featured-card__textimg { display: block; width: 100%; height: 96px; object-fit: cover; border-radius: var(--radius-md); }
.featured-list--rail .featured-card__textimg { height: auto; aspect-ratio: 4 / 1; }

/* «Carosello orizzontale»: schede verticali in una fila che scorre (dito, rotella, trackpad, tastiera) a ogni larghezza;
   la scheda successiva «sbircia» e invita a scorrere. Solo CSS: funziona anche senza JavaScript. */
.featured-list--rail {
    grid-auto-flow: column; grid-auto-columns: 64%;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px;
    padding: 2px 2px var(--space-3); margin-bottom: calc(-1 * var(--space-2));
    scrollbar-width: thin; scrollbar-color: var(--color-accent-soft, rgba(0, 0, 0, 0.2)) transparent;
}
.featured-list--rail .featured-card {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; gap: var(--space-2);
    padding: var(--space-2) var(--space-2) var(--space-3);
    scroll-snap-align: start;
}
.featured-list--rail .featured-card__media { width: 100%; height: auto; aspect-ratio: 5 / 4; }
.featured-list--rail .featured-card__body { padding: 0 var(--space-1); }
.featured-list--rail .featured-card__chev { display: none; }
@media (min-width: 480px) { .featured-list--rail { grid-auto-columns: 46%; } }
@media (min-width: 768px) {
    .featured-list--rail { grid-auto-columns: 30%; }   /* 3 schede + la quarta che sbircia */
    .featured-list--rail .featured-card__media { aspect-ratio: 16 / 10; }
}
@media (min-width: 1280px) {
    .featured-list--rail { grid-auto-columns: 23%; }   /* 4 schede + la quinta che sbircia */
    .featured-list--rail .featured-card__media { width: 100%; height: auto; }
}
@media (prefers-reduced-motion: reduce) { .featured-list--rail { scroll-behavior: auto; } }

/* ---------- Vetrina Visiva «Dolci del giorno» (v1.29): posizione scelta dalla pasticceria, mai un page builder ---------- */
.home__svv { grid-area: svv; min-width: 0; }
.home.home--svv-hero { grid-template-areas: "shop" "hero" "svv" "actions"; }
.home.home--svv-actions { grid-template-areas: "shop" "hero" "actions" "svv"; }
.home.home--svv-featured { grid-template-areas: "shop" "hero" "actions" "svv"; }
.home.home--svv-hero:has(> .home__featured) { grid-template-areas: "shop" "hero" "svv" "actions" "featured"; }
.home.home--svv-actions:has(> .home__featured) { grid-template-areas: "shop" "hero" "actions" "svv" "featured"; }
.home.home--svv-featured:has(> .home__featured) { grid-template-areas: "shop" "hero" "actions" "featured" "svv"; }
@media (min-width: 1280px) {
    .home.home--svv-hero, .home.home--svv-actions, .home.home--svv-featured { grid-template-areas: "hero shop" "hero actions" "svv svv"; grid-template-rows: auto 1fr auto; }
    .home.home--svv-hero:has(> .home__featured), .home.home--svv-actions:has(> .home__featured) {
        grid-template-areas: "hero shop" "hero actions" "svv svv" "featured featured"; grid-template-rows: auto 1fr auto auto;
    }
    .home.home--svv-featured:has(> .home__featured) { grid-template-areas: "hero shop" "hero actions" "featured featured" "svv svv"; grid-template-rows: auto 1fr auto auto; }
}
.quick-action__icon .icon--img { width: 1.55em; height: 1.55em; border-radius: 6px; }   /* tema grafico: icona-immagine */