/* Block.json's "style" field is what gets this loaded in the editor canvas
   (unlike render.php's vio_cards_asset_tags(), which only rides the front-
   end render return value - the editor's hand-rolled CardsPreview never
   calls render.php, so it never triggers that). @import keeps ONE real
   source of truth for the CSS (assets/css/vio-cards.css, shared with
   fifty-fifty-flex's copy-side cards), rather than duplicating the rules. */
@import url("../../assets/css/vio-cards.css");

/* Section CTA below the cards follows the intro alignment (ctaPosition = below). */
.vio-section--cta-below.vio-section--intro-center .vio-section__bottom-cta { display: flex; justify-content: center; }
.vio-section--cta-below.vio-section--intro-right .vio-section__bottom-cta { display: flex; justify-content: flex-end; }

/* Custom CTA hover / focus: only changes anything when hover colours are set. */
.vio-section .vio-btn.vio-btn--custom {
  --vio-btn-bg-hover: var(--vio-btn-custom-hover-bg, var(--vio-btn-bg));
  --vio-btn-fg-hover: var(--vio-btn-custom-hover-text, var(--vio-btn-fg));
  --vio-btn-bd-hover: var(--vio-btn-custom-hover-border-color, var(--vio-btn-bd));
}

/* Section padding (same values as logo-row) + finer top / bottom; the later rules win. */
.vio-cards-block.vio-cards-block--pad-none { padding-top: 0; padding-bottom: 0; }
.vio-cards-block.vio-cards-block--pad-sm   { padding-top: 20px; padding-bottom: 20px; }
.vio-cards-block.vio-cards-block--pad-lg   { padding-top: clamp(60px, 8vw, 120px); padding-bottom: clamp(60px, 8vw, 120px); }
.vio-cards-block.vio-cards-block--pt-none { padding-top: 0; }
.vio-cards-block.vio-cards-block--pt-sm   { padding-top: 20px; }
.vio-cards-block.vio-cards-block--pt-lg   { padding-top: clamp(60px, 8vw, 120px); }
.vio-cards-block.vio-cards-block--pb-none { padding-bottom: 0; }
.vio-cards-block.vio-cards-block--pb-sm   { padding-bottom: 20px; }
.vio-cards-block.vio-cards-block--pb-lg   { padding-bottom: clamp(60px, 8vw, 120px); }