/* ═══════════════════════════════════════════════════════════════════
   calc3-affiliate-feature.css — Scheda partner editoriale
   Versione "approfondita" della CTA (coesiste con calc3-cta-slot).

   Dipende da: tokens.css + calc3-tokens-restyle.css (child theme).
   Shadow neo-brutalist: usiamo --calc3-shadow-brutal-md|lg (NON
   --calc3-shadow-md|lg che nel child sono soft blur).
   Touch target: min-height var(--calc3-touch-target) sui CTA.
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════
   AFFILIATE FEATURE — Scheda partner (base)
   ═══════════════════════════════════════════════════ */

.calc3-affiliate-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--paper-bright);
  border-top: var(--rule-bold) solid var(--ink);
  border-bottom: var(--rule-thin) solid var(--ink);
  margin: var(--calc3-spacing-xl) 0;
}

@media (min-width: 768px) {
  .calc3-affiliate-feature {
    grid-template-columns: 40% 60%;
  }
  .calc3-affiliate-feature--media-right {
    grid-template-columns: 60% 40%;
  }
  .calc3-affiliate-feature--media-right .calc3-affiliate-feature__media {
    order: 2;
    border-inline-start: var(--rule-hair) solid var(--ink-faint);
    border-inline-end: none;
  }
}


/* ═══════════════════════════════════════════════════
   MEDIA — slot visivo (placeholder o immagine)
   ═══════════════════════════════════════════════════ */

.calc3-affiliate-feature__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--paper-shade);
  border-inline-end: var(--rule-hair) solid var(--ink-faint);
  overflow: hidden;
  min-width: 0;
}
.calc3-affiliate-feature__media svg {
  display: block;
  width: 100%;
  height: 100%;
}
.calc3-affiliate-feature__media-tag {
  position: absolute;
  top: var(--calc3-spacing-sm);
  left: var(--calc3-spacing-sm);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--ink);
  color: var(--paper);
  padding: var(--calc3-spacing-xs) var(--calc3-spacing-sm);
}


/* ═══════════════════════════════════════════════════
   BODY — testo editoriale
   ═══════════════════════════════════════════════════ */

.calc3-affiliate-feature__body {
  padding: var(--calc3-spacing-lg);
  min-width: 0;
}

.calc3-affiliate-feature__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  margin: 0 0 var(--calc3-spacing-sm) 0;
  padding-bottom: var(--calc3-spacing-xs);
  border-bottom: var(--rule-hair) solid var(--ink-faint);
}

.calc3-affiliate-feature__partner {
  font-family: var(--font);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--calc3-spacing-xs) 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.calc3-affiliate-feature__lead {
  font-family: var(--font);
  font-size: var(--t-corpo);
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 var(--calc3-spacing-md) 0;
}


/* ─── Facts (chiave → valore) ─── */

.calc3-affiliate-feature__facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0 0 var(--calc3-spacing-md) 0;
  padding: var(--calc3-spacing-sm) 0;
  border-top: var(--rule-hair) solid var(--ink-faint);
  border-bottom: var(--rule-hair) solid var(--ink-faint);
}
@media (min-width: 480px) {
  .calc3-affiliate-feature__facts {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--calc3-spacing-sm);
  }
}
.calc3-affiliate-feature__facts > div {
  display: flex;
  flex-direction: column;
  padding: var(--calc3-spacing-xs) 0;
  min-width: 0;
}
.calc3-affiliate-feature__facts dt {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.calc3-affiliate-feature__facts dd {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-corpo-sm);
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}


/* ─── Bullets (punti chiave con marker ▸) ─── */

.calc3-affiliate-feature__bullets {
  list-style: none;
  margin: 0 0 var(--calc3-spacing-md) 0;
  padding: 0;
}
.calc3-affiliate-feature__bullets li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: var(--calc3-spacing-xs);
  font-size: var(--t-corpo-sm);
  line-height: 1.5;
  color: var(--ink-soft);
}
.calc3-affiliate-feature__bullets li::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--rosso);
  font-weight: 700;
}


/* ─── Actions (primary + secondary) ─── */

.calc3-affiliate-feature__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--calc3-spacing-sm);
  align-items: center;
  margin-bottom: var(--calc3-spacing-md);
}
.calc3-affiliate-feature__primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--calc3-touch-target);
  padding: var(--calc3-spacing-sm) var(--calc3-spacing-lg);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font);
  font-size: var(--t-corpo);
  font-weight: 500;
  text-decoration: none;
  border: var(--rule-thin) solid var(--ink);
  border-radius: 0;
  box-shadow: var(--calc3-shadow-brutal-md);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.calc3-affiliate-feature__primary:hover,
.calc3-affiliate-feature__primary:focus-visible {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--ink);
  outline: none;
}
.calc3-affiliate-feature__primary:focus-visible {
  outline: var(--rule-thin) solid var(--rosso);
  outline-offset: 3px;
}

.calc3-affiliate-feature__secondary {
  display: inline-flex;
  align-items: center;
  min-height: var(--calc3-touch-target);
  padding: var(--calc3-spacing-xs) 0;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-corpo-sm);
  text-decoration: underline;
  text-decoration-thickness: var(--rule-thin);
  text-underline-offset: 4px;
}
.calc3-affiliate-feature__secondary:hover,
.calc3-affiliate-feature__secondary:focus-visible {
  color: var(--rosso);
  outline: none;
}
.calc3-affiliate-feature__secondary:focus-visible {
  outline: var(--rule-thin) solid var(--rosso);
  outline-offset: 3px;
}


/* ─── Disclosure ─── */

.calc3-affiliate-feature__disclosure {
  font-family: var(--font);
  font-style: italic;
  font-size: var(--t-meta);
  color: var(--ink-faint);
  margin: 0;
  padding-top: var(--calc3-spacing-sm);
  border-top: var(--rule-hair) solid var(--ink-faint);
  line-height: 1.5;
}


/* ─── Variante no-media (full-width body) ─── */

.calc3-affiliate-feature--no-media {
  grid-template-columns: 1fr !important;
}
.calc3-affiliate-feature--no-media .calc3-affiliate-feature__media {
  display: none;
}
.calc3-affiliate-feature--no-media .calc3-affiliate-feature__body {
  padding: var(--calc3-spacing-xl) var(--calc3-spacing-lg);
}


/* ═══════════════════════════════════════════════════
   MEDIA PLACEHOLDERS (testuali, no immagini esterne)
   ═══════════════════════════════════════════════════ */

.media-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-shade);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 700;
  text-align: center;
  padding: var(--calc3-spacing-md);
}
.media-placeholder__big {
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.media-placeholder__sub {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  font-weight: 400;
  margin-top: var(--calc3-spacing-xs);
}