/* =========================
   CECILIA HUB — page styles
   Scoped: .hub-page
   Obiettivi:
   - più grafico (hero collage + cards)
   - coerente con style.css
   - mobile-first, accessibile
   ========================= */

.hub-page{
  background: #fff;
  color: var(--color-text, #111);
  padding-bottom: 4rem;
}

/* =========================
   HERO (immagine singola in alto)
   ========================= */
.hub-hero{
  background: #fff;
  border-bottom: 3px solid #000;
}

/* immagine full width come index */
.hub-hero__media{
  width: 100%;
  border-bottom: 3px solid #000;
  background: #f2f2f2;
}

.hub-hero__figure{
  margin: 0;
  width: 100%;
  height: clamp(320px, 60vh, 720px);
  overflow: hidden;
}

.hub-hero__figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* contenuto testuale sotto, allineato al container */
.hub-hero__inner{
  max-width: var(--container-max, 1100px);
  margin: 0 auto;
  padding-inline: var(--page-pad, clamp(1rem, 4vw, 3rem));
  padding-top: var(--page-head-pt, 56px);
  padding-bottom: var(--page-head-pb, 34px);
}

.hub-kicker{
  margin: 0 0 .6rem 0;
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-accent, #922A5E);
}

.hub-title{
  margin: 0 0 .95rem 0;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -0.01em;
  font-size: clamp(2.0rem, 3.1vw, 3.05rem);
  text-wrap: balance;
}

.hub-prose{
  max-width: 70ch;
}
.hub-prose p{
  margin: 0;
  font-size: clamp(1.02rem, 1.35vw, 1.15rem);
  line-height: 1.7;
}
.hub-prose p + p{ margin-top: .9rem; }

.hub-hero__cta{
  margin-top: 1.2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

/* mobile: immagine un po’ più bassa + titolo più piccolo */
@media (max-width: 900px){
  .hub-hero__figure{
    height: clamp(240px, 45vh, 420px);
  }

  .hub-title{
    font-size: clamp(1.65rem, 6.2vw, 2.1rem);
    letter-spacing: -0.02em;
  }

  .hub-hero__inner{
    padding-top: 1.1rem;
    padding-bottom: 1.6rem;
  }
}


/* =========================
   SEZIONI
   ========================= */
.hub-section{
  padding: 3.6rem 0;
}
.hub-section--light{
  background: var(--color-surface, #fff);
  border-top: 3px solid #000;
}

.hub-h2{
  margin: 0 0 1rem 0;
  font-size: clamp(1.55rem, 2.6vw, 2.25rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 800;
  text-wrap: balance;
}
.hub-h2--white{ color: #fff; }

.hub-h3{
  margin: 0 0 .9rem 0;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 800;
  line-height: 1.15;
}
.hub-h3--white{ color: #fff; }

.hub-lead{
  margin: 0 0 1rem 0;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.6;
}

.hub-head{ margin-bottom: 1.25rem; }

/* Split (testo/immagine) */
.hub-split{
  display: grid;
  grid-template-columns: minmax(0, 0.56fr) minmax(0, 0.44fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}
@media (max-width: 900px){
  .hub-split{ grid-template-columns: 1fr; }
}

.hub-figure{
  margin: 0;
  border: 1px solid rgba(0,0,0,0.10);
  overflow: hidden;
  background: #f2f2f2;
}
.hub-figure img{
  width: 100%;
  height: auto;
  display: block;
}

/* Cards */
.hub-cards{
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
}
.hub-cards--two{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-cards--one{ grid-template-columns: 1fr; }

@media (max-width: 900px){
  .hub-cards{ grid-template-columns: 1fr; }
  .hub-cards--two{ grid-template-columns: 1fr; }
}

.hub-card{
  border: 1px solid #eceaea;
  background: #fff;
  padding: 1.05rem 1.05rem 1.1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.hub-card__text{
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-text, #111);
}
.hub-card--dark{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: none;
}
.hub-card--dark .hub-card__text{ color: rgba(255,255,255,0.92); }

/* Chips */
.hub-chips{
  margin-top: .85rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .75rem;
}
.hub-chip{
  display: inline-flex;
  align-items: center;
  padding: .45rem .65rem;
  border: 1px solid rgba(146,42,94,0.35);
  background: #fff;
  font-size: .92rem;
  line-height: 1.2;
}

/* =========================
   STRIP BRAND (Perché)
   ========================= */
.hub-strip{
  background: var(--color-accent, #922A5E);
  color: #fff;
  padding: clamp(2.2rem, 4vw, 3.4rem) 0;
}

.hub-strip__inner{
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
}

.hub-strip__bar{
  width: 3px;
  height: 100%;
  background: #fff;
  display: block;
}

.hub-strip__title{
  margin: 0 0 .85rem 0;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 700;
  opacity: .95;
}

.hub-strip__text{
  margin: 0;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  line-height: 1.45;
}
.hub-strip__text + .hub-strip__text{ margin-top: .9rem; }

.hub-strip__grid{
  margin: 1rem 0 1.1rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}
.hub-strip__item{
  margin: 0;
  padding: .85rem .85rem;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.08);
  line-height: 1.35;
}
@media (max-width: 900px){
  .hub-strip__grid{ grid-template-columns: 1fr; }
}

/* =========================
   FEATURE (Cosa offre)
   ========================= */
.hub-feature{
  margin-top: 2.25rem;
  display: grid;
  grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr);
  gap: clamp(1.25rem, 3vw, 2.1rem);
  align-items: start;
}
.hub-feature--reverse{
  grid-template-columns: minmax(0, 0.54fr) minmax(0, 0.46fr);
}
.hub-feature--reverse .hub-feature__media{ order: 2; }
.hub-feature--reverse .hub-feature__text{ order: 1; }

@media (max-width: 900px){
  .hub-feature,
  .hub-feature--reverse{
    grid-template-columns: 1fr;
  }
  .hub-feature--reverse .hub-feature__media,
  .hub-feature--reverse .hub-feature__text{
    order: initial;
  }
}

/* =========================
   METRICS
   ========================= */
.hub-metrics{
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.hub-metric{
  border: 1px solid #eceaea;
  background: #fff;
  padding: 1.1rem 1rem 1.15rem;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
}
.hub-metric__value{
  margin: 0 0 .35rem 0;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #111;
}
.hub-metric__label{
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  color: #333;
}
.hub-metric--wide{
  grid-column: 1 / -1;
}

@media (max-width: 1024px){
  .hub-metrics{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px){
  .hub-metrics{ grid-template-columns: 1fr; }
}

/* =========================
   STEPS
   ========================= */
.hub-steps{
  margin: 1.15rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem 1rem;
}
.hub-step{
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
  border: 1px solid #eceaea;
  background: #fff;
  padding: .95rem 1rem;
}
.hub-step__n{
  width: 40px;
  height: 40px;
  border: 1px solid rgba(146,42,94,0.35);
  display: grid;
  place-items: center;
  font-weight: 800;
  color: var(--color-accent, #922A5E);
}
.hub-step__t{
  line-height: 1.45;
}

@media (max-width: 900px){
  .hub-steps{ grid-template-columns: 1fr; }
}

/* =========================
   DONATE (dark)
   ========================= */
.hub-donate{
  background: #000;
  color: #fff;
  padding: 3.8rem 0;
  border-top: 3px solid #000;
}

.hub-donate__grid{
  display: grid;
  grid-template-columns: minmax(0, 0.56fr) minmax(0, 0.44fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}
@media (max-width: 900px){
  .hub-donate__grid{ grid-template-columns: 1fr; }
}

.hub-donate__text{
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.90);
}
.hub-donate__text + .hub-donate__text{ margin-top: .85rem; }

.hub-donate__tiles{
  margin-top: 1.15rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
}
@media (max-width: 900px){
  .hub-donate__tiles{ grid-template-columns: 1fr; }
}

.hub-donate__tile{
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  padding: 1rem 1rem 1.05rem;
}
.hub-donate__amount{
  margin: 0 0 .35rem 0;
  font-size: 1.25rem;
  line-height: 1;
}
.hub-donate__desc{
  margin: 0;
  color: rgba(255,255,255,0.90);
  line-height: 1.4;
}

.hub-donate__cta{
  margin-top: 1.1rem;
  display: grid;
  gap: .75rem;
}

.hub-cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .85rem 1rem;
  border: 1.5px solid rgba(233, 128, 180, 0.75);
  background: #fff;
  color: #111;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hub-cta-btn:hover,
.hub-cta-btn:focus-visible{
  background: var(--color-accent, #922A5E);
  color: #fff;
  border-color: var(--color-accent, #922A5E);
}

.hub-cta-btn--ghost{
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.28);
}
.hub-cta-btn--ghost:hover,
.hub-cta-btn--ghost:focus-visible{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.45);
}

/* =========================
   CLOSE (white)
   ========================= */
.hub-close{
  background: #fff;
  padding: clamp(2.2rem, 4vw, 3.4rem) 0;
  border-top: 3px solid #000;
}

.hub-close__inner{
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.hub-close__bar{
  width: 3px;
  height: 100%;
  background: #111;
  display: block;
}

.hub-close__title{
  margin: 0 0 .85rem 0;
  font-size: clamp(1.35rem, 2.2vw, 2.05rem);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 800;
  line-height: 1.05;
  text-wrap: balance;
}

.hub-close__text{
  margin: 0;
  font-size: clamp(1.05rem, 1.65vw, 1.25rem);
  line-height: 1.55;
}
.hub-close__text + .hub-close__text{ margin-top: .9rem; }

.hub-close__chips{
  margin: 1rem 0 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .75rem;
}
.hub-close__chip{
  padding: .45rem .65rem;
  border: 1px solid rgba(0,0,0,0.14);
  background: #fff;
  font-size: .95rem;
}
/* =========================
   HERO: griglia 2 colonne (sotto immagine)
   ========================= */
.hub-hero__grid{
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(3.25rem, 3vw, 2.25rem);
  align-items: start;
}

/* sinistra */
.hub-hero__left{
  min-width: 0;
}

/* destra */
.hub-hero__right{
  min-width: 0;
}

/* prose: un filo più “editoriale” */
.hub-prose{
  max-width: 72ch;
}
.hub-prose p{
  margin: 0;
  font-size: clamp(1.02rem, 1.35vw, 1.15rem);
  line-height: 1.3;
}
.hub-prose p + p{ margin-top: .9rem; }

/* CTA: più “pulita” e coerente */
.hub-hero__cta{
  margin-top: 3.1rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Mobile: 1 colonna */
@media (max-width: 900px){
  .hub-hero__grid{
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  /* CTA sotto il titolo, poi testo */
  .hub-hero__cta{
    margin-top: .9rem;
  }
}