/* =============== */

/* Board of Dreams */

/* Sport theme     */

/* =============== */

:root{

  /* Palette */

  --white: #ffffff;

  --bg: #ffffff;

  --bg-alt: #f4f6fb;

  --eb_hero: #aa1233;

  --text: #0c1020;

  --muted: #4a5568;



  /* Primary colors */

  --blue: #0b3a8f;       /* main */

  --blue-2: #0a2f73;     /* hover/darker */

  --bordeaux: #7b1233;   /* accent */

  --bordeaux-2: #640f2a; /* hover/darker */



  /* Neutrals */

  --line: #e5e8f1;



  /* UI */

  --radius: 12px;

  --radius-lg: 16px;

  --shadow: 0 12px 30px rgba(11, 58, 143, 0.10);



  --container: 1200px;



  --space-1: 0.5rem;

  --space-2: 0.75rem;

  --space-3: 1rem;

  --space-4: 1.5rem;

  --space-5: 2rem;

  --space-6: 3rem;

  --space-6: 4rem;



  /* “Scoreboard” font vibe: usa system ma con tracking */

  --track: -0.02em;

}



/* Reset/base */

*,

*::before,

*::after { box-sizing: border-box; }



html { scroll-behavior: smooth; }



body{

  margin: 0;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  line-height: 1.6;

  color: var(--text);

  background: var(--bg);

}



img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

a:hover{ text-decoration: underline; }



.container{ width: min(92vw, var(--container)); margin: 0 auto; }



.section{ padding: var(--space-6) 0; z-index:1;}



.section-alt{

  background: linear-gradient(180deg, var(--bg-alt), var(--white));

  border-top: 1px solid var(--line);

  border-bottom: 1px solid var(--line);

}



.section-head{

  display: grid;

  gap: var(--space-1);

  margin-bottom: var(--space-4);

  z-index:1;

}



.section-title{

  margin: 0;

  font-size: clamp(1.35rem, 2.5vw, 2rem);

  letter-spacing: var(--track);

}



.section-subtitle{ margin: 0; color: var(--muted); }



/* ================= */

/* Header / Nav      */

/* ================= */

.site-header{

  position: sticky;

  top: 0;

  z-index: 20;

  background: rgba(255,255,255,0.92);

  backdrop-filter: blur(10px);

  border-bottom: 3px solid var(--blue);

}



.header-inner{

  display: grid;

  grid-template-columns: 1fr auto auto;

  align-items: center;

  gap: var(--space-3);

  padding: var(--space-3) 0;

}



.brand{

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

  font-weight: 900;

  letter-spacing: var(--track);

}

.brand-mark{

  width: 38px; height: 38px;

  border-radius: 999px;

  display: grid; place-items: center;

  background: var(--blue);

  color: var(--white);

  box-shadow: var(--shadow);

  font-weight: 900;

}

.brand-text{ font-size: 1.05rem; }



.lang-switch{ display: none; }

.nav-toggle{ display: none; }



/* Burger */

.nav-burger{

  width: 44px;

  height: 44px;

  border: 2px solid var(--line);

  border-radius: 14px;

  display: grid;

  place-content: center;

  gap: 5px;

  cursor: pointer;

}

.nav-burger span{

  width: 18px;

  height: 2px;

  background: var(--text);

  display: block;

}



/* Mobile nav */

.site-nav{

  position: absolute;

  left: 0; right: 0;

  top: 100%;

  background: var(--white);

  border-bottom: 1px solid var(--line);

  box-shadow: var(--shadow);

  transform: translateY(-10px);

  opacity: 0;

  pointer-events: none;

  transition: 160ms ease;

}



.nav-list{

  list-style: none;

  margin: 0;

  padding: var(--space-3);

  display: grid;

  gap: var(--space-2);

}



.nav-link{

  display: block;

  padding: var(--space-2) var(--space-3);

  border-radius: 14px;

  font-weight: 800;

  letter-spacing: -0.01em;

}

.nav-link:hover{ background: var(--bg-alt); text-decoration: none; }



.nav-cta{

  background: var(--bordeaux);

  color: var(--white);

  border: 2px solid rgba(123, 18, 51, 0.35);

}

.nav-cta:hover{ background: var(--bordeaux-2); }



.nav-login{ background: var(--blue);  color: var(--white);  border: 2px solid rgba(123, 18, 51, 0.35); }

.nav-login:hover{ background: var(--blue-2); }



.nav-toggle:checked ~ .site-nav{

  transform: translateY(0);

  opacity: 1;

  pointer-events: auto;

}



/* Desktop nav */

@media (min-width: 860px){

  .header-inner{ grid-template-columns: auto 1fr auto; }

  .nav-burger{ display: none; }

  .lang-switch{ display: block; }



  .site-nav{

    position: static;

    box-shadow: none;

    border: none;

    transform: none;

    opacity: 1;

    pointer-events: auto;

    background: transparent;

	

  }



  .nav-list{

    padding: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: var(--space-2);

	

  }

}



/* ================= */

/* Buttons / forms   */

/* ================= */

.btn{

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

  border-radius: 14px;

  padding: 0.85rem 1.1rem;

  font-weight: 900;

  border: 2px solid transparent;

  cursor: pointer;

  text-decoration: none;

  line-height: 1;

  letter-spacing: -0.01em;

  text-transform: uppercase;

}



.btn-primary{

  background: var(--blue);

  color: var(--white);

  box-shadow: var(--shadow);

}

.btn-primary:hover{ background: var(--blue-2); text-decoration: none; }



.btn-accent{

  background: var(--bordeaux);

  color: var(--white);

  box-shadow: 0 12px 30px rgba(123, 18, 51, 0.14);

}

.btn-accent:hover{ background: var(--bordeaux-2); text-decoration: none; }



.btn-ghost{

  background: var(--white);

  border-color: var(--line);

  color: var(--text);

}

.btn-ghost:hover{ background: var(--bg-alt); text-decoration: none; }



.input{

  width: 100%;

  padding: 0.9rem 1rem;

  border: 2px solid var(--line);

  border-radius: 14px;

  outline: none;

}

.input:focus{

  border-color: rgba(11, 58, 143, 0.45);

  box-shadow: 0 0 0 4px rgba(11, 58, 143, 0.12);

}



/* ================= */

/* Hero              */

/* ================= */

.hero{

  padding: var(--space-6) 0;

  background:

    radial-gradient(1000px 500px at 20% 10%, rgba(11,58,143,0.10), transparent 60%),

    radial-gradient(900px 450px at 80% 20%, rgba(123,18,51,0.10), transparent 60%);

}



.hero-grid{ display: grid; gap: var(--space-5); }



.hero-media{ display: grid; place-items: center; }



.hero-cover{

  width: min(440px, 92vw);

  border-radius: var(--radius-lg);

  border: 2px solid var(--line);

  box-shadow: var(--shadow);

  /*background: var(--white);*/

  background-color: rgba(200,200,200,0.4);

}



/* HERO fullscreen background */

.hero.hero--bg{

  position: relative;

  min-height: 100svh;            /* fullscreen “safe” su mobile */

  display: grid;

  align-items: center;

  padding: var(--space-6) 0;

  overflow: hidden;



  /* fallback se l’immagine non carica */

  background: radial-gradient(900px 500px at 20% 10%, rgba(11,58,143,0.14), transparent 60%),

              radial-gradient(900px 450px at 80% 20%, rgba(123,18,51,0.14), transparent 60%),

              var(--bg);

}



/* Layer immagine di sfondo */

.hero-bg{

  position: absolute;

  inset: 0;

  background-image: url("../img/hero-bg.png"); /* <-- cambia path */

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  transform: scale(1.02); /* leggero zoom per evitare bordi */

  z-index: -100;

}



.hero-content{ display: grid; gap: var(--space-3); }



.eyebrow{

  margin: 0;

  color: var(--muted);

  font-weight: 900;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  font-size: 0.78rem;

}

.hero-content .eyebrow{ color: var(--eb_hero); background-color: rgba(200,200,200,0);}



.hero-title{

  margin: 0;

  font-size: clamp(2.1rem, 5vw, 3.2rem);

  letter-spacing: var(--track);

  line-height: 1.05;

}



.hero-tagline{

  margin: 0;

  color: var(--muted);

  font-size: 1.08rem;

  max-width: 62ch;

  font-weight: 500;

}

.hero-content .hero-tagline{ color: var(--eb_hero); background-color: rgba(200,200,200,0);}



/* Scoreboard facts */

.facts{

  list-style: none;

  padding: 0;

  margin: 0;

  display: grid;

  gap: var(--space-2);

  grid-template-columns: repeat(3, minmax(0, 1fr));

}



.fact{

  border: 2px solid var(--line);

  border-radius: 16px;

  padding: 0.9rem 1rem;

  background: var(--white);

  display: grid;

  gap: 0.2rem;

  position: relative;

  overflow: hidden;

}

.fact::after{

  content: "";

  position: absolute;

  inset: auto -30% -60% -30%;

  height: 120px;

  background: linear-gradient(90deg, rgba(11,58,143,0.10), rgba(123,18,51,0.10));

  transform: rotate(-8deg);

}

.fact > *{ position: relative; }



.fact-label{

  color: var(--muted);

  font-size: 0.75rem;

  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}

.fact-value{

  font-weight: 1000;

  font-size: 1.1rem;

}



/* Meta chips */

.meta{ margin: 0; display: grid; gap: var(--space-2); }

.meta-item{

  display: grid;

  gap: 0.35rem;

  padding: 1rem 1rem;

  border: 2px solid var(--line);

  border-radius: 16px;

  background: var(--white);

}

.meta-key{

  margin: 0;

  color: var(--muted);

  font-weight: 900;

  font-size: 0.85rem;

  letter-spacing: 0.03em;

  text-transform: uppercase;

}

.meta-val{

  margin: 0;

  display: flex;

  gap: var(--space-2);

  flex-wrap: wrap;

  align-items: center;

}



.chip{

  display: inline-flex;

  padding: 0.38rem 0.7rem;

  border-radius: 999px;

  border: 2px solid var(--line);

  background: var(--bg-alt);

  font-weight: 900;

  font-size: 0.9rem;

}

.chip:hover{ text-decoration: none; opacity: 0.92; }



.hero-actions{

  display: flex;

  gap: var(--space-2);

  flex-wrap: wrap;

  margin-top: var(--space-2);

}



/*.microcopy{ margin: 0; color: var(--muted); font-size: 0.9rem; }

.hero-content .microcopy{ color: var(--eb_hero); background-color: rgba(200,200,200,0);}

*/

/* Desktop hero */

@media (min-width: 920px){

  .hero-grid{

    grid-template-columns: 440px 1fr;

    align-items: center;

  }

  .hero-media{ justify-content: start; }

}



/* ================= */

/* Cards / lists     */

/* ================= */

.card{

  background: var(--white);

  border: 2px solid var(--line);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow);

  padding: var(--space-4);

}



.card-title{

  margin: 0 0 var(--space-2);

  font-size: 1.12rem;

  letter-spacing: -0.01em;

  text-transform: uppercase;

  font-weight: 1000;

}



/* Lists */

.list{ margin: 0; padding-left: 1.2rem; }

.list li{ margin: 0.35rem 0; }



.link-list{

  list-style: none;

  padding: 0;

  margin: 0;

  display: grid;

  gap: 0.55rem;

}

.link-list a{

  display: block;

  padding: 0.7rem 0.85rem;

  border-radius: 14px;

  border: 2px solid var(--line);

  background: var(--bg-alt);

  font-weight: 900;

}

.link-list a:hover{ text-decoration: none; border-color: rgba(11,58,143,0.35); }



/* ================= */

/* Feature blocks    */

/* ================= */

.feature{

  display: grid;

  gap: var(--space-4);

  margin-top: var(--space-4);

}



.feature-media img{

  width: 100%;

  border-radius: var(--radius-lg);

  border: 2px solid var(--line);

  box-shadow: var(--shadow);

}



.feature-content{ display: grid; gap: var(--space-2); }



.feature-title{

  margin: 0;

  font-size: 1.4rem;

  font-weight: 1000;

  letter-spacing: var(--track);

}



.feature-text{ margin: 0; color: var(--muted); }



@media (min-width: 920px){

  .feature{

    grid-template-columns: 1.1fr 0.9fr;

    align-items: center;

  }

  .feature-reverse{ grid-template-columns: 0.9fr 1.1fr; }

  .feature-reverse .feature-media{ order: 2; }

  .feature-reverse .feature-content{ order: 1; }

}



/* ================= */

/* Grid helpers      */

/* ================= */

.grid-2{ display: grid; gap: var(--space-4); }

@media (min-width: 860px){

  .grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

}



/* ================= */

/* Video embed       */

/* ================= */

.video{

  border-radius: var(--radius-lg);

  overflow: hidden;

  border: 2px solid var(--line);

  box-shadow: var(--shadow);

  background: #000;

  aspect-ratio: 16 / 9;

}

.video iframe{ width: 100%; height: 100%; border: 0; display: block; }



/* ===== THUMB CAROUSEL ===== */

.thumb-carousel {

  overflow: hidden;

  background: #111;

  border-radius: 16px;

}



.thumb-track {

  display: flex;

  gap: 12px;

  padding: 12px;

  will-change: transform;

}



.thumb {

  height: 90px;

  cursor: pointer;

  border-radius: 8px;

  flex-shrink: 0;

  transition: transform .2s ease;

}



.thumb:hover {

  transform: scale(1.05);

}



/* ===== LIGHTBOX ===== */

.lightbox {

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,.9);

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 1000;

}



.lightbox img {

  max-width: 95%;

  max-height: 95%;

  border-radius: 12px;

}





/* ================= */

/* Quotes / share     */

/* ================= */

.quote{

  margin: 0 0 var(--space-3);

  padding: var(--space-3);

  border: 2px solid var(--line);

  border-radius: 16px;

  background: var(--bg-alt);

  position: relative;

}

.quote::before{

  content: "★";

  position: absolute;

  top: 10px;

  right: 12px;

  color: rgba(123, 18, 51, 0.35);

  font-size: 1.1rem;

}



.quote p{

  margin: 0 0 var(--space-2);

  font-weight: 900;

}

.quote footer{ color: var(--muted); font-weight: 800; }



.share{

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-2);

}

.share-link{

  padding: 0.7rem 0.9rem;

  border: 2px solid var(--line);

  border-radius: 999px;

  background: var(--white);

  font-weight: 1000;

  text-transform: uppercase;

  font-size: 0.85rem;

}

.share-link:hover{

  text-decoration: none;

  border-color: rgba(123, 18, 51, 0.45);

}



.hint{ margin: var(--space-3) 0 0; color: var(--muted); }



/* ================= */

/* Related cards      */

/* ================= */

.related-grid{

  list-style: none;

  padding: 0;

  margin: 0;

  display: grid;

  gap: var(--space-3);

  grid-template-columns: repeat(1, minmax(0, 1fr));

}



@media (min-width: 700px){

  .related-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (min-width: 1020px){

  .related-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

}



.related-card{

  border: 2px solid var(--line);

  background: var(--white);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow);

  padding: var(--space-4);

  display: grid;

  gap: var(--space-2);

  transition: transform 140ms ease, box-shadow 140ms ease;

}

.related-card:hover{

  transform: translateY(-2px);

  box-shadow: 0 16px 34px rgba(11, 58, 143, 0.14);

}



.badge{

  justify-self: start;

  padding: 0.3rem 0.6rem;

  border-radius: 999px;

  border: 2px solid var(--line);

  background: linear-gradient(90deg, rgba(11,58,143,0.10), rgba(123,18,51,0.10));

  color: var(--muted);

  font-weight: 1000;

  font-size: 0.72rem;

  letter-spacing: 0.05em;

  text-transform: uppercase;

}



.related-title{

  margin: 0;

  font-size: 1.02rem;

  font-weight: 1000;

  letter-spacing: -0.01em;

  display:flex;

  width: 100%;

}

.related-text{ margin: 0; color: var(--muted); font-size: 0.95rem; }



.related-title span{ margin-left: auto; text-align: right;}



/* ================= */

/* Footer             */

/* ================= */

.site-footer{

  border-top: 3px solid var(--bordeaux);

  background: var(--white);

}



.footer-grid{

  padding: var(--space-6) 0;

  display: grid;

  gap: var(--space-4);

}



@media (min-width: 860px){

  .footer-grid{

    grid-template-columns: 1.2fr 0.8fr;

    align-items: start;

  }

}



.footer-title{

  margin: 0 0 var(--space-1);

  font-size: 1.2rem;

  font-weight: 1000;

  letter-spacing: var(--track);

  text-transform: uppercase;

}

.footer-text{ margin: 0 0 var(--space-3); color: var(--muted); }



.newsletter{

  display: grid;

  gap: var(--space-2);

  grid-template-columns: 1fr;

}

@media (min-width: 520px){

  .newsletter{

    grid-template-columns: 1fr auto;

    align-items: center;

  }

}



.footer-nav{

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-2);

  justify-content: start;

}

.footer-nav a{

  padding: 0.65rem 0.8rem;

  border-radius: 14px;

  border: 2px solid var(--line);

  background: var(--bg-alt);

  font-weight: 900;

  text-transform: uppercase;

  font-size: 0.85rem;

}

.footer-nav a:hover{ text-decoration: none; border-color: rgba(11,58,143,0.35); }



.footer-bottom{

  padding: var(--space-3) 0;

  border-top: 1px solid var(--line);

  color: var(--muted);

  font-size: 0.9rem;

}



/* ================= */

/* Optional: reduce motion */

@media (prefers-reduced-motion: reduce){

  *{ scroll-behavior: auto !important; }

  .related-card{ transition: none; }

}

/* ========================= */

/* Product image in cards    */

/* ========================= */



.product-thumb{

  all: unset;

  cursor: zoom-in;

  display: block;

  border-radius: 14px;

  overflow: hidden;

  border: 2px solid var(--line);

  background: var(--bg-alt);

  transition: transform 140ms ease, box-shadow 140ms ease;

}



.product-thumb img{

  width: 100%;

  height: auto;

  display: block;

  aspect-ratio: 4 / 3;

  object-fit: cover;

}



.product-thumb:hover{

  transform: translateY(-2px);

  box-shadow: 0 14px 30px rgba(11,58,143,0.18);

}



/* Migliora gerarchia visiva nella card */

.related-card{

  gap: var(--space-3);

}

/* ========================= */

/* Image zoom overlay        */

/* ========================= */



.image-zoom{

  position: fixed;

  inset: 0;

  background: rgba(10, 16, 32, 0.88);

  backdrop-filter: blur(6px);

  display: grid;

  place-items: center;

  opacity: 0;

  pointer-events: none;

  transition: opacity 160ms ease;

  z-index: 999;

}



.image-zoom.is-open{

  opacity: 1;

  pointer-events: auto;

}



.image-zoom-img{

  max-width: min(92vw, 900px);

  max-height: 92vh;

  border-radius: 18px;

  border: 2px solid rgba(255,255,255,0.25);

  box-shadow: 0 30px 80px rgba(0,0,0,0.45);

  background: #fff;

}



.image-zoom-close{

  position: absolute;

  top: 18px;

  right: 22px;

  width: 44px;

  height: 44px;

  border-radius: 999px;

  border: 2px solid rgba(255,255,255,0.35);

  background: transparent;

  color: #fff;

  font-size: 1.8rem;

  font-weight: 700;

  cursor: pointer;

}



.image-zoom-close:hover{

  background: rgba(255,255,255,0.12);

}







/* style pagine asp non protette*/

.card {

    position: relative;

}



.card-close {



	position: absolute;

    top: 12px;

    right: 12px;

    width: 36px;

    height: 36px;	

	display: flex;

    align-items: center;

    justify-content: center;	

    border-radius: 50%;

    border: 2px solid var(--line);

    background: var(--bg-alt);

    font-weight: 1000;

    text-transform: uppercase;

    font-size: 1rem;



}



.card-close,.card-close:hover,.card-close:focus,.card-close:active {

    text-decoration: none;

}