/*
 * Tassello eventi del Marconi Club (mod_mceventi), tra la fascia blu del titolo e il contenuto
 * (posizione «eventi» del template, dentro <div class="mc-wrap mc-eventi">: stessa larghezza di colonna + articolo).
 * Colori: a rotazione tra tinte tenui (ottone, salvia, corallo, limone, pistacchio, terracotta,
 * azzurro cielo: votati dai soci il 06–08/11/2026; vedi mcev--c-…), testo e conto
 * alla rovescia nel blu del sito (#112b55 / #1a3c70), etichette Contest in rosso (#cc0000). Commemorazione: grigio argento.
 * Etichetta, titolo e pulsante sono tre link separati (mcev__tag, mcev__titolo-link, mcev__btn).
 */
.mcev {
    --mcev-sfondo: linear-gradient(180deg, #fae5a8 0%, #f1cc72 100%);   /* a metà tra l'ottone (#fbd977 → #f3bd3a) e il crema del Morse (#faf1d8 → #efdcaa) */
    --mcev-bordo: #cfa441;
    --mcev-testo: #112b55;
    --mcev-sotto: #3d4f6e;
    --mcev-cd-sfondo: #112b55;
    --mcev-cd-cifre: #f9dc8f;
    --mcev-cd-unita: #b9c7df;
    --mcev-badge: #1a3c70;
    position: relative;
    margin-top: 22px;
    overflow: hidden;
    background: var(--mcev-sfondo);
    border: 1px solid var(--mcev-bordo);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 2px 8px rgba(7, 19, 38, .12);
    color: var(--mcev-testo);
    font-family: Roboto, "Segoe UI", Helvetica, Arial, sans-serif;
    transition: background .4s ease;
}
/*
 * Colori della fascia (classe mcev--c-…, data dall'evento visibile): tinte tenui accordate al blu del sito (#112b55),
 * all'ottone del tasto e al Morse della testata. Testo e conto alla rovescia restano blu; cambia solo il fondo,
 * il bordo e il colore delle cifre (una tinta chiara dello stesso fondo).
 */
.mcev--c-ottone     { --mcev-sfondo: linear-gradient(180deg, #fae5a8 0%, #f1cc72 100%); --mcev-bordo: #cfa441; --mcev-cd-cifre: #f9dc8f; }
.mcev--c-salvia     { --mcev-sfondo: linear-gradient(180deg, #dcebd0 0%, #b5d39f 100%); --mcev-bordo: #85a96c; --mcev-cd-cifre: #d8ecc8; }
.mcev--c-corallo    { --mcev-sfondo: linear-gradient(180deg, #fdd6cf 0%, #f4a597 100%); --mcev-bordo: #d77a6a; --mcev-cd-cifre: #fcd3cb; }
.mcev--c-limone     { --mcev-sfondo: linear-gradient(180deg, #fcf4bd 0%, #f1e07a 100%); --mcev-bordo: #cbb540; --mcev-cd-cifre: #faf0b0; }
.mcev--c-pistacchio { --mcev-sfondo: linear-gradient(180deg, #e7f2c4 0%, #c9e18a 100%); --mcev-bordo: #98b552; --mcev-cd-cifre: #e2f0bc; }
.mcev--c-terracotta { --mcev-sfondo: linear-gradient(180deg, #f2d2c2 0%, #dfa285 100%); --mcev-bordo: #b47555; --mcev-cd-cifre: #f2d0bf; }
.mcev--c-cielo      { --mcev-sfondo: linear-gradient(180deg, #d6e6f8 0%, #a9c8ec 100%); --mcev-bordo: #7fa3d1; --mcev-cd-cifre: #cfe2fa; }
/* grigio argento: commemorazione (automatico) o scelto a mano, sobrio anche nel testo e nel conto alla rovescia */
.mcev--c-argento {
    --mcev-sfondo: linear-gradient(180deg, #f1f3f6 0%, #d9dee5 100%);
    --mcev-bordo: #aab2bf;
    --mcev-testo: #1f2937;
    --mcev-sotto: #4b5563;
    --mcev-cd-sfondo: #374151;
    --mcev-cd-cifre: #f3f4f6;
    --mcev-cd-unita: #c7ccd4;
}

.mcev__wrap {
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
}
.mcev__slides { flex: 1 1 auto; min-width: 0; }
.mcev__item[hidden] { display: none; }
.mcev__item { animation: mcev-entra .45s ease; }
@keyframes mcev-entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.mcev__link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 7px 0;
    color: inherit;
}
/* i tre link: etichetta, titolo, pulsante */
.mcev__tag { flex: none; display: inline-flex; border-radius: 4px; text-decoration: none; }
a.mcev__tag { transition: transform .15s, box-shadow .15s; }
a.mcev__tag:hover, a.mcev__tag:focus-visible { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(7, 19, 38, .25); text-decoration: none; }
.mcev__titolo-link { color: inherit; text-decoration: none; }
a.mcev__titolo-link:hover .mcev__titolo, a.mcev__titolo-link:focus-visible .mcev__titolo { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.mcev a { color: inherit; }
.mcev a:hover, .mcev a:focus { color: inherit; }
.mcev a:focus-visible { outline: 2px solid var(--mcev-testo); outline-offset: 2px; border-radius: 6px; }

.mcev__badge, .mcev__onda {
    flex: none;
    padding: 4px 9px;
    border-radius: 4px;
    font: 700 11px/1.2 Montserrat, "Segoe UI", Helvetica, Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--mcev-badge);
}
.mcev__item[data-cat="contest"] .mcev__badge { background: #cc0000; }
.mcev__item[data-cat="evento"] .mcev__badge { background: #1d4f91; }
.mcev__item[data-cat="commemorazione"] .mcev__badge { background: #374151; }

/* «In onda»: compare al posto dell'etichetta quando l'evento è in corso */
.mcev__onda { display: none; background: #cc0000; align-items: center; gap: 6px; }
.mcev__item.is-onda .mcev__badge { display: none; }
.mcev__item.is-onda .mcev__onda { display: inline-flex; }
.mcev__led { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: mcev-led 1.6s ease-in-out infinite; }
@keyframes mcev-led { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); } 50% { opacity: .35; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0); } }

.mcev__testi { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mcev__riga1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcev__titolo {
    font: 700 17px/1.2 Montserrat, "Segoe UI", Helvetica, Arial, sans-serif;
    color: var(--mcev-testo);
}
.mcev__quando { font-size: 13.5px; line-height: 1.3; color: var(--mcev-sotto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcev__testo { font-size: 13px; font-weight: 500; color: var(--mcev-sotto); }
.mcev__testo::before { content: "·"; margin: 0 8px; }

/* conto alla rovescia: «display» blu con cifre ottone */
.mcev__cd { flex: none; display: flex; align-items: center; gap: 8px; }
.mcev__stato {
    font: 600 11px/1.15 Montserrat, "Segoe UI", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-align: right;
    max-width: 64px;
}
.mcev__cifre { display: flex; gap: 4px; }
.mcev__u {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 42px;
    padding: 3px 4px 2px;
    border-radius: 5px;
    background: var(--mcev-cd-sfondo);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25);
}
.mcev__u[hidden] { display: none; }
.mcev__u b {
    font: 700 19px/1.05 Montserrat, "Segoe UI", Helvetica, Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    color: var(--mcev-cd-cifre);
}
.mcev__u i { font-style: normal; font-size: 9.5px; line-height: 1.1; text-transform: uppercase; letter-spacing: .05em; color: var(--mcev-cd-unita); }
.mcev__item.is-onda .mcev__u { background: #cc0000; }
.mcev__item.is-onda .mcev__u b { color: #fff; }
.mcev__item.is-onda .mcev__u i { color: #ffd9d9; }

/* commemorazione: tassello fisso con data, ora UTC, frequenza/banda e modo al posto del conto alla rovescia (1.1.1);
   stesse celle del conto alla rovescia, ma restano grigie anche «In onda» */
.mcev__info { flex: none; display: flex; gap: 4px; }
.mcev__d {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    padding: 3px 7px 2px;
    border-radius: 5px;
    background: var(--mcev-cd-sfondo);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25);
}
.mcev__d b {
    font: 700 17px/1.1 Montserrat, "Segoe UI", Helvetica, Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--mcev-cd-cifre);
}
.mcev__d i { font-style: normal; font-size: 10px; line-height: 1.15; letter-spacing: .03em; white-space: nowrap; color: var(--mcev-cd-unita); }

.mcev__btn {
    flex: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 2px solid var(--mcev-testo);
    border-radius: 6px;
    font: 700 13px/1 Montserrat, "Segoe UI", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mcev-testo);
    background: rgba(255, 255, 255, .42);
    transition: background .2s, color .2s;
}
.mcev__freccia { width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
a.mcev__btn:hover, a.mcev__btn:focus-visible { background: var(--mcev-testo); color: #fff; text-decoration: none; }

/* frecce, posizione e pausa (solo con più eventi) */
.mcev__nav { flex: none; display: flex; align-items: center; gap: 2px; padding-left: 10px; border-left: 1px solid rgba(17, 43, 85, .25); }
.mcev__pos { min-width: 30px; text-align: center; font: 600 12px/1 Montserrat, "Segoe UI", Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums; }
.mcev__nav-btn {
    position: relative;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mcev-testo);
    cursor: pointer;
}
.mcev__nav-btn:hover, .mcev__nav-btn:focus-visible { background: rgba(17, 43, 85, .12); }
.mcev__prev::before, .mcev__next::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}
.mcev__prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.mcev__next::before { transform: translate(-70%, -50%) rotate(45deg); }
.mcev__pausa::before, .mcev__pausa::after {
    content: "";
    position: absolute;
    top: 9px;
    width: 3px;
    height: 10px;
    background: currentColor;
}
.mcev__pausa::before { left: 10px; }
.mcev__pausa::after { left: 15px; }
.mcev__pausa[aria-pressed="true"]::after { display: none; }
.mcev__pausa[aria-pressed="true"]::before {
    left: 11px;
    top: 8px;
    width: 0;
    height: 0;
    background: none;
    border-left: 9px solid currentColor;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

/* telefono: gli elementi vanno uno sotto l'altro, tutti centrati */
@media (max-width: 767px) {
    .mcev { margin-top: 16px; }
    .mcev__wrap { padding: 0 14px; flex-direction: column; align-items: stretch; gap: 0; }
    .mcev__link { flex-direction: column; justify-content: center; text-align: center; gap: 8px; padding: 14px 0 12px; }
    .mcev__testi { align-items: center; width: 100%; gap: 3px; }
    .mcev__riga1 { white-space: normal; display: flex; flex-direction: column; align-items: center; gap: 2px; }
    .mcev__titolo { font-size: 16px; }
    .mcev__testo::before { content: none; }
    .mcev__quando { font-size: 13px; white-space: normal; }
    .mcev__cd { flex-direction: column; gap: 4px; }
    .mcev__stato { max-width: none; text-align: center; font-size: 10.5px; }
    .mcev__u { min-width: 40px; }
    .mcev__u b { font-size: 17px; }
    .mcev__info { flex-wrap: wrap; justify-content: center; }
    .mcev__d { min-width: 46px; }
    .mcev__d b { font-size: 15px; }
    .mcev__btn { padding: 8px 14px; font-size: 12px; }
    .mcev__nav { justify-content: center; border-left: 0; border-top: 1px solid rgba(17, 43, 85, .18); padding: 3px 0; }
    .mcev__nav-btn { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    .mcev__item, .mcev__led { animation: none; }
    .mcev { transition: none; }
}
/* con il tassello visibile il contenuto sotto si avvicina un po' (di norma 32 px dalla fascia blu) */
.mc-eventi:has(.mcev) + .mc-body { padding-top: 22px; }

@media print {
    .mcev { display: none; }
}