/* =========================================================
   HOMEPAGE.CSS — cosafare.org
   Focus: HERO 100vh senza overflow + mappa “valorizzata”
   ========================================================= */


/* =========================================================
   1) HERO — LAYOUT 100VH (SENZA SFORARE)
   ========================================================= */

/*
  Obiettivo:
  - Hero sta in 100vh “reale”
  - Compensa la navbar floating senza creare overflow
  - Colonna destra: la mappa si adatta allo spazio disponibile
*/

:root{
  /* Altezza “stimata” navbar floating (tienila qui, facile da tarare) */
  --cf-nav-offset-desktop: 110px;
  --cf-nav-offset-mobile: 92px;

  /* Padding interno hero */
  --cf-hero-pad-top: 110px;
  --cf-hero-pad-bot: 36px;

  /* Gap sotto navbar/inizio contenuto (aria sopra) */
  --cf-hero-air-top: 16px;

  /* Quanto può essere alta la mappa minimo (usabilità) */
  --cf-map-min-h: 300px;
}

.cf-home-hero{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--cf-line);
  margin-top: calc(var(--cf-nav-offset-desktop) * -1);

  height: auto;
  padding-top: calc(var(--cf-hero-pad-top) + var(--cf-hero-air-top));
  padding-bottom: var(--cf-hero-pad-bot);
}

/* SOLO desktop veri */
@media (min-width: 1200px){
  .cf-home-hero{
    min-height: calc(100svh - var(--cf-nav-offset-desktop));
    display: flex;
    align-items: center;
  }
}

@media (max-width: 991.98px){
  .cf-home-hero{
    margin-top: calc(var(--cf-nav-offset-mobile) * -1);
    padding-top: 104px;
    padding-bottom: 26px;
    height: auto;              /* su mobile lasciamo scorrere */
    min-height: calc(100vh - 20px);
  }
}

/* Background hero */
.cf-home-hero__bg{
  position:absolute;
  inset:0;
  z-index:0;

  background:
    radial-gradient(1200px 600px at 15% 20%, rgba(229,154,47,.22) 0%, transparent 55%),
    radial-gradient(900px 520px at 85% 25%, rgba(122,23,23,.18) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,248,238,.70) 0%, rgba(246,240,230,.95) 45%, rgba(246,240,230,1) 100%);
}



.cf-home-hero__bg .blob{
  position:absolute;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  filter: blur(40px);
  opacity: .55;
  animation: blobFloat 10s ease-in-out infinite;
}
.cf-home-hero__bg .b1{
  left: -140px; top: -160px;
  background: radial-gradient(circle at 30% 30%, rgba(229,154,47,.75), rgba(229,154,47,0) 70%);
}
.cf-home-hero__bg .b2{
  right: -170px; top: -120px;
  background: radial-gradient(circle at 30% 30%, rgba(122,23,23,.55), rgba(122,23,23,0) 70%);
  animation-delay: -2.5s;
}
.cf-home-hero__bg .b3{
  left: 35%; bottom: -220px;
  background: radial-gradient(circle at 30% 30%, rgba(154,42,28,.40), rgba(154,42,28,0) 70%);
  animation-delay: -5s;
}
@keyframes blobFloat{
  0%   { transform: translate3d(0,0,0) scale(1); }
  40%  { transform: translate3d(20px, -10px, 0) scale(1.05); }
  70%  { transform: translate3d(-10px, 18px, 0) scale(.98); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

/* Container: deve occupare l'altezza residua della hero */
.cf-home-hero .container{
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: stretch;
}

/* Riga bootstrap: la rendiamo a full height */
.cf-home-hero .row{
  width: 100%;
  height: 100%;
  align-items: stretch !important;
}

/* Colonne: full height */
.cf-home-hero .col-lg-6{
  height: 100%;
  min-width: 0;
}

/* Colonna sinistra: centra verticalmente il copy */
.cf-home-hero__left{
  /* height: 100%; */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Colonna destra: contiene card full height */
.cf-home-hero__right{
  height: 100%;
  display: flex;
  align-items: stretch;
}


/* =========================================================
   2) HERO — TESTI / CTA
   ========================================================= */

.cf-home-hero__kicker{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 10px;
}

.cf-home-hero__title{
  font-weight: 950;
  letter-spacing: -0.7px;
  line-height: 1.05;
  margin-bottom: 10px;
}

.cf-home-hero__title .accent{
  color: var(--cf-primary);
}

.cf-home-hero__subtitle{
  color: var(--cf-muted);
  max-width: 52ch;
  margin-bottom: 14px;
}

.cf-home-hero__mini{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}

.mini{
  display:flex;
  align-items:center;
  gap:10px;

  padding: 10px 12px;
  border-radius: var(--cf-radius-sm);
  border: 1px solid var(--cf-line);

  background: rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
}

.mini__icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(122,23,23,.08);
  color: var(--cf-primary);
}

.mini__title{ font-weight: 800; font-size: 13px; line-height: 1.1; }
.mini__sub{ font-size: 12px; color: var(--cf-muted); }


/* =========================================================
   3) HERO — CARD RICERCA (FLEX) + MAPPA (FLEX)
   ========================================================= */

/*
  Qui sta il trucco:
  - la card è h:100%
  - il form è flex-column
  - la mappa NON ha height fissa: prende lo spazio rimanente
*/

.cf-home-hero__form{
  width: 100%;
  height: 100%;

  background: rgba(255,255,255,.82);
  backdrop-filter: blur(12px);

  border-radius: 18px;

  display: flex;
  flex-direction: column;

  /* se qualcosa eccede, non deve sforare la hero */
  overflow: hidden;
}

/* Il form: occupa tutto e gestisce lo spazio */
.cf-home-hero__form form{
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0; /* fondamentale per far funzionare la mappa flex */
}

/* Riga “g-2”: non deve forzare l’altezza */
.cf-home-hero__form .row{
  height: auto !important;
}

/* Pill area selezionata */
[data-cf-geo-pill]{
  border: 1px solid rgba(122,23,23,.25);
  background: rgba(122,23,23,.06);
  color: rgba(122,23,23,.95);
}


/* =========================================================
   4) GEO TOOLBAR INLINE
   ========================================================= */

.cf-geo-toolbar--inline{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.cf-geo-toolbar--inline .cf-geo-search{
  min-width: 220px;
  flex: 1 1 260px;
  position: relative;
}

.cf-geo-toolbar--inline .cf-geo-km{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 240px;
}

/* Suggest dropdown */
.cf-geo-suggest{
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  margin-top: 6px;

  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}

.cf-geo-suggest button{
  width: 100%;
  display: block;
  text-align: left;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  font-size: 13px;
}
.cf-geo-suggest button:hover{
  background: rgba(0,0,0,.04);
}


/* =========================================================
   5) MAPPA INLINE — FLEX (NO HEIGHT FISSA)
   ========================================================= */

/*
  La mappa prende spazio residuo nella card:
  - flex:1
  - min-height per usabilità
  - niente height fissa (che causa overflow su 100vh)
*/
.cf-geo-map-inline{
  flex: 1;
  min-height: var(--cf-map-min-h);

  width: 100%;
  border-radius: 18px;
  overflow: hidden;

  background: #eee;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
}

/* Laptop “bassi”: abbassa un filo il minimo mappa per far respirare bottone e nota */
@media (max-height: 900px){
  :root{ --cf-map-min-h: 260px; }
}

/* Mobile: mappa più contenuta */
@media (max-width: 991.98px){
  :root{ --cf-map-min-h: 320px; }
  .mini{
    width: 100%;
  }
  .btn-mobile{
    width: 100%;
  }
  .cf-home-hero .container{
        padding-left: 0.5rem;
      padding-right: 0.5rem;
  }
  .cf-home-hero .row{
    
    margin: 0px;
  }
}


/* =========================================================
   6) MARKER CUSTOM (CENTRO + VERTICI)
   ========================================================= */

.cf-geo-center{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(122,23,23,.95);
  box-shadow: 0 0 0 6px rgba(122,23,23,.18);
  border: 2px solid #fff;
}

.cf-geo-vertex{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(229,154,47,.95);
  box-shadow: 0 0 0 6px rgba(229,154,47,.18);
  border: 2px solid #fff;
}


/* =========================================================
   7) CATEGORIE / EVENTI / ALTRE SEZIONI (INVARIATO, PULITO)
   ========================================================= */

.cf-home-cat{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 12px;

  border-radius: var(--cf-radius-sm);
  border: 1px solid rgba(27,27,27,.10);

  text-decoration:none;
  color: var(--cf-text);

  background: rgba(255,255,255,.60);
  transition: transform .12s ease, background .12s ease;
}
.cf-home-cat:hover{
  background: rgba(255,255,255,.90);
  transform: translateY(-1px);
}
.cf-home-cat__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--cf-accent);
  box-shadow: 0 0 0 6px rgba(229,154,47,.18);
}
.cf-home-cat__name{ font-weight: 800; font-size: 14px; }
.cf-home-cat__go{ margin-left:auto; color: rgba(27,27,27,.55); }

/* Event cards */
.cf-home-evt{
  display:block;
  text-decoration:none;
  color: var(--cf-text);
  overflow:hidden;
  transition: transform .12s ease;
}
.cf-home-evt:hover{ transform: translateY(-2px); }
.cf-home-evt__img{
  height: 180px;
  background: rgba(0,0,0,.04);
  border-bottom: 1px solid var(--cf-line);
}
.cf-home-evt__img img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.cf-home-evt__ph{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(27,27,27,.45);
  font-size: 22px;
}
.cf-home-evt__body{ padding: 14px; }
.cf-home-evt__title{
  font-weight: 900;
  margin-top: 6px;
  line-height: 1.15;
}

/* How */
.cf-home-how{
  background:
    radial-gradient(900px 380px at 0% 0%, rgba(122,23,23,.10) 0%, transparent 55%),
    radial-gradient(900px 380px at 100% 40%, rgba(229,154,47,.12) 0%, transparent 55%),
    rgba(255,255,255,.72);
}
.step{
  border: 1px solid var(--cf-line);
  border-radius: var(--cf-radius-sm);
  background: rgba(255,255,255,.70);
  padding: 12px;
  text-align:center;
}
.step__n{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  margin: 0 auto 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(122,23,23,.10);
  color: var(--cf-primary);
  font-weight: 900;
}
.step__t{ font-weight: 900; }
.step__s{ color: var(--cf-muted); font-size: 12px; }

/* CTA */
.cf-home-cta{
  position: relative;
  background:
    radial-gradient(900px 380px at 20% 0%, rgba(229,154,47,.12) 0%, transparent 55%),
    rgba(255,255,255,.76);
}
.cf-home-cta.alt{
  background:
    radial-gradient(900px 380px at 80% 0%, rgba(122,23,23,.12) 0%, transparent 55%),
    rgba(255,255,255,.76);
}
.cta__icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(122,23,23,.10);
  color: var(--cf-primary);
  margin-bottom: 10px;
  font-size: 18px;
}

/* Stats */
.cf-home-stats{
  background:
    linear-gradient(135deg, rgba(122,23,23,.10), rgba(229,154,47,.10)),
    rgba(255,255,255,.76);
}
.stat__n{
  font-weight: 950;
  font-size: 28px;
  color: var(--cf-primary);
  letter-spacing: -0.6px;
}
.stat__t{
  font-weight: 800;
  color: rgba(27,27,27,.70);
  font-size: 12px;
}


/* EMPORIA */
.cf-home-hero__submit{
  margin-top: 10px;;
}

.cf-home-hero__mapblock{
  margin-top: 10px;
}


/* =========================================================
   HOME — CONTACT SECTION (split hero + form)
   ========================================================= */

.cf-home-contact{
  position: relative;
  overflow: hidden;
  padding: 32px 0 44px;
  margin-top: 18px;
}

.cf-home-contact__bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(1100px 520px at 15% 35%, rgba(229,154,47,.16) 0%, transparent 55%),
    radial-gradient(900px 520px at 85% 10%, rgba(122,23,23,.14) 0%, transparent 60%),
    linear-gradient(180deg, rgba(246,240,230,.35) 0%, rgba(246,240,230,.75) 40%, rgba(246,240,230,1) 100%);
}

.cf-home-contact__bg .blob{
  position:absolute;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  filter: blur(40px);
  opacity: .45;
  animation: blobFloat 10s ease-in-out infinite;
}
.cf-home-contact__bg .b1{
  left: -180px; top: -140px;
  background: radial-gradient(circle at 30% 30%, rgba(229,154,47,.70), rgba(229,154,47,0) 70%);
}
.cf-home-contact__bg .b2{
  right: -200px; top: -170px;
  background: radial-gradient(circle at 30% 30%, rgba(122,23,23,.55), rgba(122,23,23,0) 70%);
  animation-delay: -2.5s;
}
.cf-home-contact__bg .b3{
  left: 40%; bottom: -280px;
  width: 700px; height: 700px;
  background: radial-gradient(circle at 30% 30%, rgba(154,42,28,.30), rgba(154,42,28,0) 70%);
  animation-delay: -5s;
}

.cf-home-contact .container{
  position: relative;
  z-index: 1;
}

.cf-home-contact__hero{
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
}

.cf-home-contact__kicker{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 10px;
}

.cf-home-contact__title{
  font-weight: 950;
  letter-spacing: -0.5px;
  line-height: 1.08;
  margin-bottom: 10px;
}

.cf-home-contact__subtitle{
  color: var(--cf-muted);
  max-width: 56ch;
  margin-bottom: 0;
}

.cf-home-contact__mini{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Card form: coerente col contact.css */
.cf-home-contact__card{
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(12px);
}

/* Se vuoi che il form in home abbia stessi radius del contact */
.cf-home-contact .cf-contact-form .form-control,
.cf-home-contact .cf-contact-form .form-select{
  border-radius: 14px;
}
.cf-home-contact .cf-contact-form textarea.form-control{
  border-radius: 16px;
}

@media (max-width: 991.98px){
  .cf-home-contact{
    padding: 22px 0 28px;
  }
}

/* =========================
   STACK MODE (notebook): sotto XL niente 100vh
   ========================= */
@media (max-width: 1199.98px){

  .cf-home-hero{
    height: auto !important;
    min-height: calc(100vh - 20px);
  }

  .cf-home-hero .container,
  .cf-home-hero .row,
  .cf-home-hero .col-lg-6,
  .cf-home-hero .col-xl-6{
    height: auto !important;
  }

  .cf-home-hero__left,
  .cf-home-hero__right{
    height: auto !important;
  }

  /* mappa: su stack serve una height esplicita */
  #cfHomeMap{
    height: clamp(260px, 45vh, 420px);
    min-height: 260px;
  }
}