/* Custom CSS - Compagnia Arcieri Castel Viscardo - v2.20.0 */
:root {
	--verde-notte: #0A2E1C;
	--verde-header: #0f4124;
	--oro: #F2B84A; /* v2.1.0: allineato al colore oro reale del logo CSEN (era #D4AF37) */
	--arancione: #FF8C00;
	--rosso: #B5432E;
	--blu: #1C6E8C;
	--crema: #F8F7F2;
	--carbone: #15181A;
	--grigio-testo: #666;
	--content-max-width: 1280px; /* v2.1.0: pagina allargata (era 1080px) */
	--sfondo-pagina: #E4DCC8; /* tortora/sabbia caldo, per staccare page-wrap dal bordo */
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--sfondo-pagina) !important; }
body { font-family: Arial, 'Helvetica Neue', sans-serif; color: var(--carbone); }
.page-wrap { max-width: var(--content-max-width); margin: 0 auto; background: #fff; }

/* Astra applica al proprio .ast-container un max-width/padding interno più stretto
   di --content-max-width: senza questo override il corpo pagina (a partire dalla
   hero) risulterebbe rientrato rispetto all'header, che è custom e non passa da
   questo contenitore. Uniforma tutto alla larghezza di .page-wrap. */
.ast-container { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
h1, h2, h3 { font-family: Arial, 'Helvetica Neue', sans-serif; font-weight: 800; text-transform: uppercase; margin: 0; }
.eyebrow { font-family: Arial, 'Helvetica Neue', sans-serif; letter-spacing: 2px; text-transform: uppercase; font-size: 10px; font-weight: 700; color: var(--rosso); }

/* ============ HEADER (v2.1.0: padding allineamento, nav maiuscolo/spaziato) ============ */
.mock-header-single { background: var(--verde-header); border-bottom: 4px solid var(--oro); position: relative; overflow: visible; display: flex; align-items: flex-start; justify-content: space-between; height: 82px; flex-shrink: 0; padding: 0 50px; }
.header-left { display: flex; align-items: flex-start; gap: 16px; }
.header-logo-img { display: block; width: 350px; height: auto; position: relative; z-index: 20; }
.csen-logo-img { width: 74px; height: 74px; display: block; margin-top: 2px; }
.mock-nav-list { display: flex; gap: 26px; align-items: center; list-style: none; margin: 0; padding: 0; }
.mock-nav { display: flex; align-items: center; height: 83px; white-space: nowrap; }
.mock-nav a { color: #fff; text-decoration: none; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.8px; }
.mock-nav a.active,
.mock-nav .current-menu-item > a,
.mock-nav .current-menu-ancestor > a { background: var(--arancione); padding: 6px 16px; border-radius: 20px; }

/* ============ CORPO: tutto in una schermata ============ */
.body-flex { }

/* ---- Hero compatto ---- */
.hero-compact { position: relative; height: 190px; background-color: #333; background-size: cover; background-position: center 30%; background-repeat: no-repeat; display: flex; align-items: center; padding: 0 50px; flex-shrink: 0; }
.hero-compact::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,46,28,0.88) 0%, rgba(10,46,28,0.55) 55%, rgba(10,46,28,0.25) 100%); }
.hero-compact-inner { position: relative; z-index: 1; color: #fff; max-width: 480px; }
.hero-compact-inner .eyebrow { color: var(--oro); font-size: 11px; }
.hero-compact-inner h1 { color: #fff; font-size: 26px; line-height: 1.05; margin: 6px 0 8px; }
.hero-compact-btn { display: inline-block; background: var(--arancione); color: #fff; padding: 8px 20px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 16px; border-radius: 6px; }

/* ---- Griglia principale a 3 colonne ---- */
.main-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 0; background: #fff; }
.main-grid > div { background: #fff; padding: 20px 26px 18px; display: flex; flex-direction: column; position: relative; z-index: 1; }
.main-grid > .col-chisiamo { position: relative; z-index: 3; }
.main-grid > .col-attivita { position: relative; z-index: 2; }
.main-grid > .col-chisiamo::after, .main-grid > .col-attivita::after { content: ""; position: absolute; top: 0; right: -20px; width: 20px; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.09), rgba(0,0,0,0.035) 45%, transparent 100%); pointer-events: none; }
.main-grid h2 { font-size: 16px; margin: 4px 0 10px; }

/* Chi Siamo */
.col-chisiamo p { font-size: 12.5px; line-height: 1.55; color: var(--grigio-testo); margin: 0 0 10px; }

/* ---- Terzetto di foto inclinate (versione compatta) ---- */
.mini-tilt-row { display: flex; gap: 10px; margin-bottom: 12px; }
.mini-tilt { position: relative; flex: 1; height: 62px; border-radius: 6px; overflow: hidden; }
.mini-tilt::before { content: ""; position: absolute; inset: -14px -22px; background-image: var(--bg-image); background-size: cover; background-position: center; transform: skewX(-10deg); }

/* Attività */
.col-attivita .attivita-mini-list { display: flex; flex-direction: column; gap: 16px; margin: 4px 0 12px; }
.attivita-mini { display: flex; align-items: center; gap: 10px; }
.attivita-mini img { height: 60px; width: auto; flex-shrink: 0; object-fit: contain; }
.attivita-mini span { font-size: 12.5px; font-weight: 700; }
.structures-heading { margin-top: 28px; }
.structures-mini-list { display: flex; flex-direction: column; gap: 16px; margin: 6px 0 10px; }

/* Evento + Contatti */
.col-destra { gap: 14px; }
.evento-mini { background: var(--verde-notte); color: #fff; border-radius: 8px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
.evento-mini .d { background: #fff; color: var(--verde-notte); border-radius: 6px; width: 38px; height: 38px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; line-height: 1; }
.evento-mini .d small { font-size: 8px; color: var(--rosso); font-weight: 700; }
.evento-mini .t { font-size: 11.5px; line-height: 1.4; }
.contatti-mini p { font-size: 12px; color: var(--grigio-testo); line-height: 1.6; margin: 0 0 8px; }
.social-row-mini { display: flex; gap: 10px; }
.social-icon-mini { width: 34px; height: 34px; border-radius: 50%; background: var(--verde-notte); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; text-decoration: none; }
.social-icon-mini svg { width: 16px; height: 16px; }

.link-more-mini { color: var(--verde-notte); font-weight: 700; text-decoration: none; font-size: 11.5px; margin-top: 14px; align-self: flex-start; border-bottom: 2px solid var(--oro); padding-bottom: 1px; }
.link-more-mini:hover { color: var(--rosso); }

/* ---- Striscia galleria ---- */
.galleria-strip { display: grid; grid-template-columns: 0.55fr 0.55fr 0.5fr 0.5fr 0.5fr 0.5fr; height: 90px; flex-shrink: 0; }
.galleria-strip .ph { background-size: cover; background-position: center; position: relative; }
.galleria-strip .ph .vedi-tutte-label { position: absolute; bottom: 8px; right: 12px; color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; text-decoration: none; text-shadow: 0 1px 3px rgba(0,0,0,0.7); letter-spacing: 0.5px; }

/* ---- Pulsante flottante scorri su/giu ---- */
.scroll-toggle-btn { position: fixed; right: 24px; bottom: 24px; width: 44px; height: 44px; border-radius: 50%; background: var(--verde-notte); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.25); z-index: 999; transition: background 0.2s ease, transform 0.2s ease; }
.scroll-toggle-btn:hover { background: var(--verde-header); }
.scroll-toggle-btn svg { transition: transform 0.25s ease; }
.scroll-toggle-btn.at-bottom svg { transform: rotate(180deg); }

/* ============ FOOTER (invariato, compattato) ============ */
.mock-footer { background: var(--carbone); color: #8a8f8b; text-align: center; padding: 10px; font-size: 0.72rem; flex-shrink: 0; }
.mock-footer a { color: var(--oro); text-decoration: none; font-weight: 600; }