/* =========================================================================
   U.S. SERLE — Design system
   Concept: il "biglietto partita" — la scheda a matrice da stadio con
   bordo perforato è l'elemento firma, riusato per prossima partita,
   cronache ed elenco calendario. Palette bianco/blu sociale + un accento
   ambra da pennant di promozione. Titoli in Space Grotesk (tabellone),
   testo in Inter, numeri/punteggi in JetBrains Mono (stile scoreboard).
   ========================================================================= */

:root{
  --blue-900:#08243f;
  --blue-800:#0c3a63;
  --blue-700:#0f5ea8;
  --blue-600:#1672c9;
  --blue-400:#5fa3e0;
  --blue-100:#e8f1fb;
  --ivory:#f4f8fc;
  --white:#ffffff;
  --amber:#f2a900;
  --amber-dark:#c88600;
  --ink:#0d1b2a;
  --grey-600:#4d5a6b;
  --grey-400:#8592a3;
  --grey-200:#dbe3ec;
  --green:#1f9d55;
  --red:#d1453b;

  --radius-s:0px;
  --radius-m:0px;
  --radius-l:0px;
  --shadow-1:0 2px 10px rgba(8,36,63,.08);
  --shadow-2:0 14px 34px rgba(8,36,63,.14);
  --container:1180px;

  --font-display:"Ubuntu", sans-serif;
  --font-body:"Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:"Ubuntu Mono", "SFMono-Regular", Consolas, monospace;

  --stripe-pattern: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 34px);
  --dot-pattern: radial-gradient(rgba(15,94,168,.16) 1.4px, transparent 1.4px);
}

.icon{width:1.2em; height:1.2em; vertical-align:-0.2em; flex:0 0 auto;}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}
a{color:var(--blue-700); text-decoration:none;}
a:hover{color:var(--blue-600); text-decoration:underline;}
h1,h2,h3,h4{font-family:var(--font-display); line-height:1.15; margin:0 0 .5em; color:var(--blue-900); font-weight:700;}
p{margin:0 0 1em;}
ul{margin:0; padding:0;}
:focus-visible{outline:3px solid var(--amber); outline-offset:2px;}

.container{max-width:var(--container); margin:0 auto; padding:0 20px;}
.clear{clear:both;}
.only-mobile{display:none;}
.eyebrow{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em;
  font-size:.72rem; color:var(--blue-700); font-weight:700;
}
.pill{
  display:inline-block; padding:.3em .9em; font-size:.78rem;
  background:var(--blue-100); color:var(--blue-800); font-weight:600;
}
.btn{
  display:inline-flex; align-items:center; gap:.55em; padding:.85em 1.7em;
  background:var(--blue-700); color:var(--white); font-weight:700;
  border:none; cursor:pointer; font-family:var(--font-body); font-size:.82rem;
  text-transform:uppercase; letter-spacing:.05em;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  position:relative; isolation:isolate; z-index:0;
}
.btn .icon{width:15px; height:15px; position:relative; z-index:1;}
.btn:hover{background:var(--blue-600); color:var(--white); text-decoration:none; transform:translateY(-2px); box-shadow:0 8px 18px rgba(8,36,63,.22);}

/* Pulsante "outline": due strati clippati con lo stesso taglio d'angolo, cosi
   il bordo segue anche la diagonale (un semplice box-shadow/border non la segue). */
.btn.btn-ghost{
  --ghost-fill: var(--white);
  --ghost-fill-hover: var(--blue-100);
  background:var(--blue-700); color:var(--blue-700);
}
.btn.btn-ghost::before{
  content:""; position:absolute; top:2px; right:2px; bottom:2px; left:2px; z-index:-1;
  background:var(--ghost-fill);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition:background .15s ease;
}
.btn.btn-ghost:hover{background:var(--blue-700);}
.btn.btn-ghost:hover::before{background:var(--ghost-fill-hover);}
.section.alt .btn.btn-ghost{--ghost-fill:var(--ivory); --ghost-fill-hover:var(--blue-100);}

/* Variante per pulsanti outline sopra una foto (es. hero): anello bianco,
   riempimento vetro scuro semitrasparente invece di un colore pieno. */
.btn.btn-ghost.btn-ghost-hero{
  background:var(--white); color:var(--white);
  --ghost-fill: rgba(8,36,63,.4);
  --ghost-fill-hover: rgba(8,36,63,.6);
}
.btn.btn-ghost.btn-ghost-hero::before{backdrop-filter:blur(2px);}

.btn.btn-amber{background:var(--amber); color:var(--blue-900);}
.btn.btn-amber:hover{background:var(--amber-dark); color:var(--blue-900);}
.btn.btn-sm{padding:.6em 1.2em; font-size:.72rem; clip-path:polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));}
.btn.btn-sm.btn-ghost::before{clip-path:polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px));}

/* ============================= HEADER / NAV ============================= */
.site-header{
  position:sticky; top:0; z-index:100; background:var(--white);
  box-shadow:0 1px 0 var(--grey-200);
}
.header-top{
  background:var(--blue-900); color:#cfe1f5; font-size:.78rem;
}
.header-top .container{display:flex; justify-content:space-between; align-items:center; padding-top:6px; padding-bottom:6px;}
.header-top a{color:#cfe1f5;}
.header-top a:hover{color:var(--white);}
.header-social{display:flex; align-items:center; gap:12px;}
.header-social .icon{width:15px; height:15px;}
.header-main .container{
  display:flex; align-items:center; gap:24px; padding-top:14px; padding-bottom:14px;
}
.brand{display:flex; align-items:center; gap:14px; flex:0 0 auto;}
.brand img{width:60px; height:60px;}
.brand .brand-text{font-family:var(--font-display); line-height:1.1;}
.brand .brand-text strong{display:block; font-size:1.15rem; color:var(--blue-900);}
.brand .brand-text span{display:block; font-size:.72rem; color:var(--grey-600); font-weight:500; font-family:var(--font-body);}

.main-nav{margin-left:auto;}
.main-nav ul{display:flex; gap:4px; list-style:none;}
.main-nav a, .main-nav span.current{
  display:inline-block; padding:.7em .95em; font-weight:600;
  font-size:.88rem; color:var(--blue-900); border-bottom:2px solid transparent;
  text-transform:uppercase; letter-spacing:.02em; font-family:var(--font-mono); font-size:.74rem;
}
.main-nav a:hover{color:var(--blue-700); text-decoration:none; border-bottom-color:var(--grey-200);}
.main-nav span.current{color:var(--blue-700); border-bottom-color:var(--amber);}

.nav-toggle{
  display:none; background:none; border:2px solid var(--blue-700); border-radius:0;
  width:44px; height:44px; position:relative; cursor:pointer; flex:0 0 auto;
  margin-left:auto;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:9px; right:9px; height:2px; background:var(--blue-700);
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle span{top:21px;}
.nav-toggle span::before{top:-7px;}
.nav-toggle span::after{top:7px;}
.nav-toggle[aria-expanded="true"] span{background:transparent;}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg);}

@media (max-width: 900px){
  .only-mobile{display:block;}
  .nav-toggle{display:block;}
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(320px, 86vw); height:100vh;
    background:var(--blue-900); transform:translateX(100%); transition:transform .25s ease;
    padding:90px 24px 24px; overflow-y:auto; z-index:95;
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav ul{flex-direction:column; gap:2px;}
  .main-nav a, .main-nav span.current{color:#e8f1fb; width:100%; padding:.9em 1em;}
  .main-nav a:hover{background:rgba(255,255,255,.08);}
  .main-nav span.current{background:var(--amber); color:var(--blue-900);}
  .nav-scrim{position:fixed; inset:0; background:rgba(8,20,35,.5); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:90;}
  .nav-scrim.open{opacity:1; pointer-events:auto;}
}

/* sottomenu di sezione: tab con sottolineatura, non più pillole */
.subnav{display:flex; flex-wrap:wrap; gap:26px; margin:0 0 30px; border-bottom:1px solid var(--grey-200);}
.subnav a, .subnav span.current{
  padding:0 0 12px; font-size:.86rem; font-weight:600; color:var(--grey-600);
  border-bottom:3px solid transparent; margin-bottom:-1px;
}
.subnav span.current{color:var(--blue-800); border-bottom-color:var(--amber);}
.subnav a:hover{color:var(--blue-700); text-decoration:none; border-bottom-color:var(--grey-200);}

.breadcrumbs{font-size:.82rem; color:var(--grey-600); margin:22px 0 18px;}
.breadcrumbs a{color:var(--grey-600);}

/* ============================= HERO (split, texture, foto duotone) ============================= */
.hero{
  position:relative; overflow:hidden; color:var(--white);
  display:grid; grid-template-columns:1fr 1.15fr; min-height:600px;
  background:
    radial-gradient(at 15% 15%, rgba(95,163,224,.35), transparent 55%),
    radial-gradient(at 90% 10%, rgba(242,169,0,.16), transparent 45%),
    radial-gradient(at 50% 100%, rgba(15,94,168,.5), transparent 60%),
    linear-gradient(160deg, var(--blue-900) 0%, var(--blue-800) 100%);
}
.hero::before{
  /* texture a grana sottile, per un effetto meno "piatto" e più materico */
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}
.hero-content{
  position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center;
  padding:64px 44px 64px clamp(20px,5vw,64px);
}
.hero-photo{
  position:relative; overflow:hidden;
  clip-path:polygon(9% 0, 100% 0, 100% 100%, 0 100%);
}
.hero-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center 25%;
  filter:grayscale(.25) contrast(1.08) saturate(1.05);
}
.hero-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, var(--blue-900) 0%, rgba(8,36,63,.55) 14%, transparent 40%),
             linear-gradient(0deg, rgba(6,26,46,.55) 0%, transparent 35%),
             linear-gradient(200deg, rgba(15,94,168,.35), transparent 60%);
  mix-blend-mode:multiply;
}
.hero-photo .photo-credit{
  position:absolute; right:18px; bottom:16px; z-index:1; font-family:var(--font-mono); font-size:.66rem;
  color:rgba(255,255,255,.6); letter-spacing:.04em; text-transform:uppercase;
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr; min-height:0;}
  .hero-photo{height:280px; clip-path:none;}
  .hero-content{padding:44px 20px 40px; order:2;}
  .hero-photo{order:1;}
}

.hero-badge{
  display:inline-flex; align-items:center; gap:9px; border-left:3px solid var(--amber);
  padding:.35em 0 .35em .8em; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color:#d7e6f7; margin-bottom:20px;
}
.hero-badge .dot{width:7px; height:7px; background:var(--amber); flex:0 0 auto;}
.hero h1{color:var(--white); font-size:clamp(2rem, 3.6vw, 2.9rem); margin-bottom:.4em; max-width:14ch; font-weight:700;}
.hero .lede{color:#d7e6f7; font-size:1.02rem; max-width:42ch;}
.hero .hero-actions{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}
.hero .hero-actions .btn .icon{width:16px; height:16px;}

/* Signature component: prossima partita, con countdown live e monogrammi squadra */
.next-match{
  background:var(--white); color:var(--ink); position:relative; overflow:hidden;
  box-shadow:var(--shadow-2); border-top:4px solid var(--amber);
}
.next-match .nm-head{
  background:var(--blue-900); color:#cfe1f5; padding:16px 22px; display:flex; align-items:flex-start;
  justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.next-match .nm-head .nm-titles{display:flex; flex-direction:column; gap:3px;}
.next-match .nm-head .nm-title{
  font-family:var(--font-display); font-weight:700; font-size:1rem; text-transform:uppercase; letter-spacing:.03em;
  color:#fff; display:flex; align-items:center; gap:8px;
}
.next-match .nm-head .nm-subtitle{
  font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:#9fb9d8;
}
.next-match .nm-head .icon{width:15px; height:15px;}
.next-match .nm-head .nm-giornata{background:var(--amber); color:var(--blue-900); padding:.3em .8em; font-weight:700; font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em;}
.next-match .nm-matchup{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:10px; padding:30px 20px 18px; text-align:center;
}
.next-match .nm-team{display:flex; flex-direction:column; align-items:center; gap:10px;}
.next-match .nm-monogram{
  height:80px; width:80px; background:var(--blue-100); color:var(--blue-800); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.2rem; letter-spacing:.02em;
}
.next-match .nm-team.us .nm-monogram{background:var(--blue-700); color:#fff;}
.next-match .nm-logo{
  height:80px; width:80px; object-fit:contain;
}
.next-match .nm-name{font-weight:700; color:var(--blue-900); font-size:.86rem; line-height:1.2;}
.next-match .nm-vs{display:flex; flex-direction:column; align-items:center; gap:8px; padding-top:28px;}
.next-match .nm-vs-label{
  font-family:var(--font-mono); font-size:.68rem; color:var(--amber-dark); background:var(--blue-100); padding:.35em .9em;
}
.next-match .nm-countdown{
  font-family:var(--font-mono); font-size:.68rem; color:var(--blue-700); white-space:nowrap; font-weight:700;
}
.next-match .nm-details{
  border-top:2px dashed var(--grey-200); margin:0 20px; padding:16px 4px 22px;
  display:flex; flex-wrap:wrap; gap:12px 20px; font-size:.84rem; color:var(--grey-600); justify-content:center;
}
.next-match .nm-details > div{display:flex; align-items:center; gap:6px;}
.next-match .nm-details .icon{width:14px; height:14px; color:var(--blue-700); flex:0 0 auto;}
.next-match .nm-details .nm-tag{font-weight:700; color:var(--blue-800);}
@media (max-width:420px){
  .next-match .nm-monogram, .next-match .nm-logo{width:56px; height:56px; font-size:.95rem;}
}

/* Stato "partita in corso": bordo rosso pulsante, badge LIVE animato */
.next-match.next-match-live{border-top-color:var(--red);}
.nm-live-badge{
  background:var(--red) !important; color:#fff !important; display:inline-flex; align-items:center; gap:6px;
}
.live-dot{
  width:8px; height:8px; background:#fff; display:inline-block; flex:0 0 auto;
  animation:live-pulse 1.4s ease-in-out infinite;
}
.nm-live-text{color:var(--red) !important; text-transform:uppercase;}
@keyframes live-pulse{
  0%, 100%{opacity:1; transform:scale(1);}
  50%{opacity:.35; transform:scale(.75);}
}

/* ============================= PROSSIMO IMPEGNO (partita + eventi) ============================= */
.impegni-band{
  position:relative;
  background:
    radial-gradient(at 85% 20%, rgba(242,169,0,.14), transparent 45%),
    radial-gradient(at 10% 90%, rgba(95,163,224,.25), transparent 50%),
    linear-gradient(160deg, var(--blue-900) 0%, var(--blue-800) 100%);
}
.impegni-band::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.4; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}
.impegni-band .container{
  display:grid; grid-template-columns:1fr 1.3fr; gap:0; align-items:stretch; position:relative; z-index:1;
  transform:translateY(-64px); margin-bottom:-64px;
}
@media (max-width:900px){
  .impegni-band .container{grid-template-columns:1fr; transform:translateY(-40px); margin-bottom:-40px; gap:20px;}
}
.impegni-band .ticket{box-shadow:var(--shadow-2);}

.evento-card{
  background:var(--white); display:flex; flex-direction:column; box-shadow:var(--shadow-2);
  border-top:4px solid var(--amber);
}
.evento-card .evento-head{
  padding:20px 24px 4px; display:flex; align-items:center; gap:10px;
}
.evento-card .evento-head .icon{width:18px; height:18px; color:var(--amber-dark);}
.evento-card .evento-head span{
  font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--grey-600);
}
.evento-list{padding:12px 16px 18px; display:flex; flex-direction:column; gap:8px; flex:1;}
.evento-empty{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  text-align:center; padding:24px 16px; color:var(--grey-400);
}
.evento-empty .icon{width:30px; height:30px;}
.evento-empty p{margin:0; font-size:.88rem;}
.evento-item{
  display:flex; gap:16px; align-items:flex-start; padding:14px; background:var(--ivory);
  transition:background .15s ease;
}
.evento-item:hover{background:var(--blue-100);}
.evento-item .evento-date{
  flex:0 0 auto; width:52px; height:52px; background:var(--blue-800); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.evento-item .evento-date .day{font-family:var(--font-display); font-weight:700; font-size:1.2rem; line-height:1;}
.evento-item .evento-date .month{font-family:var(--font-mono); font-size:.58rem; text-transform:uppercase; letter-spacing:.05em; color:#a9c6e5;}
.evento-item .evento-body{min-width:0;}
.evento-item .evento-tag{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:.64rem;
  text-transform:uppercase; letter-spacing:.05em; color:var(--blue-700); margin-bottom:4px;
}
.evento-item .evento-tag .icon{width:12px; height:12px;}
.evento-item h4{font-size:.94rem; margin:0 0 .25em; color:var(--blue-900);}
.evento-item p{font-size:.84rem; color:var(--grey-600); margin:0;}

/* ============================= CONTATTI ============================= */
.contact-line{display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--grey-200);}
.contact-line:last-child{border-bottom:none;}
.contact-icon{
  flex:0 0 auto; width:38px; height:38px; background:var(--blue-100); color:var(--blue-700);
  display:flex; align-items:center; justify-content:center;
}
.contact-icon .icon{width:18px; height:18px;}
.contact-line strong{display:block; font-size:.92rem; color:var(--blue-900); margin-bottom:2px;}
.contact-line span{font-size:.92rem; color:var(--grey-600);}

/* ============================= SECTIONS / LAYOUT ============================= */
.section{padding:56px 0;}
.section.alt{background:var(--ivory); background-image:var(--dot-pattern); background-size:16px 16px;}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap; position:relative;}
.section-head h2{font-size:1.7rem; margin:0; position:relative; z-index:1;}
.section-head .eyebrow{display:flex; align-items:center; gap:8px; margin-bottom:.5em;}
.section-head .eyebrow::before{content:""; width:22px; height:2px; background:var(--amber-dark); display:inline-block;}
.section-head .wm-num{
  position:absolute; right:0; top:-38px; font-family:var(--font-display); font-size:4.6rem; font-weight:700;
  color:var(--blue-900); opacity:.05; line-height:1; z-index:0; pointer-events:none; user-select:none;
}
@media (max-width:700px){.section-head .wm-num{display:none;}}

/* ---- Layout editoriale homepage: 1 storia in evidenza + lista ---- */
.editorial-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:26px; align-items:start;}
@media (max-width:900px){.editorial-grid{grid-template-columns:1fr;}}
.featured-story{
  background:var(--white); border-radius:var(--radius-m); overflow:hidden; box-shadow:var(--shadow-1);
  transition:transform .18s ease, box-shadow .18s ease; display:block; color:inherit;
}
.featured-story:hover{transform:translateY(-3px); box-shadow:var(--shadow-2); text-decoration:none;}
.featured-story .card-img{aspect-ratio:16/10; position:relative;}
.featured-story .card-img::after{
  content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,36,63,.75) 0%, transparent 55%);
}
.featured-story .card-img .score-overlay{
  position:absolute; left:20px; bottom:16px; z-index:1; color:#fff; font-family:var(--font-mono); font-size:1.6rem; font-weight:700;
}
.featured-story .card-body{padding:22px 24px 26px;}
.featured-story .card-body h3{font-size:1.4rem;}

.story-list{display:flex; flex-direction:column; gap:2px; background:var(--grey-200); border-radius:var(--radius-m); overflow:hidden; box-shadow:var(--shadow-1);}
.story-list-item{
  display:flex; gap:14px; align-items:center; padding:14px 16px; background:var(--white); color:inherit;
  transition:background .15s ease;
}
.story-list-item:hover{background:var(--blue-100); text-decoration:none;}
.story-list-item .thumb{width:58px; height:58px; border-radius:0; overflow:hidden; flex:0 0 auto; background:var(--blue-100);}
.story-list-item .thumb img{width:100%; height:100%; object-fit:cover;}
.story-list-item .meta{min-width:0;}
.story-list-item .meta .eyebrow{margin-bottom:.2em;}
.story-list-item .meta h4{font-family:var(--font-display); font-size:.92rem; margin:0; color:var(--blue-900); line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.layout-2col{display:grid; grid-template-columns:2fr 1fr; gap:40px; align-items:start;}
@media (max-width: 900px){
  .layout-2col{grid-template-columns:1fr;}
}
@media (max-width: 700px){
  .hero{min-height:460px;}
}

/* ============================= CARDS ============================= */
.card{
  background:var(--white); border-radius:var(--radius-m); box-shadow:var(--shadow-1);
  overflow:hidden; transition:transform .18s ease, box-shadow .18s ease; position:relative;
  border-top:3px solid var(--blue-700);
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-2);}
.card .card-img{aspect-ratio:4/3; overflow:hidden; background:var(--blue-100); position:relative;}
.card .card-img img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease;}
.card:hover .card-img img{transform:scale(1.05);}
.card .card-body{padding:18px 20px;}
.card .card-body .eyebrow{display:block; margin-bottom:.4em;}
.card .card-body h3{font-size:1.05rem; margin-bottom:.4em;}
.card .card-body p{color:var(--grey-600); font-size:.92rem; margin-bottom:.8em;}
.card .card-link{font-weight:700; font-size:.85rem;}

.news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:900px){.news-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.news-grid{grid-template-columns:1fr;}}

.box{background:var(--white); border:1px solid var(--grey-200); border-radius:var(--radius-m); padding:20px; margin-bottom:22px; position:relative;}
.box h3{font-size:1rem; display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.box h3 .icon{width:20px; height:20px; color:var(--blue-700);}
.box h3 img{width:26px; height:26px;}
.box .box-foot{margin-top:14px; font-size:.85rem; font-weight:700;}

/* ============================= TABLES: classifica / calendario / rose ============================= */
.table-wrap{overflow-x:auto; border-radius:var(--radius-m); box-shadow:var(--shadow-1);}
table.data{width:100%; border-collapse:collapse; background:var(--white); font-size:.92rem;}
table.data th{
  background:var(--blue-800); color:var(--white); text-align:left; padding:10px 14px;
  font-family:var(--font-display); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.03em;
}
table.data td{padding:9px 14px; border-bottom:1px solid var(--grey-200);}
table.data tr:nth-child(even) td{background:var(--ivory);}
table.data tr.highlight td{background:var(--blue-100); font-weight:700; color:var(--blue-900);}
table.data td.num, table.data th.num{font-family:var(--font-mono); text-align:center;}

.rank-badge{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  font-family:var(--font-mono); font-size:.78rem; font-weight:700; background:var(--grey-200); color:var(--grey-600);
}
.rank-badge.promo{background:var(--amber); color:var(--blue-900);}
.rank-badge.euro{background:var(--blue-700); color:#fff;}
.rank-badge.relegation{background:var(--red); color:#fff;}

.team-row{display:flex; align-items:center; gap:10px;}
.team-monogram{
  width:26px; height:26px; background:var(--blue-100); color:var(--blue-800);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700;
  font-size:.68rem; flex:0 0 auto;
}
tr.highlight .team-monogram{background:var(--blue-700); color:#fff;}
.team-logo{
  height:20px; width:auto; max-width:28px; object-fit:contain; flex:0 0 auto;
}

.matchday{margin-bottom:34px;}
.matchday h3{
  font-size:.85rem; background:var(--blue-900); color:var(--white); display:inline-block;
  padding:.5em 1.2em; margin-bottom:0; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.05em;
  border-left:3px solid var(--amber);
}
.matchday-grid{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--grey-200); overflow:hidden;}
@media (max-width:700px){.matchday-grid{grid-template-columns:1fr;}}
.matchday-col{background:var(--white);}
.matchday-col .date-row{
  background:var(--blue-700); color:var(--white); text-align:center; padding:8px; font-size:.82rem; font-weight:700;
}
.matchday-col .row{display:flex; justify-content:space-between; gap:10px; padding:8px 14px; border-bottom:1px solid var(--grey-200); font-size:.88rem;}
.matchday-col .row:last-child{border-bottom:none;}
.matchday-col .row.us{background:var(--amber); font-weight:700; color:var(--blue-900);}
.matchday-col .row .score{font-family:var(--font-mono); font-weight:700; flex:0 0 auto;}

/* Roster */
.roster-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:14px;}
.roster-card{background:var(--white); border:1px solid var(--grey-200); border-radius:var(--radius-s); padding:14px; display:flex; justify-content:space-between; gap:10px; align-items:center;}
.roster-card .role{font-size:.75rem; color:var(--grey-400); text-transform:uppercase; letter-spacing:.04em;}

/* ============================= ARTICLE / MATCH REPORT ============================= */
.article-head{margin-bottom:26px;}
.article-head .eyebrow{margin-bottom:.5em; display:flex; align-items:center; gap:8px;}
.article-head .eyebrow::before{content:""; width:22px; height:2px; background:var(--amber-dark); display:inline-block;}
.article-body{max-width:70ch;}
.article-body p{color:var(--grey-600);}
.article-body > p:first-of-type::first-letter{
  font-family:var(--font-display); font-size:3.4em; float:left; line-height:.85; padding:.05em .08em 0 0;
  color:var(--blue-700); font-weight:700;
}
.article-photo{
  overflow:hidden; box-shadow:var(--shadow-1); margin-bottom:22px; position:relative;
  max-width:70ch;
}
.article-photo img{width:100%; display:block; transition:transform .4s ease;}
.article-photo a.lightbox-trigger{display:block; overflow:hidden; cursor:zoom-in;}
.article-photo.portrait-crop{aspect-ratio:208/510; max-width:340px;}
.article-photo.portrait-crop img{width:100%; height:100%; object-fit:cover;}
.article-photo a.lightbox-trigger:hover img{transform:scale(1.06);}
.article-photo.logo-frame{
  box-shadow:none; border:1px solid var(--grey-200); max-width:280px; padding:32px; background:var(--white);
}
.article-photo.logo-frame img{width:100%; height:auto; transition:none;}
.pull-quote{
  border-left:4px solid var(--amber); margin:26px 0; padding:6px 0 6px 22px; position:relative;
  font-family:var(--font-display); font-size:1.2rem; color:var(--blue-900); font-weight:500; max-width:60ch;
}
.pull-quote::before{
  content:"“"; position:absolute; left:-6px; top:-22px; font-family:var(--font-display); font-size:3.4rem;
  color:var(--blue-100); z-index:0; line-height:1;
}

/* ============================= GALLERY ============================= */
.gallery-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:12px;}
.gallery-grid a{border-radius:var(--radius-s); overflow:hidden; box-shadow:var(--shadow-1); aspect-ratio:1/1; position:relative; display:block;}
.gallery-grid a img{width:100%; height:100%; object-fit:cover; transition:transform .3s ease;}
.gallery-grid a:hover img{transform:scale(1.06);}
.gallery-section-title{
  font-family:var(--font-display); color:var(--blue-800); font-weight:700; margin:34px 0 14px;
  padding-bottom:8px; border-bottom:3px solid var(--blue-100);
}

/* lightbox */
.lightbox-overlay{
  position:fixed; inset:0; background:rgba(8,20,35,.92); display:none; align-items:center; justify-content:center;
  z-index:1000; padding:30px;
}
.lightbox-overlay.open{display:flex;}
.lightbox-overlay img{max-width:min(900px,92vw); max-height:86vh; border-radius:var(--radius-s); box-shadow:0 20px 60px rgba(0,0,0,.5);}
.lightbox-close{position:absolute; top:20px; right:26px; color:#fff; font-size:2rem; background:none; border:none; cursor:pointer; line-height:1;}
.lightbox-caption{position:absolute; bottom:24px; left:0; right:0; text-align:center; color:#cfe1f5; font-size:.9rem;}

/* ============================= STATS ============================= */
.stats-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}
@media (max-width:900px){.stats-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
.stat-card{
  position:relative; overflow:hidden; color:var(--white); padding:26px 18px; text-align:left;
  background:
    radial-gradient(at 90% 0%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(155deg, var(--blue-800) 0%, var(--blue-900) 100%);
  border-top:3px solid rgba(255,255,255,.25);
}
.stat-card::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.35; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}
.stat-card .stat-icon{
  position:absolute; right:-10px; bottom:-14px; width:76px; height:76px; opacity:.16; z-index:0;
}
.stat-card .stat-icon .icon{width:100%; height:100%;}
.stat-card .num{
  font-family:var(--font-mono); font-size:2.3rem; font-weight:700; display:block; position:relative; z-index:1;
  line-height:1;
}
.stat-card .label{font-size:.78rem; color:#bcd3ea; position:relative; z-index:1; display:block; margin-top:6px;}
.stat-card .label strong{display:block; color:#fff; font-size:.82rem;}
.stat-card.win{background:linear-gradient(155deg, #26b869 0%, var(--green) 100%);}
.stat-card.win .label{color:#d3f3e1;}
.stat-card.draw{background:linear-gradient(155deg, #f7c33d 0%, var(--amber) 100%); color:var(--blue-900);}
.stat-card.draw .label{color:#5c4a00;}
.stat-card.draw .label strong{color:var(--blue-900);}
.stat-card.loss{background:linear-gradient(155deg, #e0655c 0%, var(--red) 100%);}
.stat-card.loss .label{color:#fbdcda;}

/* ============================= FORM ============================= */
.form-field{margin-bottom:16px;}
.form-field label{display:block; font-weight:700; font-size:.9rem; margin-bottom:6px; color:var(--blue-900);}
.form-field input, .form-field textarea{
  width:100%; padding:.75em 1em; border:2px solid var(--grey-200); border-radius:var(--radius-s);
  font-family:var(--font-body); font-size:.95rem; background:var(--white);
}
.form-field input:focus, .form-field textarea:focus{border-color:var(--blue-700); outline:none;}
.form-check{display:flex; align-items:start; gap:10px; font-size:.85rem; color:var(--grey-600); margin-bottom:18px;}
.form-note{font-size:.8rem; color:var(--grey-400); margin-bottom:20px;}
.alert{padding:18px 22px; border-radius:var(--radius-m); margin-bottom:20px;}
.alert-success{background:#e6f6ec; color:#146334; border:2px solid #bfe6cc;}
.alert-error{background:#fbeaea; color:#8c211c; border:2px solid #f3c8c5;}

/* ============================= FOOTER ============================= */
.site-footer{
  position:relative; overflow:hidden; margin-top:60px; color:#c8dcf1;
  border-top:3px solid var(--amber);
  background:
    radial-gradient(at 80% 0%, rgba(95,163,224,.2), transparent 50%),
    linear-gradient(180deg, var(--blue-900) 0%, #051930 100%);
}
.site-footer::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.35; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}
.site-footer .crest-watermark{
  position:absolute; right:-40px; bottom:-60px; width:280px; height:280px; opacity:.06; pointer-events:none; z-index:0;
}
.site-footer .container{padding:54px 20px 30px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; position:relative; z-index:1;}
@media (max-width:800px){.site-footer .container{grid-template-columns:1fr; text-align:left;}}
.site-footer h4{
  color:var(--white); font-size:.82rem; margin-bottom:16px; text-transform:uppercase; letter-spacing:.08em;
  font-family:var(--font-mono); display:flex; align-items:center; gap:8px;
}
.site-footer h4::before{content:""; width:16px; height:2px; background:var(--amber); display:inline-block;}
.site-footer a{color:#c8dcf1;}
.site-footer a:hover{color:var(--white);}
.site-footer ul{list-style:none;}
.site-footer ul li{margin-bottom:9px; font-size:.92rem;}
.site-footer .footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); font-size:.78rem; color:#8fa9c4;
  padding:18px 20px; text-align:center; position:relative;
}
.footer-social-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px;}
.footer-social{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); padding:.5em 1em; font-size:.85rem;}
.footer-social:hover{background:rgba(255,255,255,.16); color:#fff;}
.footer-social .icon{width:16px; height:16px;}

.back-to-top{
  position:fixed; right:20px; bottom:20px; width:46px; height:46px;
  background:var(--blue-700); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-2); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  border:none; cursor:pointer; font-size:1.2rem; z-index:80;
}
.back-to-top.show{opacity:1; pointer-events:auto;}
.back-to-top:hover{transform:translateY(-3px);}
.back-to-top .icon{width:20px; height:20px; transform:rotate(-90deg);}

@media (max-width:700px){
  .section{padding:38px 0;}
  .hero .container{padding:40px 20px 54px;}
}