/* Sezione "ScoutHub è gratuito per tutti": tre card (0 €, 60 €, 100 €) e riquadro finale con la lettera, foto e firma. */

.free { padding-top: 8px; padding-bottom: 56px; }

/* Card dei contributi: impilate su mobile, affiancate con righe allineate (subgrid) da 900px */
.free__plans { display: grid; gap: 20px; max-width: 520px; margin: 32px auto 0; padding: 0; list-style: none; }

.plan {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 24px;
}
.plan__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan__title { min-width: 0; font-size: 1.375rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.plan__price { margin-top: 16px; display: grid; gap: 4px; align-content: start; }
.plan__amount {
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 2.2rem + 2.4vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--color-purple);
}
.plan__per { font-size: 0.9375rem; font-weight: 600; color: var(--color-muted); }
.plan__text { margin-top: 12px; font-size: 0.9375rem; line-height: 1.6; color: var(--color-muted); text-wrap: pretty; }
.free__cta { margin-top: 32px; text-align: center; }

/* 60 €: contributo centrale, in evidenza con bordo e accenti viola */
.plan--support {
  border: 2px solid var(--color-purple);
  box-shadow: 0 0 0 5px var(--color-purple-100), 0 18px 32px -20px rgba(85, 37, 131, 0.5);
}

/* 100 €: accento dorato e richiamo al caffè sospeso */
.plan--suspended { background: linear-gradient(180deg, var(--color-yellow-100) 0%, #fff 62%); border-color: var(--color-yellow-border); }
.plan--suspended .plan__amount { background: linear-gradient(transparent 82%, var(--color-yellow) 82%); align-self: start; justify-self: start; padding-inline: 2px; }
.plan__coffee { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-yellow); color: var(--color-purple-900); }
.free__cup { width: 22px; height: 22px; }

/* Riquadro finale a tutta larghezza: lettera in alto a sinistra, foto e firma in basso a destra */
.free__panel {
  display: grid;
  gap: 24px;
  margin-top: 28px;
  padding: 24px;
  border: 1px solid var(--ring-purple);
  border-radius: 24px;
  background: var(--color-purple-50);
}
.free__letter { max-width: 720px; }
.free__letter p { font-size: 0.9375rem; line-height: 1.65; color: var(--color-ink); text-wrap: pretty; }
.free__letter p + p { margin-top: 12px; }
.free__letter strong { font-weight: 600; }
.free__ask { padding-left: 14px; border-left: 4px solid var(--color-yellow); }

/* Chiusura personale */
.free__closing { display: flex; align-items: center; gap: 20px; }
.free__photo {
  flex: none;
  width: 100px;
  height: 100px; /* annulla l'attributo height dell'HTML: il cerchio resta perfetto */
  border-radius: 50%;
  border: 2px solid var(--color-yellow);
  object-fit: cover;
  object-position: center center;
}
.free__closing-text { min-width: 0; }
.free__thanks { font-size: 0.9375rem; line-height: 1.65; color: var(--color-ink); }
.free__sign { margin-top: 6px; display: grid; gap: 2px; }
.free__name {
  justify-self: start;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-purple);
}
.free__role { font-size: 0.9375rem; color: var(--color-muted); }

@media (hover: hover) {
  .plan { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
  .plan:not(.plan--support):hover { transform: translateY(-3px); box-shadow: 0 16px 28px -22px rgba(23, 18, 31, 0.4); }
}
@media (prefers-reduced-motion: reduce) { .plan { transition: none; } .plan:hover { transform: none; } }

@media (min-width: 768px) {
  .free { padding-top: 16px; padding-bottom: 72px; }
  .free__plans { margin-top: 40px; }
  .plan { padding: 28px; border-radius: 28px; }
  .free__panel { grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 32px; margin-top: 32px; padding: 32px; border-radius: 28px; }
  .free__letter { align-self: start; }
  .free__letter p { font-size: 1rem; line-height: 1.7; }
  .free__letter p + p { margin-top: 14px; }
  .free__closing { align-self: end; justify-self: end; }
  .plan__text { font-size: 1rem; }
  .free__thanks { font-size: 1rem; }
}
@media (min-width: 900px) {
  .free__plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
    column-gap: 24px;
    row-gap: 0;
    max-width: none;
  }
  .plan { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
}
@media (min-width: 1200px) {
  .free__plans { column-gap: 28px; }
}