/* Fascia partner
   Valori riletti il 02/10 sera dal componente `Fascia Partner` e dalla sua mobile reference
   (§87); prima venivano dalla fascia a mano di `transizione-energetica` (Carbonsink). */

.fp {
  --fp-navy: var(--color-primary, #004278);
  --fp-white: var(--color-white, #ffffff);
  --fp-font: Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* `section/padding-xl`: 160 a 1920 → 24 a 390. */
  --fp-gutter: clamp(24px, 8.889vw - 10.67px, 160px);
  /* 120 a 1920 → 50 a 390, componente e mobile reference. */
  --fp-pad-v: clamp(50px, 32.16px + 4.575vw, 120px);

  box-sizing: border-box;
  padding: var(--fp-pad-v) 0;
  font-family: var(--fp-font);
  color: var(--fp-white);
  background: var(--fp-navy);
}
.fp *,
.fp *::before,
.fp *::after { box-sizing: border-box; }

/* Gabbia 1600. Testi a sinistra e logo a destra sulla stessa riga (stacco 24, logo in alto),
   il pulsante sotto, a 40. Una griglia invece dei due frame annidati del disegno: il pulsante
   sta sotto i testi ma il logo no, e con la griglia l'ordine del markup resta quello di
   lettura — titolo, testo, logo, pulsante. */
.fp__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "testi logo"
    "cta   cta";
  column-gap: 24px;
  row-gap: 40px;
  max-width: calc(1600px + 2 * var(--fp-gutter));
  margin: 0 auto;
  padding: 0 var(--fp-gutter);
}

.fp__testi {
  grid-area: testi;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* `H2` 48/58 Bold, bianco. Dichiarato sull'elemento: il tema dà font e misure agli heading. */
.fp__title {
  margin: 0;
  font-family: var(--fp-font);
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 1.20833;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fp-white);
}

/* `body m` 20/30, bianco, largo al massimo 1067 come nel frame: il titolo può andare oltre. */
.fp__text { max-width: 1067px; }
.fp__text,
.fp__text > p,
.fp__text > ul,
.fp__text > ol,
.fp__text li {
  font-family: var(--fp-font);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--fp-white);
}
.fp__text > :first-child { margin-top: 0; }
.fp__text > :last-child { margin-bottom: 0; }
.fp__text a { color: var(--fp-white); }

/* Il logo: 368 a 1920 — `FILL` in un riquadro 368×74 che ha la proporzione del PNG — e scende
   con la pagina fino a 200. L'altezza la decide il logo. */
.fp__logo-box { grid-area: logo; align-self: start; }
.fp__logo {
  display: block;
  width: clamp(200px, 19.167vw, 368px);
  height: auto;
}

.fp__cta { grid-area: cta; }

/* --- Il pulsante: `button`, `Variante=White`, `Dimensione=Standard` -----------------------
   Tutti gli stati in un blocco solo, a (0,2,0): `a:hover` del tema vale (0,1,1) e batte una
   classe sola. Misure del master: padding 16/32, etichetta 16/21 SemiBold maiuscola con
   spaziatura 0,7 (0,04375em), bordo 1px, due ombre. */
.fp__button,
.fp__button:link,
.fp__button:visited,
.fp__button:hover,
.fp__button:focus,
.fp__button:active {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  font-family: var(--fp-font);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3125;
  letter-spacing: 0.04375em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
  color: var(--fp-btn-fg);
  background: var(--fp-btn-bg);
  border: 1px solid var(--fp-btn-edge);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.fp__button {
  --fp-btn-fg: var(--fp-navy);
  --fp-btn-bg: var(--fp-white);
  --fp-btn-edge: var(--fp-navy);
}
/* La freccia del master, 13×13. Decorativa: la macro la nasconde. */
.fp__button-icon { display: block; flex: none; width: 13px; height: 13px; }

/* ---- Stati interattivi — §70 del contratto ---------------------------------------------
   «Pulsante bianco bordato» su fondo navy (§72): in hover si rovescia — fondo `Primary`,
   testo e freccia bianchi — e il **bordo bianco** tiene la forma; premuto, fondo `Primary
   scuro`. Focus da tastiera: contorno bianco 2px a 2px, perché cade sul navy. */
.fp__button:hover {
  --fp-btn-fg: var(--fp-white);
  --fp-btn-bg: var(--fp-navy);
  --fp-btn-edge: var(--fp-white);
}
.fp__button:active {
  --fp-btn-fg: var(--fp-white);
  --fp-btn-bg: var(--color-primary-scuro, #031b3b);
  --fp-btn-edge: var(--fp-white);
}
.fp__button:focus-visible {
  outline: 2px solid var(--fp-white);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .fp__button { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
  .fp__button-icon { transition: transform 0.15s ease; }
  .fp__button:hover .fp__button-icon { transform: translateX(4px); }
}

/* --- Colonna sola -------------------------------------------------------------------------
   Sotto i 1100 il testo affiancato al logo scenderebbe sotto le 60 battute per riga: il logo
   passa sotto il testo, prima del pulsante — l'ordine del markup. Soglia nostra. */
@media (max-width: 1100px) {
  .fp__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "testi"
      "logo"
      "cta";
    row-gap: 32px;
  }
}

/* Sotto i 768: `Fascia Partner — Mobile reference`. `H2` → `H2 mobile` 32/37, il corpo resta
   20/30; il logo sotto il testo a 32 e largo 220, il pulsante a 40 e a tutta larghezza. */
@media (max-width: 768px) {
  .fp__title { font-size: 3.2rem; line-height: 1.15625; }
  .fp__inner { row-gap: 32px; }
  .fp__logo { width: 220px; }
  .fp__cta { margin-top: 8px; }
  .fp__button,
  .fp__button:link,
  .fp__button:visited,
  .fp__button:hover,
  .fp__button:focus,
  .fp__button:active {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}
}