/* ===== Intestazione ANA Vercelli ===== */
:root {
  --ana-verde: #355E3B;
  --ana-verde-scuro: #1E3A22;
  --ana-rosso: #C8102E;
}

/* Striscia verde con profilo delle montagne e linea tricolore in fondo */
.container-header {
  background-color: var(--ana-verde);
  background-image:
    linear-gradient(90deg, #009246 0 33.3%, #ffffff 33.3% 66.6%, #CE2B37 66.6%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='.06' d='M0 160V95l90-45 70 30 110-70 90 55 60-25 120 80 100-60 80 35 130-90 110 70 70-30 120 75 90-40 110 50 90-35v150z'/%3E%3Cpath fill='%23000000' fill-opacity='.18' d='M0 160v-35l120-40 80 25 130-55 100 50 90-20 110 45 140-70 100 40 80-25 140 60 110-35 120 40 120-30v100z'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #3d6b44 0%, var(--ana-verde) 100%);
  background-size: 100% 5px, 100% 140px, 100% 100%;
  background-position: bottom, bottom 5px center, top;
  background-repeat: no-repeat;
  padding-bottom: 5px;
  border-bottom: none;
}

/* Logo + scritta "Sezione di Vercelli" affiancati */
.container-header .navbar-brand {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
}
.container-header .brand-logo img {
  max-height: 130px;
  width: auto;
  transition: transform .3s;
}
.container-header .brand-logo:hover img { transform: scale(1.04); }

.container-header .site-description {
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  white-space: nowrap;
}
.container-header .site-description::before {
  content: "Associazione Nazionale Alpini";
  display: block;
  margin-bottom: .35rem;
  font-family: system-ui, Arial, sans-serif;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .85;
}
.container-header .site-description::after {
  content: "dal 1924";
  display: block;
  width: fit-content;
  margin-top: .5rem;
  padding-top: .35rem;
  border-top: 3px solid var(--ana-rosso);
  font-family: system-ui, Arial, sans-serif;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .9;
}

/* Voci del menu */
.container-header .metismenu.mod-menu > .metismenu-item { padding: 0; }
.container-header .metismenu > li > a {
  display: block;
  padding: .7rem 1.1rem;
  border-radius: 6px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  transition: background-color .2s;
}
.container-header .metismenu > li > a:hover { background-color: rgba(255, 255, 255, .14); }

.container-header .metismenu > li > a:after { height: 3px; bottom: 2px; border-radius: 2px; }
.container-header .metismenu > li > a:hover:after,
.container-header .metismenu > li.active > a:after {
  background: var(--ana-rosso); opacity: 1; left: 1.1rem; right: 1.1rem;
}

.container-header .metismenu > li > button.mm-toggler { margin-inline-start: -.7rem; padding: 0 .4rem; color: #fff; }
.container-header .metismenu > li > button.mm-toggler:before { display: none; }
.container-header .metismenu > li > button.mm-toggler:focus:not(:focus-visible) { outline: none; }

.container-header .metismenu.mod-menu .mm-collapse {
  background-color: var(--ana-verde-scuro);
  border-radius: 0 0 8px 8px;
  padding: .4rem 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}
.container-header .metismenu .mm-collapse a { color: #fff; text-decoration: none !important; }
.container-header .metismenu .mm-collapse .metismenu-item:hover { background-color: rgba(255, 255, 255, .10); }

/* Schermo grande: logo e scritta a sinistra, menu in basso a destra */
@media (min-width: 992px) {
  .container-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    padding-inline: max(1rem, calc((100% - 1320px) / 2));
  }
  .container-header > .grid-child { margin: 0; width: auto; }
  .container-header > .grid-child:has(.navbar-brand) { flex: 0 0 auto; }
  .container-header > .container-nav {
    flex: 1 1 auto;
    justify-content: flex-end;
    padding-bottom: 1.2rem;   /* distanza del menu dal fondo della striscia */
  }
  .container-header .container-nav .mod-menu { justify-content: flex-end; gap: .2rem; }
}

/* Telefono: tutto più compatto */
@media (max-width: 767px) {
  .container-header .navbar-brand { gap: .8rem; padding-top: 1rem; padding-bottom: 1rem; }
  .container-header .brand-logo img { max-height: 80px; }
  .container-header .site-description { font-size: 1.5rem; white-space: normal; }
  .container-header .site-description::before,
  .container-header .site-description::after { font-size: .65rem; letter-spacing: .15em; }
}

/* ===================== RIQUADRI DEI MODULI ===================== */

/* --- "In primo piano": 4 schede in alto (posizione top-a) --- */
.container-top-a .card:has(.ana-cards) { border: 0; background: none; box-shadow: none; }
.container-top-a .card:has(.ana-cards) > .card-body { padding: 0; }
.ana-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin: .5rem 0 1rem;
}
.ana-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  border-top: 4px solid var(--ana-verde);
  transition: transform .2s, box-shadow .2s;
}
.ana-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0, 0, 0, .14); }
.ana-card > a { display: block; aspect-ratio: 16 / 10; background: #eef2ec; overflow: hidden; }
.ana-card > a img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ana-card-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.ana-card-body h3 { font-size: 1.1rem; margin: 0 0 .4rem; text-transform: uppercase; letter-spacing: .04em; }
.ana-card-body h3 a { color: var(--ana-verde-scuro); text-decoration: none; }
.ana-card-body p { font-size: .95rem; color: #555; margin: 0 0 .8rem; flex: 1; }

/* Link "Scopri di più" */
.ana-more {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ana-rosso) !important;
  text-decoration: none !important;
}
.ana-more::after { content: " →"; }
.ana-more:hover { text-decoration: underline !important; }

/* --- Colonna di destra: intestazioni dei riquadri in verde --- */
.container-sidebar-right .card { border: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.container-sidebar-right .card-header {
  background: var(--ana-verde);
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-bottom: 3px solid var(--ana-rosso);
}

/* Consiglio */
.ana-consiglio { list-style: none; margin: 0 0 .6rem; padding: 0; }
.ana-consiglio li { padding: .5rem 0; border-bottom: 1px solid #e6ebe4; }
.ana-consiglio li:last-child { border-bottom: 0; }
.ana-consiglio strong { display: block; color: var(--ana-verde-scuro); }
.ana-consiglio span { font-size: .85rem; color: #666; }

/* Link utili */
.ana-links { list-style: none; margin: 0; padding: 0; }
.ana-links li { border-bottom: 1px solid #e6ebe4; }
.ana-links li:last-child { border-bottom: 0; }
.ana-links a { display: block; padding: .55rem 0 .55rem 1.2rem; position: relative; color: var(--ana-verde-scuro); text-decoration: none; }
.ana-links a::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-radius: 50%; background: var(--ana-rosso); }
.ana-links a:hover { color: var(--ana-rosso); }

/* Banner (Centenario, Alpin d'la Bassa) */
.ana-banner { margin: 0 0 .6rem; text-align: center; }
.ana-banner img { max-width: 100%; height: auto; border-radius: 6px; }

/* --- Frase celebre (posizione bottom-a) --- */
.container-bottom-a .card:has(.ana-quote) { border: 0; background: none; box-shadow: none; }
.ana-quote {
  position: relative;
  margin: 1.5rem 0;
  padding: 2rem 2.5rem 2rem 4.5rem;
  background: var(--ana-verde);
  color: #fff;
  border-radius: 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.6;
}
.ana-quote::before {
  content: "“";
  position: absolute;
  left: 1.2rem;
  top: .3rem;
  font-size: 5rem;
  line-height: 1;
  color: var(--ana-rosso);
}
.ana-quote p { margin: 0; }

/* --- Piè di pagina (posizione footer) --- */
.container-footer { background: var(--ana-verde-scuro) !important; }
.ana-footer {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
  width: 100%;
  padding: 1rem 0;
  color: rgba(255, 255, 255, .85);
}
.ana-footer h4 {
  color: #fff;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--ana-rosso);
  display: inline-block;
}
.ana-footer a { color: #fff; }
.ana-social {
  display: inline-block;
  padding: .4rem 1rem;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 6px;
  text-decoration: none;
}
.ana-social:hover { background: rgba(255, 255, 255, .12); }
.ana-copy { width: 100%; margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .15); font-size: .85rem; color: rgba(255, 255, 255, .6); text-align: center; }
.container-footer .grid-child:has(.ana-footer) { flex-direction: column; align-items: stretch; }

/* --- Tablet e telefono --- */
@media (max-width: 991px) {
  .ana-cards { grid-template-columns: repeat(2, 1fr); }
  .ana-footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
  .ana-cards { grid-template-columns: 1fr; }
  .ana-footer { grid-template-columns: 1fr; }
  .ana-quote { padding: 1.5rem 1.2rem 1.5rem 3.2rem; font-size: 1.05rem; }
  .ana-quote::before { left: .6rem; font-size: 3.5rem; }
}

/* Immagini da non ritagliare (es. loghi): aggiungi class="ana-fit" al link dell'immagine */
.ana-card > a.ana-fit img { object-fit: contain; padding: .8rem; background: #fff; }

/* --- Articoli vecchi: immagini e tabelle che non escono dallo schermo del telefono --- */
.site-grid img { max-width: 100%; height: auto; }
@media (max-width: 767px) {
  .site-grid table { display: block; max-width: 100%; overflow-x: auto; }
  .pagination { flex-wrap: wrap; }
}
/* "In primo piano" solo nella pagina iniziale, non dentro gli articoli */
body.view-article .container-top-a {
  display: none;
}