/* ============================================================================
   Core theme — Call to action.

   Five compositions off data-layout — band, split, statement, card, minimal —
   sharing one namespace and one token set. Colour roles resolve through
   core-dna.css's .storly-cta {} block, so the section follows Global Design /
   the niche palette with no niche selectors here.
   ============================================================================ */

.storly-cta {
  --cta-bg: var(--core-primary, var(--brand));
  --cta-ink: var(--core-on-primary);
  --cta-btn-bg: #fff;
  --cta-btn-ink: #14161a;
  --cta-heading: clamp(1.7rem, 3.2vw, 2.7rem);
  --cta-copy-max: 620px;
  --cta-radius: var(--r-xl, 16px);
  --cta-pad-y: var(--core-rhythm, 64px);

  padding-block: var(--cta-pad-y);
  background: var(--cta-bg);
  color: var(--cta-ink);
}

.storly-cta *,
.storly-cta *::before,
.storly-cta *::after { box-sizing: border-box; }

/* ── Surfaces ─────────────────────────────────────────────────────────────── */
.storly-cta[data-surface="ink"]  { --cta-bg: var(--core-text); --cta-ink: #fff; }
.storly-cta[data-surface="wash"] {
  --cta-bg: color-mix(in srgb, var(--brand) 8%, var(--bg));
  --cta-ink: var(--core-text);
  --cta-btn-bg: var(--core-button-bg, var(--brand));
  --cta-btn-ink: var(--core-button-text);
}
.storly-cta[data-surface="surface"] {
  --cta-bg: transparent;
  --cta-ink: var(--core-text);
  --cta-btn-bg: var(--core-button-bg, var(--brand));
  --cta-btn-ink: var(--core-button-text);
}
.storly-cta[data-surface="page"] {
  --cta-bg: var(--bg);
  --cta-ink: var(--core-text);
  --cta-btn-bg: var(--core-button-bg, var(--brand));
  --cta-btn-ink: var(--core-button-text);
}

/* ── Inner track ──────────────────────────────────────────────────────────── */
.storly-cta__inner {
  width: 100%;
  max-width: var(--core-track-default, 1360px);
  margin-inline: auto;
  padding-inline: var(--gutter, clamp(18px, 3.5vw, 44px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vw, 30px);
  text-align: center;
}
.storly-cta[data-container="narrow"] .storly-cta__inner { max-width: var(--core-track-narrow, 1040px); }
.storly-cta[data-container="wide"]   .storly-cta__inner { max-width: var(--core-track-wide, 1520px); }
.storly-cta[data-container="full"]   .storly-cta__inner { max-width: var(--core-track-default, 1360px); }

.storly-cta[data-align="start"] .storly-cta__inner { align-items: flex-start; text-align: start; }

.storly-cta__copy { display: flex; flex-direction: column; gap: 14px; max-width: var(--cta-copy-max); }
.storly-cta[data-align="start"] .storly-cta__copy { max-width: min(var(--cta-copy-max), 60ch); }

.storly-cta__eyebrow {
  margin: 0;
  color: color-mix(in srgb, currentColor 78%, transparent);
  font-size: var(--core-eyebrow-size, 11.5px);
  font-weight: 600;
  letter-spacing: var(--core-eyebrow-tracking, .14em);
  text-transform: uppercase;
}
.storly-cta__title {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: var(--cta-heading);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.015em;
  text-wrap: balance;
  color: inherit;
}
.storly-cta__subtitle {
  margin: 0;
  color: color-mix(in srgb, currentColor 84%, transparent);
  font-size: clamp(14.5px, 1.6vw, 17px);
  line-height: 1.65;
  max-width: 58ch;
}
.storly-cta[data-align="center"] .storly-cta__subtitle { margin-inline: auto; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.storly-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 14px;
}
.storly-cta[data-align="start"] .storly-cta__actions { justify-content: flex-start; }

.storly-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding-inline: 28px;
  border: 1px solid transparent;
  border-radius: var(--core-button-radius, var(--r-sm, 6px));
  background: var(--cta-btn-bg);
  color: var(--cta-btn-ink);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--dur-fast, .16s) var(--ease), opacity var(--dur-fast, .16s) var(--ease), background-color var(--dur-fast, .16s) var(--ease);
}
.storly-cta__btn:hover { transform: translateY(-2px); opacity: .95; }
.storly-cta__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.storly-cta__btn[data-style="outline"] {
  background: transparent;
  border-color: color-mix(in srgb, currentColor 55%, transparent);
  color: inherit;
}
.storly-cta__btn[data-style="white"] { background: #fff; color: #14161a; }
.storly-cta__btn[data-style="link"] {
  min-height: 0;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: inherit;
  text-transform: none;
  letter-spacing: .01em;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.storly-cta__btn[data-style="link"]:hover { transform: none; }

/* ── Layout: band (default) — stacked, centred ────────────────────────────── */
/* base rules already cover it */

/* ── Layout: split — copy left, button right ──────────────────────────────── */
@media (min-width: 1025px) {
  .storly-cta[data-layout="split"] .storly-cta__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(28px, 5vw, 72px);
    text-align: start;
  }
  .storly-cta[data-layout="split"] .storly-cta__copy { max-width: 46ch; }
  .storly-cta[data-layout="split"] .storly-cta__actions { flex: none; }
}

/* ── Layout: statement — tall, big headline ───────────────────────────────── */
.storly-cta[data-layout="statement"] {
  --cta-pad-y: clamp(64px, 10vw, 132px);
  --cta-heading: clamp(2.1rem, 4.6vw, 3.8rem);
}
.storly-cta[data-layout="statement"] .storly-cta__copy { max-width: min(var(--cta-copy-max), 20ch); }
.storly-cta[data-layout="statement"] .storly-cta__subtitle { max-width: 46ch; }

/* ── Layout: card — a contained promo card inside the page ────────────────── */
.storly-cta[data-layout="card"] {
  background: transparent;
  padding-block: var(--cta-pad-y);
}
.storly-cta[data-layout="card"] .storly-cta__inner {
  background: var(--cta-bg, var(--surface));
  color: var(--cta-ink);
  border: 1px solid var(--border-l, rgba(0, 0, 0, .06));
  border-radius: var(--cta-radius);
  padding: clamp(36px, 6vw, 72px) clamp(24px, 5vw, 64px);
  box-shadow: var(--shadow-md, 0 14px 38px -14px rgba(17, 19, 23, .14));
}
.storly-cta[data-layout="card"][data-surface="surface"] .storly-cta__inner { background: var(--surface); }
.storly-cta[data-layout="card"][data-surface="wash"] .storly-cta__inner {
  background: color-mix(in srgb, var(--brand) 8%, var(--bg));
  border-color: color-mix(in srgb, var(--brand) 16%, transparent);
}

/* ── Layout: minimal — the button alone ──────────────────────────────────── */
.storly-cta[data-layout="minimal"] { --cta-pad-y: clamp(28px, 4vw, 48px); }
.storly-cta[data-layout="minimal"] .storly-cta__inner { gap: 0; }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .storly-cta__actions { width: 100%; }
  .storly-cta[data-align="center"] .storly-cta__actions { flex-direction: column; align-items: stretch; }
  .storly-cta[data-align="center"] .storly-cta__btn { width: 100%; }
  .storly-cta[data-layout="minimal"] .storly-cta__actions,
  .storly-cta[data-align="start"] .storly-cta__actions { flex-direction: row; width: auto; }
  .storly-cta[data-align="start"] .storly-cta__btn { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .storly-cta__btn { transition: none; }
  .storly-cta__btn:hover { transform: none; }
}