/* =========================================
   Section #2 — Voor wie is Cucina? (Personas)
   Matches hero style • Uses radius scale
   ========================================= */

.section--for-who{
  /* hero-coherent background */
  --hero-grad-a: var(--hero-grad-a, rgba(220,38,38,0.06));
  --hero-border: var(--hero-border, rgba(220,38,38,0.15));
  background:
    radial-gradient(1200px 600px at 10% -10%, var(--hero-grad-a), transparent 55%),
    radial-gradient(1200px 600px at 90% 110%, var(--hero-grad-a), transparent 55%),
    var(--surface-50, #f9fafb);
  border-top: 1px solid var(--hero-border);
  border-bottom: 1px solid var(--hero-border);
  padding: clamp(24px, 5vw, 56px) 0;
}

.section--for-who .section-header{
  margin-bottom: clamp(18px, 3vw, 28px);
}

/* Grid spacing */
.section--for-who .persona-grid{
  margin-left: -8px;
  margin-right: -8px;
}
.section--for-who .persona-grid > [class*="col-"]{
  padding-left: 8px;
  padding-right: 8px;
}

/* Card */
.persona-card{
  background: var(--surface-0, #fff);
  border: 1px solid rgba(17,24,39,.06);
  border-radius: var(--radius-lg, 16px); /* major container */
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06));
  padding: 18px 18px 16px;
  margin-bottom: 16px;
  min-height: 240px; /* ensures balanced heights without hard-coding */
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* subtle glow like hero */
.persona-card::before{
  content:"";
  position:absolute;
  inset:-45% -45% auto -45%;
  height: 130px;
  background: radial-gradient(60% 80% at 30% 30%, rgba(220,38,38,.10), rgba(220,38,38,0));
  pointer-events:none;
}

.persona-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 8px 30px rgba(0,0,0,.08));
  border-color: rgba(220,38,38,.22);
}

/* Icon */
.persona-icon{
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md, 12px); /* nested item */
  display: grid;
  place-items: center;
  background: radial-gradient(120% 120% at 20% 0%, rgba(220,38,38,.10), rgba(220,38,38,.03));
  border: 1px solid rgba(220,38,38,.18);
  margin-bottom: 12px;
}
.persona-icon .fa{
  font-size: 18px;
  color: var(--brand-600, #dc2626);
  opacity: .95;
}

/* Typography */
.persona-title{
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 800;
  color: var(--ink-900, #111827);
}

.persona-desc{
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--ink-700, #374151);
}

/* Bullets */
.persona-points{
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: grid;
  gap: 8px;
}
.persona-points li{
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  color: var(--ink-700, #374151);
}
.persona-points li::before{
  content:"";
  position:absolute;
  left: 0;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-sm, 8px);
  background: rgba(220,38,38,.22);
  border: 1px solid rgba(220,38,38,.28);
}

/* Link / CTA inside card */
.persona-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--brand-600, #dc2626);
  text-decoration: none;
}
.persona-link:hover,
.persona-link:focus{
  color: var(--brand-700, #b91c1c);
  text-decoration: underline;
}

/* If you want an arrow, use :after (no extra markup needed) */
.persona-link::after{
  content: "→";
  font-weight: 800;
  transform: translateY(-.5px);
}

/* Optional note row */
.section-note{
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid rgba(17,24,39,.08);
  background: rgba(255,255,255,.70);
  color: var(--ink-700, #374151);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.section-note .fa{
  color: var(--brand-600, #dc2626);
}

/* Responsive */
@media (max-width: 767px){
  .persona-card{
    padding: 16px;
    min-height: unset;
  }
  .section-note{
    width: 100%;
    justify-content: flex-start;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .persona-card{ transition: none; }
  .persona-card:hover{ transform: none; }
}

/* =========================================
   OPTIONAL: make personas swipeable (no Owl)
   Add class "persona-grid--snap" to the .row
   ========================================= */

@media (max-width: 767px){
  .persona-grid--snap{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .persona-grid--snap > [class*="col-"]{
    flex: 0 0 85%;
    max-width: 85%;
    scroll-snap-align: start;
  }
  .persona-grid--snap::-webkit-scrollbar{
    height: 8px;
  }
  .persona-grid--snap::-webkit-scrollbar-thumb{
    background: rgba(17,24,39,.12);
    border-radius: 999px;
  }
}