/* ============================================================
 * MakeNext Builder — CSS base frontend
 *
 * Filosofia: SOLO STRUTTURA E ROBUSTEZZA. Zero decorazioni
 * (colori, font, padding, margin). Il design e' interamente
 * demandato al template del sito.
 *
 * Override-abile: tutte le regole qui hanno specificita' minima e
 * dalla 1.6.5 il file non usa piu' NEMMENO UN !important. Niente
 * style inline sul wrapper.
 *
 * NIENTE RESPONSIVE (dalla 1.6.6): il builder non emette piu' media
 * query di struttura. La grid 12-col resta viva a ogni larghezza e
 * scende in proporzione; i breakpoint li decide il CSS del sito.
 * La nota in fondo spiega cosa e' stato tolto e perche'.
 *
 * ATTENZIONE a COME si sovrascrive: dalla 1.9.3 questo file arriva
 * in pagina come <link> nell'head, registrato via WebAssetManager e
 * servito dalla cartella del plugin (quella che gli upgrade Joomla
 * ricopiano sempre — vedi BuilderRenderer::headFile). L'ordine
 * rispetto al CSS del template PUO' VARIARE (dipende da quale
 * superficie renderizza per prima): per sovrascrivere dal
 * template.css usare SEMPRE un selettore piu' specifico (es.
 * ".mn-builder .mn-col-5", non ".mn-col-5"), mai affidarsi
 * all'ordine dei file. Dal CSS di pagina/blocco del builder invece
 * basta una regola normale: quelli sono registrati DOPO questo file
 * nella stessa request.
 *
 * Principio "back/front coerenti": queste regole rispecchiano
 * 1:1 quelle del canvas backend (BuilderField). Un blocco width
 * 50% nel backend occupa 50% identico in frontend.
 * ============================================================ */

/* === STRUTTURA GRID 12-col === */
/* grid-auto-flow: row (default CSS) = scacchiera prevedibile.
   NON dense: l'utente decide l'ordine, niente magie di riempimento buchi.

   1.9.4 — VALORI CONFIGURABILI dalle Opzioni del componente (tab Frontend):
     --mn-builder-gap       gap di TUTTI i layout (grid, gruppi, riga, griglia)
     --mn-builder-riga-min  altezza minima di riga della grid (unita' di mn-alt-N)
     --mn-builder-base-riga base flex della disposizione "in riga" (soglia di wrap)
   Il fallback di var() E' il default storico: se l'admin non tocca le Opzioni
   il renderer non emette niente e tutto resta identico a prima. Se cambia un
   valore, BuilderRenderer inietta ".mn-builder { --mn-builder-*: ... }" e i
   layout interni lo ereditano. */
.mn-builder {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(var(--mn-builder-riga-min, 60px), auto);
    grid-auto-flow: row;
    gap: var(--mn-builder-gap, 0.5rem);
}

/* === ROBUSTEZZA === */
.mn-builder { box-sizing: border-box; }
.mn-builder *,
.mn-builder *::before,
.mn-builder *::after { box-sizing: inherit; }

.mn-builder img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* === GROUP === */
/* Contenitori interni dei gruppi (schema classi per ruolo):
     mn-gruppo-singolo  = gruppo che contiene CONTENUTI
     mn-gruppi-multipli = gruppo che contiene altri GRUPPI
   La DISPOSIZIONE (verticale/in riga/griglia) e' una classe a parte
   (mn-disposizione-*), cosi' non si moltiplica con i nomi dei contenitori.
   Default = verticale (flex column). */
.mn-gruppo-singolo,
.mn-gruppi-multipli {
    display: flex;
    flex-direction: column;
    gap: var(--mn-builder-gap, 0.5rem);
}
/* Disposizione "in riga": i figli si affiancano e si dividono lo spazio
   (base 200px: con pochi riempiono la riga, con tanti vanno a capo). */
.mn-disposizione-riga {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--mn-builder-gap, 0.5rem);
}
.mn-disposizione-riga > * {
    flex: 1 1 var(--mn-builder-base-riga, 200px);
    min-width: 0;
}
/* 1.6.6: rimossa la media query che sotto 768 forzava flex-direction:column.
   Non serviva: flex-wrap:wrap + flex-basis 200px fanno gia' andare a capo i
   figli quando lo spazio non basta, in proporzione e senza soglie fisse.
   Impilare d'ufficio sotto 768 era una decisione in piu', presa dal builder
   al posto di chi scrive il CSS. Vedi la nota sul responsive in fondo. */
/* Disposizione "griglia": mini-grid 12-col annidata; i figli usano mn-col-N. */
.mn-disposizione-griglia {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(var(--mn-builder-riga-min, 60px), auto);
    grid-auto-flow: row;
    gap: var(--mn-builder-gap, 0.5rem);
}

/* === SPACER / SEPARATOR (1.0.42) === */
/* Spacer: blocco vuoto. La larghezza la da' il grid (width 1-12 sul wrapper),
   l'altezza arriva da min-height inline (scelta dell'utente). Zero decorazioni. */
.mn-spazio { display: block; }
/* Separator: contenitore della linea <hr>. Lo stile della linea (spessore,
   colore, stile, larghezza, allineamento) e' tutto inline dai params. */
.mn-separatore { display: block; width: 100%; }
.mn-separatore hr { box-sizing: border-box; }

/* === MODULE / VIDEO (1.0.43) === */
/* Module: wrapper neutro attorno all'output del modulo Joomla. Zero stile,
   il modulo porta il suo. */
.mn-modulo { display: block; width: 100%; }

/* Video: embed responsivo. La proporzione e' su __frame via aspect-ratio
   inline (dai params); l'iframe riempie il frame in absolute. */
.mn-video { display: block; width: 100%; }
.mn-video-frame { position: relative; width: 100%; }
.mn-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Embed: iframe generico responsivo. Il frame ha aspect-ratio o height inline
   (dai params); l'iframe lo riempie. */
.mn-embed { display: block; width: 100%; }
.mn-embed-frame { position: relative; width: 100%; }
.mn-embed-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* 1.0.40: griglia frontend = OUTLINE + LABEL su ogni blocco.
   Visualizza la struttura mettendo un bordo tratteggiato attorno
   a ogni elemento e una piccola label rossa in alto a destra che
   indica lo span "N/12". Solo i blocchi root hanno data-grid-info
   (sono quelli dentro la grid 12-col). I blocchi nested nei Group
   hanno solo l'outline, niente label (sono full-width dentro il group).
   Attivata dalla classe .mn-builder-mostra-griglia sul wrapper. */
.mn-builder-mostra-griglia [class*="mn-elemento"] {
    outline: 2px dashed rgba(220, 53, 69, 0.55);
    outline-offset: -1px;
    position: relative;
}
.mn-builder-mostra-griglia [class*="mn-elemento"][data-grid-info]::after {
    content: attr(data-grid-info);
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(220, 53, 69, 0.85);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 0 0 0 4px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-weight: 700;
    pointer-events: none;
    z-index: 10;
}

/* NB: il collasso mobile (<768px) NON sta piu' qui: e' in fondo al file,
   dopo le utility mn-col / mn-alt che deve annullare. Vedi la nota li'. */

/* === VIDEO FACADE + LIGHTBOX (1.0.48) ===
   Eccezione consapevole alla filosofia "zero decorazioni": qui servono dei
   chrome FUNZIONALI (poster cliccabile, pulsante play, overlay lightbox).
   Restano neutri e override-abili dal template. */

/* Facciata: poster a tutta area + pulsante play centrale. */
.mn-video-facade {
    cursor: pointer;
    overflow: hidden;
}
.mn-video-facade__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mn-video-facade__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.55);
    transition: background 0.15s ease;
    pointer-events: none;
}
.mn-video-facade__play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent #fff;
}
.mn-video-facade:hover .mn-video-facade__play,
.mn-video-facade:focus .mn-video-facade__play {
    background: rgba(220, 53, 69, 0.9);
}
.mn-video-facade:focus-visible {
    outline: 3px solid rgba(13, 110, 253, 0.6);
    outline-offset: 2px;
}
/* Player avviato (facade inline): poster/play spariscono, resta l'iframe
   (che usa gia' le regole .mn-video-frame iframe). */
.mn-video-facade--playing { cursor: default; }
.mn-video-facade--playing .mn-video-facade__poster,
.mn-video-facade--playing .mn-video-facade__play { display: none; }

/* Lightbox condivisa (video popup; in futuro anche la gallery). */
body.mn-lightbox-open { overflow: hidden; }
.mn-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vmin;
}
.mn-lightbox__inner {
    position: relative;
    width: 100%;
    max-width: 1100px;
}
.mn-lightbox__close {
    position: absolute;
    top: -2.6rem;
    right: 0;
    width: 2.2rem;
    height: 2.2rem;
    line-height: 1;
    font-size: 1.8rem;
    color: #fff;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
}
.mn-lightbox__video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}
.mn-lightbox__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
@media (max-width: 768px) {
    .mn-lightbox__close { top: -2.2rem; }
}

/* === GALLERY (1.0.50) === */
.mn-gallery { width: 100%; }
.mn-gallery__item {
    display: block;
    overflow: hidden;
    line-height: 0;
}
/* cursore "mano" solo se cliccabile (lightbox attivo). */
.mn-gallery[data-mn-gallery] .mn-gallery__item { cursor: pointer; }
.mn-gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* contain = mostra l'immagine INTERA, senza taglio (puo' lasciare spazi). */
.mn-gallery--fit-contain .mn-gallery__item img { object-fit: contain; }

/* Griglia uniforme: N colonne, celle quadrate (crop centrato). */
.mn-gallery--grid {
    display: grid;
    grid-template-columns: repeat(var(--mn-gallery-cols, 3), 1fr);
    gap: var(--mn-gallery-gap, 8px);
}
.mn-gallery--grid .mn-gallery__item { aspect-ratio: 1 / 1; }

/* Mosaico (masonry): colonne CSS, altezze naturali (il "2+1" viene da solo). */
.mn-gallery--masonry {
    column-count: var(--mn-gallery-cols, 3);
    column-gap: var(--mn-gallery-gap, 8px);
}
.mn-gallery--masonry .mn-gallery__item {
    break-inside: avoid;
    margin-bottom: var(--mn-gallery-gap, 8px);
}
.mn-gallery--masonry .mn-gallery__item img { height: auto; }

/* Giustificato a righe: altezza fissa, larghezze proporzionali all'aspetto
   (flex impostato inline per-item). Tipo Google Foto. */
.mn-gallery--justified {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mn-gallery-gap, 8px);
}
.mn-gallery--justified .mn-gallery__item {
    height: var(--mn-gallery-rowh, 220px);
}

/* Tutte in linea: una sola riga, larghezze adattate (quota uguale). */
.mn-gallery--row {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--mn-gallery-gap, 8px);
}
.mn-gallery--row .mn-gallery__item {
    flex: 1 1 0;
    min-width: 0;
    height: var(--mn-gallery-rowh, 220px);
}

/* Tutte in verticale: impilate, larghezza piena, altezza naturale. */
.mn-gallery--column {
    display: flex;
    flex-direction: column;
    gap: var(--mn-gallery-gap, 8px);
}
.mn-gallery--column .mn-gallery__item img { height: auto; }

@media (max-width: 768px) {
    .mn-gallery--grid { grid-template-columns: repeat(2, 1fr); }
    .mn-gallery--masonry { column-count: 2; }
    /* su mobile "in linea" diventa scrollabile per non schiacciare troppo. */
    .mn-gallery--row { flex-wrap: wrap; }
}

/* Lightbox immagine + frecce (gallery). */
.mn-lightbox__gallery {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0.5rem;
}
.mn-lightbox__image {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}
.mn-lightbox__image img {
    max-width: 100%;
    max-height: 86vh;
    display: inline-block;
    object-fit: contain;
}
.mn-lightbox__nav {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.5rem;
    opacity: 0.8;
}
.mn-lightbox__nav:hover { opacity: 1; }

/* === LARGHEZZE / ALTEZZE A CLASSI (schema classi 1.2) ===
   Niente piu' stile inline di struttura: la cella (mn-elemento*) riceve una
   classe utility per lo span colonne (mn-col-N, 1-12), una per le righe
   (mn-alt-N, 2-20) e mn-a-capo per forzare una nuova riga. Le larghezze FISSE
   in px/% restano nelle classi generate larghezza-builder-* (inline <style>). */
.mn-col-1  { grid-column: span 1; }
.mn-col-2  { grid-column: span 2; }
.mn-col-3  { grid-column: span 3; }
.mn-col-4  { grid-column: span 4; }
.mn-col-5  { grid-column: span 5; }
.mn-col-6  { grid-column: span 6; }
.mn-col-7  { grid-column: span 7; }
.mn-col-8  { grid-column: span 8; }
.mn-col-9  { grid-column: span 9; }
.mn-col-10 { grid-column: span 10; }
.mn-col-11 { grid-column: span 11; }
.mn-col-12 { grid-column: span 12; }

.mn-a-capo { grid-column-start: 1; }

.mn-alt-2  { grid-row: span 2; }
.mn-alt-3  { grid-row: span 3; }
.mn-alt-4  { grid-row: span 4; }
.mn-alt-5  { grid-row: span 5; }
.mn-alt-6  { grid-row: span 6; }
.mn-alt-7  { grid-row: span 7; }
.mn-alt-8  { grid-row: span 8; }
.mn-alt-9  { grid-row: span 9; }
.mn-alt-10 { grid-row: span 10; }
.mn-alt-11 { grid-row: span 11; }
.mn-alt-12 { grid-row: span 12; }
.mn-alt-13 { grid-row: span 13; }
.mn-alt-14 { grid-row: span 14; }
.mn-alt-15 { grid-row: span 15; }
.mn-alt-16 { grid-row: span 16; }
.mn-alt-17 { grid-row: span 17; }
.mn-alt-18 { grid-row: span 18; }
.mn-alt-19 { grid-row: span 19; }
.mn-alt-20 { grid-row: span 20; }

/* === RESPONSIVE: IL BUILDER NON NE FA PIU' (1.6.6) ===
   Qui c'era il "collasso mobile": sotto 768px la grid 12-col veniva spenta
   (.mn-builder a display:block, span colonna/riga annullati, blocchi a
   width:100%). RIMOSSO su decisione dell'utente (2026-07-16):

     "voglio che continui a scendere in proporzione e poi ci penso io a dire
      cosa fare, non che a 768 si rompe"

   Ora la griglia 12-col resta viva a QUALSIASI larghezza: un blocco mn-col-4
   occupa un terzo a 1920px come a 375px, e il responsive lo decide il CSS del
   sito. Vedi [[feedback-no-css-replacement-features]]: il builder si toglie di
   mezzo, non pilota il layout al posto di chi scrive il CSS.

   PERCHE' C'ERA: rete di sicurezza per chi NON scrive CSS (su 375px una
   colonna di dodici vale ~30px, quindi un mn-col-4 diventa una striscia da
   125px). Non era una richiesta dell'utente: era un default nato col builder.

   EFFETTO COLLATERALE VOLUTO — questa rimozione CANCELLA il bug delle
   "colonnine da 1/12": nasceva proprio da qui. La media query collassava solo
   .mn-builder (il root) e non .mn-disposizione-griglia (i gruppi), che quindi
   restava una grid a 12 colonne mentre i suoi figli prendevano
   grid-column:auto = UNA colonna su dodici. Senza la media query i figli
   tengono il loro span e il gruppo scende in proporzione, come voluto.

   NON TOCCATE, sono altra cosa (componenti interni, non la griglia): la
   gallery che sotto 768 va a 2 colonne e la posizione della X della lightbox.

   Se un domani servisse di nuovo un responsive nel builder, si riparte da qui
   e si progetta ex novo (l'utente: "a quel punto possiamo inserire un nuovo
   sistema responsive") — NON ripristinando questo blocco. */