/* ── ita_stripe_cards ───────────────────────────────────────────────
   Deliberately spare — no icon chip, no border box, just a colored
   top line and generous whitespace, so it reads as visually distinct
   from ita_icon_cards' bordered icon-chip cards used everywhere else.
   Tokens only. */

.block-ita_stripe_cards .cec-head { position: relative; }
.block-ita_stripe_cards .cec-all { position: absolute; top: 4px; right: 0; }

.block-ita_stripe_cards .sc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 26px;
}

/* .sc-card-wrap is the actual grid item — a plain structural wrapper
   around the card link. Needed so the editor's URL-edit pill (inserted
   as a sibling right after the [data-field-href] element — see
   editor.js wireHrefFields) lands INSIDE this wrapper instead of
   becoming its own extra item in .sc-grid; a bare CSS Grid stretches
   every direct child to fill a cell, which turned that small pill into
   a full oversized grid cell of its own. Color-cycling now keys off
   the wrapper's position (always the wrapper's sole card, so cycling
   on .sc-card itself would always land on the same index/color). */
.block-ita_stripe_cards .sc-card-wrap { position: relative; }
.block-ita_stripe_cards .sc-card-wrap:nth-child(3n+1) .sc-card { border-top-color: var(--color-accent-2); }
.block-ita_stripe_cards .sc-card-wrap:nth-child(3n+2) .sc-card { border-top-color: var(--color-accent); }
.block-ita_stripe_cards .sc-card-wrap:nth-child(3n+3) .sc-card { border-top-color: var(--color-accent-3); }
/* Editor-only: pin the URL pill to a tiny badge in the card's top-right
   corner instead of it flowing full-size beneath the card text. */
body.cms-edit .block-ita_stripe_cards .sc-card-wrap .cms-href-btn {
  position: absolute; top: 4px; right: 4px; margin-left: 0; z-index: 3;
}

.block-ita_stripe_cards .sc-card {
  display: block;
  padding: 22px 4px 0;
  border-top: 4px solid transparent;
  color: var(--color-fg);
  transition: transform .2s ease, border-top-width .2s ease, padding-top .2s ease;
}
a.sc-card:hover { transform: translateY(-4px); border-top-width: 7px; padding-top: 19px; }

.block-ita_stripe_cards .sc-headline {
  font-family: var(--font-display); font-size: 19px; font-weight: 700; margin-bottom: 10px;
}
.block-ita_stripe_cards .sc-meta { font-size: 14.5px; color: var(--color-fg-muted); margin: 0; line-height: 1.55; }

.block-ita_stripe_cards .cec-outro { margin-top: 30px; max-width: 680px; }

@media (max-width: 900px) {
  .block-ita_stripe_cards .sc-grid { grid-template-columns: 1fr; }
}

/* ── Adaptation for Via Crispi ───────────────────────────────────────
   ITA's private tokens and class vocabulary, carried locally. None of
   .shape / .sq / .ci / .h2 / .kicker / .lead / .link-cta /
   .section-head / .cta-row / .dot / .chip-grid / .cap-quote /
   .btn-dark / .sm-col is a shared primitive — they live in ITA's own
   stylesheet — so each block that uses them carries its own copy. */
.block-ita_stripe_cards {
  --color-accent-2: var(--color-accent);
  --color-accent-3: var(--color-accent-soft);
  --radius: 0;                      /* design system §8: square corners */
}
.block-ita_stripe_cards .shape {
  display: inline-block; width: 7px; height: 7px;
  background: var(--color-accent); margin-right: 10px;
  vertical-align: middle; flex: 0 0 auto;
}
.block-ita_stripe_cards .shape.ci { border-radius: 50%; }
.block-ita_stripe_cards .shape.tri {
  width: 0; height: 0; background: none;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 7px solid var(--color-accent);
}
.block-ita_stripe_cards .kicker, .block-ita_stripe_cards .section-head .kicker {
  display: flex; align-items: center;
  font-family: var(--font-eyebrow);
  font-size: 12px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--color-muted);
  margin-bottom: 20px;
}
.block-ita_stripe_cards .h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 46px); font-weight: 600;
  line-height: 1.08; letter-spacing: -.015em;
  color: var(--color-fg); margin-bottom: 20px; text-wrap: balance;
}
.block-ita_stripe_cards .lead {
  font-size: 17px; line-height: 1.65;
  color: var(--color-fg-muted); max-width: 68ch;
}
.block-ita_stripe_cards .section-head { margin-bottom: clamp(32px, 4vw, 56px); }
.block-ita_stripe_cards .cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.block-ita_stripe_cards .btn-dark {
  background: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg);
}
.block-ita_stripe_cards .btn-dark:hover {
  background: var(--color-accent-soft); border-color: var(--color-accent-soft); color: var(--color-bg);
}
.block-ita_stripe_cards .link-cta {
  font-family: var(--font-eyebrow);
  font-size: 13px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  color: var(--color-accent-soft);
  border-bottom: 1px solid var(--color-border); padding-bottom: 4px;
  transition: border-color .3s cubic-bezier(.2,.6,.2,1);
}
.block-ita_stripe_cards .link-cta:hover { border-bottom-color: var(--color-accent-soft); }