/* ── 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; }
}