/* ==========================================
   CHI SIAMO - FULL SCREEN (THEME-DRIVEN)
   File: assets/css/home/chi-siamo.css
   ✅ Tutto passa da CSS variables (Customizer)
========================================== */

/* =========================================================
   VARS (fallback) - Customizer le sovrascrive via inline CSS
========================================================= */
:root{
  /* Section layout */
  --sp-about-minh: 97vh;
  --sp-about-align: center;        /* center | flex-start */
  --sp-about-pad-y-desktop: 0px;   /* se vuoi aggiungere padding oltre inner */
  --sp-about-pad-x: 0px;

  --sp-about-inner-max: 1240px;
  --sp-about-inner-w: 92vw;
  --sp-about-inner-pad-y: clamp(70px, 8vh, 110px);

  --sp-about-grid-col-1: 1.20fr;
  --sp-about-grid-col-2: .90fr;
  --sp-about-grid-gap: 32px;
  --sp-about-grid-align: center;

  /* Background gradient base (mixati con theme vars) */
  --sp-about-bg-stop1: 55%;
  --sp-about-bg-stop2: 70%;
  --sp-about-bg-1: color-mix(in srgb, var(--bg) var(--sp-about-bg-stop1), #000);
  --sp-about-bg-2: color-mix(in srgb, var(--panel) var(--sp-about-bg-stop2), #000);
  --sp-about-bg-3: color-mix(in srgb, var(--bg) 70%, #000);

  /* Accent spots */
  --sp-about-spots-opacity: .95;
  --sp-about-spot1-size-x: 900px;
  --sp-about-spot1-size-y: 520px;
  --sp-about-spot1-x: 18%;
  --sp-about-spot1-y: 10%;
  --sp-about-spot1-strength: 12%;

  --sp-about-spot2-size-x: 1100px;
  --sp-about-spot2-size-y: 680px;
  --sp-about-spot2-x: 72%;
  --sp-about-spot2-y: 20%;
  --sp-about-spot2-strength: 12%;

  /* Pattern (usa già vars globali) */
  --sp-about-pattern-opacity: var(--pattern-opacity);
  --sp-about-pattern-size: var(--pattern-size);
  --sp-about-pattern-dot: rgba(255,255,255,.05);

  /* Kicker */
  --sp-about-kicker-mb: 12px;
  --sp-about-kicker-size: 12px;
  --sp-about-kicker-ls: .18em;
  --sp-about-kicker-color: rgba(255,255,255,.70);
  --sp-about-kicker-font: var(--font-subtitle);

  /* Title */
  --sp-about-title-mb: 12px;
  --sp-about-title-size: clamp(34px, 4.6vw, 64px);
  --sp-about-title-line: 1.02;
  --sp-about-title-weight: 900;
  --sp-about-title-color: var(--accent);
  --sp-about-title-font: var(--font-title);
  --sp-about-title-shadow: 0 0 26px rgba(0,0,0,.25);
  --sp-about-title-shadow-mix: 0 0 26px color-mix(in srgb, var(--accent) 22%, transparent);

  /* Subtitle */
  --sp-about-sub-mb: 16px;
  --sp-about-sub-size: clamp(26px, 3.2vw, 46px);
  --sp-about-sub-line: 1.05;
  --sp-about-sub-weight: 700;
  --sp-about-sub-color: rgba(255,255,255,.96);
  --sp-about-sub-shadow: 0 16px 60px rgba(0,0,0,.45);
  --sp-about-sub-font: var(--font-title);

  /* Story */
  --sp-about-story-mb: 18px;
  --sp-about-story-size: 16px;
  --sp-about-story-line: 1.9;
  --sp-about-story-color: rgba(255,255,255,.78);
  --sp-about-story-maxw: 92ch;
  --sp-about-story-font: var(--font-body);

  /* Method intro */
  --sp-about-methodintro-mb: 10px;
  --sp-about-methodintro-weight: 900;
  --sp-about-methodintro-ls: .02em;
  --sp-about-methodintro-color: rgba(255,255,255,.90);
  --sp-about-methodintro-font: var(--font-subtitle);

  /* Method list */
  --sp-about-method-mb: 18px;
  --sp-about-method-gap: 10px;
  --sp-about-method-maxw: 70ch;

  --sp-about-method-item-gap: 10px;
  --sp-about-method-item-pad-y: 10px;
  --sp-about-method-item-pad-x: 12px;
  --sp-about-method-item-radius: 14px;
  --sp-about-method-item-bg: rgba(255,255,255,.04);
  --sp-about-method-item-border: 1px solid rgba(255,255,255,.10);

  --sp-about-method-dot: 10px;
  --sp-about-method-dot-mt: 7px;
  --sp-about-method-dot-color: var(--accent);
  --sp-about-method-dot-shadow: 0 0 0 4px rgba(0,0,0,.12);
  --sp-about-method-dot-shadow-mix: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);

  --sp-about-method-text-color: rgba(255,255,255,.84);
  --sp-about-method-text-line: 1.6;
  --sp-about-method-text-size: 14px;
  --sp-about-method-text-font: var(--font-body);

  /* Pills */
  --sp-about-pills-gap: 10px;
  --sp-about-pills-mb: 22px;

  --sp-about-pill-pad-y: 9px;
  --sp-about-pill-pad-x: 12px;
  --sp-about-pill-radius: 999px;
  --sp-about-pill-bg: rgba(255,255,255,.06);
  --sp-about-pill-border: 1px solid rgba(255,255,255,.12);
  --sp-about-pill-size: 12px;
  --sp-about-pill-ls: .10em;
  --sp-about-pill-color: rgba(255,255,255,.82);
  --sp-about-pill-font: var(--font-subtitle);

  /* CTA */
  --sp-about-cta-gap: 12px;
  --sp-about-cta-btn-radius: 14px;

  /* Card */
  --sp-about-card-radius: 24px;
  --sp-about-card-bg: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  --sp-about-card-border: 1px solid rgba(255,255,255,.14);
  --sp-about-card-shadow: 0 30px 90px rgba(0,0,0,.55);
  --sp-about-card-scale: 1.06;
  --sp-about-card-origin: center right;

  /* Card top */
  --sp-about-cardtop-pad-y: 16px;
  --sp-about-cardtop-pad-x: 18px;
  --sp-about-cardtop-border: 1px solid rgba(255,255,255,.10);
  --sp-about-cardtop-color: rgba(255,255,255,.70);
  --sp-about-cardtop-size: 12px;
  --sp-about-cardtop-ls: .12em;
  --sp-about-cardtop-font: var(--font-subtitle);

  --sp-about-dots-gap: 6px;
  --sp-about-dot: 10px;
  --sp-about-dot-bg: rgba(255,255,255,.14);
  --sp-about-dot-border: 1px solid rgba(255,255,255,.12);

  --sp-about-dot-1: rgba(255,95,86,.55);
  --sp-about-dot-2: rgba(255,189,46,.55);
  --sp-about-dot-3: rgba(39,201,63,.55);

  /* Card body */
  --sp-about-cardbody-pad-y: 20px;
  --sp-about-cardbody-pad-x: 18px;
  --sp-about-cardbody-color: rgba(255,255,255,.84);

  --sp-about-mini-mb: 14px;
  --sp-about-mini-size: 15px;
  --sp-about-mini-line: 1.7;
  --sp-about-mini-color: rgba(255,255,255,.80);
  --sp-about-mini-strong: rgba(255,255,255,.92);
  --sp-about-mini-link: rgba(255,255,255,.96);

  --sp-about-hours: rgba(255,255,255,.76);

  /* Hint */
  --sp-about-hint-mt: 16px;
  --sp-about-hint-pad: 14px;
  --sp-about-hint-radius: 16px;
  --sp-about-hint-bg: rgba(255,255,255,.04);
  --sp-about-hint-border: 1px solid rgba(255,255,255,.10);
  --sp-about-hint-color: rgba(255,255,255,.84);
  --sp-about-hint-line: 1.55;
  --sp-about-hint-size: 14px;
  --sp-about-hint-font: var(--font-body);

  --sp-about-hint-bg-mix: color-mix(in srgb, var(--accent) 10%, transparent);
  --sp-about-hint-border-mix: color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,.10));

  /* Responsive */
  --sp-about-bp-lg: 1100px;
  --sp-about-bp-md: 980px;

  --sp-about-grid-col-1-lg: 1.10fr;
  --sp-about-grid-col-2-lg: .90fr;
  --sp-about-grid-gap-lg: 28px;
  --sp-about-card-scale-lg: 1.03;

  --sp-about-pad-md-top: 90px;
  --sp-about-pad-md-bot: 70px;

  --sp-about-title-size-md: clamp(30px, 8vw, 50px);
  --sp-about-sub-size-md: clamp(22px, 6.4vw, 38px);
}

/* =========================================================
   SECTION BASE
========================================================= */
.sp-about{
  position: relative;
  min-height: var(--sp-about-minh);
  display: flex;
  align-items: var(--sp-about-align);
  padding: var(--sp-about-pad-y-desktop) var(--sp-about-pad-x);
  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      var(--sp-about-bg-1) 0%,
      var(--sp-about-bg-2) 45%,
      var(--sp-about-bg-3) 100%
    );
}

/* Spot gradients (accent/accent2) */
.sp-about::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 0;
  opacity: var(--sp-about-spots-opacity);
}

@supports (color: color-mix(in srgb, white 50%, black)){
  .sp-about::after{
    background:
      radial-gradient(
        var(--sp-about-spot1-size-x) var(--sp-about-spot1-size-y) at var(--sp-about-spot1-x) var(--sp-about-spot1-y),
        color-mix(in srgb, var(--accent) var(--sp-about-spot1-strength), transparent),
        transparent 60%
      ),
      radial-gradient(
        var(--sp-about-spot2-size-x) var(--sp-about-spot2-size-y) at var(--sp-about-spot2-x) var(--sp-about-spot2-y),
        color-mix(in srgb, var(--accent2) var(--sp-about-spot2-strength), transparent),
        transparent 62%
      );
  }
}

/* Pattern puntinato */
.sp-about::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(var(--sp-about-pattern-dot) 1px, transparent 1px);
  background-size: var(--sp-about-pattern-size) var(--sp-about-pattern-size);
  opacity: var(--sp-about-pattern-opacity);
  pointer-events:none;
  z-index: 1;
}

/* Wrapper */
.sp-about__inner{
  width: min(var(--sp-about-inner-max), var(--sp-about-inner-w));
  margin: 0 auto;
  position: relative;
  z-index: 2;
  padding: var(--sp-about-inner-pad-y) 0;
}

.sp-about__grid{
  display: grid;
  grid-template-columns: var(--sp-about-grid-col-1) var(--sp-about-grid-col-2);
  gap: var(--sp-about-grid-gap);
  align-items: var(--sp-about-grid-align);
}

/* =========================================================
   TEXT
========================================================= */
.sp-about__kicker{
  margin: 0 0 var(--sp-about-kicker-mb);
  font-size: var(--sp-about-kicker-size);
  letter-spacing: var(--sp-about-kicker-ls);
  text-transform: uppercase;
  color: var(--sp-about-kicker-color);
  font-family: var(--sp-about-kicker-font);
}

.sp-about__title{
  margin: 0 0 var(--sp-about-title-mb);
  font-size: var(--sp-about-title-size);
  line-height: var(--sp-about-title-line);
  font-weight: var(--sp-about-title-weight);
  color: var(--sp-about-title-color);
  font-family: var(--sp-about-title-font);
  text-shadow: var(--sp-about-title-shadow);
}

@supports (color: color-mix(in srgb, white 50%, black)){
  .sp-about__title{ text-shadow: var(--sp-about-title-shadow-mix); }
}

.sp-about__sotto_title{
  margin: 0 0 var(--sp-about-sub-mb);
  font-size: var(--sp-about-sub-size);
  line-height: var(--sp-about-sub-line);
  font-weight: var(--sp-about-sub-weight);
  color: var(--sp-about-sub-color);
  text-shadow: var(--sp-about-sub-shadow);
  font-family: var(--sp-about-sub-font);
}

.sp-about__story{
  margin: 0 0 var(--sp-about-story-mb);
  font-size: var(--sp-about-story-size);
  line-height: var(--sp-about-story-line);
  color: var(--sp-about-story-color);
  max-width: var(--sp-about-story-maxw);
  font-family: var(--sp-about-story-font);
}

/* =========================================================
   METHOD
========================================================= */
.sp-about__method_intro{
  margin: 0 0 var(--sp-about-methodintro-mb);
  font-weight: var(--sp-about-methodintro-weight);
  letter-spacing: var(--sp-about-methodintro-ls);
  color: var(--sp-about-methodintro-color);
  font-family: var(--sp-about-methodintro-font);
}

.sp-about__method{
  margin: 0 0 var(--sp-about-method-mb);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-about-method-gap);
  max-width: var(--sp-about-method-maxw);
}

.sp-about__method_item{
  display: flex;
  align-items: flex-start;
  gap: var(--sp-about-method-item-gap);
  padding: var(--sp-about-method-item-pad-y) var(--sp-about-method-item-pad-x);
  border-radius: var(--sp-about-method-item-radius);
  background: var(--sp-about-method-item-bg);
  border: var(--sp-about-method-item-border);
}

.sp-about__method_dot{
  width: var(--sp-about-method-dot);
  height: var(--sp-about-method-dot);
  margin-top: var(--sp-about-method-dot-mt);
  border-radius: 999px;
  background: var(--sp-about-method-dot-color);
  box-shadow: var(--sp-about-method-dot-shadow);
  flex: 0 0 auto;
}

@supports (color: color-mix(in srgb, white 50%, black)){
  .sp-about__method_dot{ box-shadow: var(--sp-about-method-dot-shadow-mix); }
}

.sp-about__method_text{
  color: var(--sp-about-method-text-color);
  line-height: var(--sp-about-method-text-line);
  font-size: var(--sp-about-method-text-size);
  font-family: var(--sp-about-method-text-font);
}

/* =========================================================
   PILLS
========================================================= */
.sp-about__pills{
  display:flex;
  flex-wrap: wrap;
  gap: var(--sp-about-pills-gap);
  margin: 0 0 var(--sp-about-pills-mb);
}

.sp-about__pill{
  padding: var(--sp-about-pill-pad-y) var(--sp-about-pill-pad-x);
  border-radius: var(--sp-about-pill-radius);
  background: var(--sp-about-pill-bg);
  border: var(--sp-about-pill-border);
  font-size: var(--sp-about-pill-size);
  letter-spacing: var(--sp-about-pill-ls);
  text-transform: uppercase;
  color: var(--sp-about-pill-color);
  font-family: var(--sp-about-pill-font);
}

/* =========================================================
   CTA
========================================================= */
.sp-about__cta{
  display:flex;
  gap: var(--sp-about-cta-gap);
  flex-wrap: wrap;
}

.sp-about__cta .btn{
  border-radius: var(--sp-about-cta-btn-radius);
}

/* =========================================================
   CARD
========================================================= */
.sp-about__card{
  border-radius: var(--sp-about-card-radius);
  overflow: hidden;
  background: var(--sp-about-card-bg);
  border: var(--sp-about-card-border);
  box-shadow: var(--sp-about-card-shadow);

  transform: scale(var(--sp-about-card-scale));
  transform-origin: var(--sp-about-card-origin);
}

.sp-about__cardtop{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: var(--sp-about-cardtop-pad-y) var(--sp-about-cardtop-pad-x);
  border-bottom: var(--sp-about-cardtop-border);
  color: var(--sp-about-cardtop-color);
  font-size: var(--sp-about-cardtop-size);
  letter-spacing: var(--sp-about-cardtop-ls);
  text-transform: uppercase;
  font-family: var(--sp-about-cardtop-font);
}

.sp-about__dots{ display:flex; gap: var(--sp-about-dots-gap); }

.sp-about__dots .dot{
  width: var(--sp-about-dot);
  height: var(--sp-about-dot);
  border-radius: 999px;
  background: var(--sp-about-dot-bg);
  border: var(--sp-about-dot-border);
}

.sp-about__dots .dot:nth-child(1){ background: var(--sp-about-dot-1); }
.sp-about__dots .dot:nth-child(2){ background: var(--sp-about-dot-2); }
.sp-about__dots .dot:nth-child(3){ background: var(--sp-about-dot-3); }

.sp-about__cardbody{
  padding: var(--sp-about-cardbody-pad-y) var(--sp-about-cardbody-pad-x);
  color: var(--sp-about-cardbody-color);
}

.sp-about__mini{
  margin: 0 0 var(--sp-about-mini-mb);
  font-size: var(--sp-about-mini-size);
  line-height: var(--sp-about-mini-line);
  color: var(--sp-about-mini-color);
  font-family: var(--font-body);
}

.sp-about__mini strong{ color: var(--sp-about-mini-strong); }

.sp-about__mini a{
  color: var(--sp-about-mini-link);
  text-decoration: underline;
}

.sp-about__hours{ color: var(--sp-about-hours); }

.sp-about__hint{
  margin-top: var(--sp-about-hint-mt);
  padding: var(--sp-about-hint-pad);
  border-radius: var(--sp-about-hint-radius);
  background: var(--sp-about-hint-bg);
  border: var(--sp-about-hint-border);
  color: var(--sp-about-hint-color);
  line-height: var(--sp-about-hint-line);
  font-size: var(--sp-about-hint-size);
  font-family: var(--sp-about-hint-font);
}

/* hint “accentato” dinamico */
@supports (color: color-mix(in srgb, white 50%, black)){
  .sp-about__hint{
    background: var(--sp-about-hint-bg-mix);
    border-color: var(--sp-about-hint-border-mix);
  }
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1100px){
  .sp-about__grid{
    grid-template-columns: var(--sp-about-grid-col-1-lg) var(--sp-about-grid-col-2-lg);
    gap: var(--sp-about-grid-gap-lg);
  }
  .sp-about__card{
    transform: scale(var(--sp-about-card-scale-lg));
  }
}

@media (max-width: 980px){
  .sp-about{
    min-height: auto;
    padding: var(--sp-about-pad-md-top) 0 var(--sp-about-pad-md-bot);
  }
  .sp-about__inner{ padding: 0; }

  .sp-about__grid{
    grid-template-columns: 1fr;
    align-items: start;
  }

  .sp-about__card{ transform: none; }

  .sp-about__title{ font-size: var(--sp-about-title-size-md); }
  .sp-about__sotto_title{ font-size: var(--sp-about-sub-size-md); }
}