/* ============================================================================
   MOVIAGGIO — Home "Magazine" (direzione editoriale audace)
   Namespace mvm-* per non toccare le classi mv-* esistenti.
   Usa i token e i font del design system (DM Serif Display / Fraunces / IBM Plex Mono).
   ============================================================================ */

.mvm-kick { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .24em;
    text-transform: uppercase; font-weight: 500; }

/* ---------- MASTHEAD (riga d'edizione) ---------- */
.mvm-mast { text-align: center; padding: 30px 0 8px; }
.mvm-mast__rule { display: flex; align-items: center; gap: 18px;
    font-family: var(--font-mono); font-size: .66rem; letter-spacing: .26em;
    text-transform: uppercase; color: var(--mv-ink); }
.mvm-mast__rule::before, .mvm-mast__rule::after {
    content: ""; flex: 1; height: 1px; background: rgba(26,24,20,.75); }
.mvm-mast__tag { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .34em;
    text-transform: uppercase; color: var(--mv-stone); margin-top: 12px; }

/* ---------- COVER (la copertina) ---------- */
.mvm-cover { position: relative; min-height: clamp(440px, 74vh, 700px);
    border-radius: 5px; overflow: hidden; display: flex; align-items: flex-end;
    color: #f6f1e6; margin-top: 10px; isolation: isolate; }
.mvm-cover__img { position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: -2; }
.mvm-cover__fallback { position: absolute; inset: 0; z-index: -2;
    background: radial-gradient(130% 120% at 74% 8%, #2f6b74, #123c44 46%, #0b2027 78%, #08161b); }
.mvm-cover::after { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top, rgba(8,16,20,.86), rgba(8,16,20,.10) 62%); }
.mvm-cover__corner { position: absolute; top: 20px; right: 24px; text-align: right;
    font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; color: rgba(246,241,230,.9); }
.mvm-cover__corner b { display: block; font-family: var(--font-display); font-size: 1.6rem;
    letter-spacing: 0; color: var(--mv-ochre); }
.mvm-cover__in { position: relative; z-index: 2; padding: clamp(24px, 4vw, 48px); max-width: 900px; }
.mvm-cover__kick { color: var(--mv-ochre); margin-bottom: 14px; }
.mvm-cover__title { font-family: var(--font-display); font-weight: 400;
    letter-spacing: -.01em; line-height: 1.02; font-size: clamp(2.1rem, 5.4vw, 4.3rem);
    margin: 0; text-wrap: balance; color: #fff; }
.mvm-cover__dek { font-family: var(--font-ui); font-size: clamp(.98rem, 1.5vw, 1.14rem);
    line-height: 1.55; max-width: 54ch; margin: 18px 0 0; color: rgba(246,241,230,.86); }
.mvm-cover__by { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
    text-transform: uppercase; margin-top: 18px; color: rgba(246,241,230,.72); }
.mvm-cover__by b { color: #fff; }
.mvm-strilli { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 24px;
    font-family: var(--font-ui); font-size: .92rem; font-weight: 600; }
.mvm-strilli a { display: flex; align-items: center; gap: 10px; color: rgba(246,241,230,.94); }
.mvm-strilli a::before { content: ""; width: 16px; height: 2px; background: var(--mv-coral); flex-shrink: 0; }
.mvm-strilli a:hover { color: var(--mv-ochre); }

/* ---------- SEARCH BAND ---------- */
.mvm-search { border-bottom: 1px solid var(--mv-pearl); padding: 22px 0; }
.mvm-search__form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mvm-search__lead { font-family: var(--font-display); font-size: 1.3rem; margin-right: 8px; color: var(--mv-deep-sea); }
.mvm-search__input { flex: 1; min-width: 200px; border: 1px solid var(--mv-pearl);
    background: #fff; border-radius: 3px; padding: 12px 16px; font-family: var(--font-ui);
    font-size: 1rem; outline: none; }
.mvm-search__input:focus { border-color: var(--mv-coral); }
.mvm-search__select { border: 1px solid var(--mv-pearl); background: #fff; border-radius: 3px;
    padding: 12px 14px; font-family: var(--font-ui); font-size: .95rem; color: var(--mv-ink); }
.mvm-search__btn { border: 0; background: var(--mv-coral); color: #fff; font-family: var(--font-ui);
    font-weight: 700; padding: 13px 26px; border-radius: 3px; cursor: pointer; }
.mvm-search__btn:hover { background: #c72e3b; }

/* ---------- SOMMARIO ---------- */
.mvm-contents { padding: clamp(48px, 7vh, 84px) 0; border-bottom: 1px solid var(--mv-pearl); }
.mvm-contents__grid { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(24px, 5vw, 64px); }
.mvm-contents__lead h2 { font-family: var(--font-display); font-weight: 400;
    font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1; margin: .4rem 0 0; letter-spacing: -.01em; color: var(--mv-deep-sea); }
.mvm-contents__lead p { font-family: var(--font-ui); color: var(--mv-stone); font-size: .95rem;
    line-height: 1.6; max-width: 34ch; margin-top: 16px; }
.mvm-toc { border-top: 2px solid var(--mv-ink); }
.mvm-toc__row { display: grid; grid-template-columns: 108px 1fr auto; gap: 16px; align-items: baseline;
    padding: 15px 0; border-bottom: 1px solid var(--mv-pearl); transition: padding-left .2s ease; color: inherit; }
.mvm-toc__row:hover { padding-left: 8px; }
.mvm-toc__row:hover .mvm-toc__title { color: var(--mv-coral); }
.mvm-toc__dept { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--mv-stone); }
.mvm-toc__title { font-family: var(--font-editorial); font-weight: 500; font-size: 1.18rem; line-height: 1.2; color: var(--mv-ink); }
.mvm-toc__title small { font-family: var(--font-ui); font-size: .78rem; color: var(--mv-stone); margin-left: 8px; font-weight: 400; }
.mvm-toc__pg { font-family: var(--font-mono); font-size: .78rem; color: var(--mv-coral); }
@media (max-width: 820px) { .mvm-contents__grid { grid-template-columns: 1fr; gap: 26px; }
    .mvm-toc__row { grid-template-columns: 92px 1fr auto; } }

/* ---------- SECTION HEAD ---------- */
.mvm-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
    border-bottom: 2px solid var(--mv-ink); padding-bottom: 14px; margin-bottom: 34px; }
.mvm-sechead h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.3rem);
    margin: 0; letter-spacing: -.01em; color: var(--mv-deep-sea); }
.mvm-sechead .mvm-kick { color: var(--mv-coral); display: block; margin-bottom: 8px; }
.mvm-sechead a { font-family: var(--font-ui); font-weight: 600; font-size: .88rem; color: var(--mv-coral); white-space: nowrap; }

/* ---------- REPORTAGE (feature grid) ---------- */
.mvm-feat { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.mvm-art { grid-column: span 4; display: flex; flex-direction: column; gap: 12px; color: inherit; }
.mvm-art--big { grid-column: span 6; }
.mvm-art__img { position: relative; border-radius: 3px; overflow: hidden; aspect-ratio: 4/3; background: var(--mv-pearl); }
.mvm-art--big .mvm-art__img { aspect-ratio: 16/10; }
.mvm-art__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.mvm-art:hover .mvm-art__img img { transform: scale(1.05); }
.mvm-art__folio { position: absolute; top: 12px; left: 13px; z-index: 2; font-family: var(--font-mono);
    font-size: .66rem; letter-spacing: .14em; color: #fff; background: rgba(23,19,13,.55); padding: 3px 8px; border-radius: 2px; }
.mvm-art__dept { color: var(--mv-coral); }
.mvm-art__title { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; line-height: 1.14;
    letter-spacing: -.01em; color: var(--mv-ink); }
.mvm-art--big .mvm-art__title { font-size: 2rem; }
.mvm-art__dek { font-family: var(--font-ui); font-size: .9rem; color: var(--mv-stone); line-height: 1.5; margin: 0; }
.mvm-art__by { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mv-stone); }
@media (max-width: 860px) { .mvm-art, .mvm-art--big { grid-column: span 6; } }
@media (max-width: 560px) { .mvm-art, .mvm-art--big { grid-column: span 12; } }

/* ---------- PULL QUOTE ---------- */
.mvm-pq { border-top: 1px solid var(--mv-pearl); border-bottom: 1px solid var(--mv-pearl);
    text-align: center; padding: clamp(44px, 7vh, 82px) 0; }
.mvm-pq blockquote { font-family: var(--font-display); font-style: italic; font-size: clamp(1.6rem, 3.6vw, 2.7rem);
    line-height: 1.2; max-width: 22ch; margin: 0 auto; letter-spacing: -.01em; color: var(--mv-deep-sea); }
.mvm-pq blockquote em { color: var(--mv-coral); font-style: italic; }
.mvm-pq cite { display: block; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--mv-stone); margin-top: 22px; font-style: normal; }

/* ---------- RUBRICHE (entry points) ---------- */
.mvm-rubriche { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--mv-ink); }
.mvm-rub { padding: 30px 26px; border-right: 1px solid var(--mv-pearl); transition: background .25s ease; color: inherit; display: block; }
.mvm-rub:last-child { border-right: 0; }
.mvm-rub:hover { background: var(--mv-sand); }
.mvm-rub__n { font-family: var(--font-display); font-style: italic; font-size: 1.9rem; color: var(--mv-coral); }
.mvm-rub h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin: 10px 0 8px; color: var(--mv-deep-sea); }
.mvm-rub p { font-family: var(--font-ui); font-size: .9rem; color: var(--mv-stone); line-height: 1.5; margin: 0 0 14px; }
.mvm-rub__go { font-family: var(--font-ui); font-weight: 700; font-size: .85rem; color: var(--mv-coral); }
@media (max-width: 760px) { .mvm-rubriche { grid-template-columns: 1fr; }
    .mvm-rub { border-right: 0; border-bottom: 1px solid var(--mv-pearl); }
    .mvm-rub:last-child { border-bottom: 0; } }

.mvm-note { background: var(--mv-sand); border-radius: 3px; padding: 13px 18px; margin-top: 24px;
    font-family: var(--font-mono); font-size: .72rem; letter-spacing: .02em; color: var(--mv-stone); }

/* ============================================================================
   Armonizzazione magazine delle liste che usano .mv-post-card
   (itinerari, confronti, blog): titoli serif display + occhielli mono corallo.
   Additivo, non ristruttura il layout esistente.
   ============================================================================ */
.mv-post-card__title { font-family: var(--font-display); font-weight: 400; letter-spacing: -.01em; }
.mv-post-card__cat {
    font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--mv-coral);
}
/* Occhielli di sezione in accento magazine su tutte le pagine editoriali */
.mv-page-itineraries .mv-eyebrow,
.mv-page-comparisons .mv-eyebrow,
.mv-page-blog .mv-eyebrow { color: var(--mv-coral); }

/* ============================================================================
   HOME web-native (v4.1): barra edizione snella, CTA, hover, feed filtrabile.
   ============================================================================ */

/* Barra edizione (sostituisce la testata cerimoniale da stampa) */
.mvm-editbar { display: flex; justify-content: space-between; align-items: center; gap: 16px;
    flex-wrap: wrap; padding: 20px 0 16px; border-bottom: 1px solid var(--mv-pearl); margin-bottom: 10px; }
.mvm-editbar .mvm-kick { color: var(--mv-stone); }
.mvm-editbar__link { font-family: var(--font-ui); font-weight: 600; font-size: .85rem; color: var(--mv-coral); }
.mvm-editbar__link:hover { text-decoration: underline; }

/* CTA reale sulla copertina */
.mvm-cover__cta { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px;
    background: var(--mv-coral); color: #fff; font-family: var(--font-ui); font-weight: 700; font-size: .92rem;
    padding: 13px 24px; border-radius: 3px; width: fit-content;
    transition: background .2s ease, transform .2s ease, gap .2s ease; }
.mvm-cover__cta:hover { background: #c72e3b; transform: translateY(-2px); gap: 13px; }

/* Card reportage: hover "Apri la guida" invece del folio da carta */
.mvm-art { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.mvm-art:hover { transform: translateY(-4px); }
.mvm-art__open { position: absolute; left: 13px; bottom: 13px; z-index: 2;
    font-family: var(--font-ui); font-weight: 700; font-size: .8rem; color: #fff;
    background: rgba(23,19,13,.55); backdrop-filter: blur(4px); padding: 7px 13px; border-radius: 999px;
    opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.mvm-art:hover .mvm-art__open { opacity: 1; transform: none; }
@media (hover: none) { .mvm-art__open { opacity: 1; transform: none; } }

/* Feed filtrabile con tab */
.mvm-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;
    border-bottom: 1px solid var(--mv-pearl); }
.mvm-tab { border: 0; background: transparent; font-family: var(--font-ui); font-weight: 600;
    font-size: .92rem; color: var(--mv-stone); padding: 11px 6px; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s ease, border-color .2s ease; }
.mvm-tab:hover { color: var(--mv-ink); }
.mvm-tab.is-active { color: var(--mv-coral); border-bottom-color: var(--mv-coral); }
.mvm-feed { display: grid; }
.mvm-feed__row { display: grid; grid-template-columns: 108px 1fr auto; gap: 16px; align-items: center;
    padding: 16px 6px; border-bottom: 1px solid var(--mv-pearl); color: inherit;
    transition: padding-left .2s ease; }
.mvm-feed__row:hover { padding-left: 12px; }
.mvm-feed__row:hover .mvm-feed__title { color: var(--mv-coral); }
.mvm-feed__row:hover .mvm-feed__arrow { transform: translateX(5px); color: var(--mv-coral); }
.mvm-feed__dept { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--mv-stone); }
.mvm-feed__title { font-family: var(--font-editorial); font-weight: 500; font-size: 1.14rem;
    line-height: 1.25; color: var(--mv-ink); }
.mvm-feed__title small { font-family: var(--font-ui); font-size: .76rem; color: var(--mv-stone);
    margin-left: 10px; font-weight: 400; }
.mvm-feed__arrow { font-size: 1.15rem; color: var(--mv-stone); transition: transform .2s ease, color .2s ease; }
@media (max-width: 600px) {
    .mvm-feed__row { grid-template-columns: 1fr auto; }
    .mvm-feed__dept { display: none; }
}