/* deck-layouts.css — shared, app-served layout kit for the static decks.
 *
 *   <link rel="stylesheet" href="https://decks.tristargroup.us/deck-layouts.css" />
 *
 * Two things:
 *   1. .dl-* utilities — richer multi-element slide layouts beyond a single content block.
 *      Opt-in: apply inside a .slide. Additive — existing slides are untouched.
 *   2. Mobile vertical-scroll — on phones (<=640px) the horizontal carousel becomes a vertical feed.
 *
 * Uses the decks' own CSS variables (--color-ink, --color-surface, --color-line, --radius-md) with
 * safe fallbacks, so it inherits each deck's theme.
 */

/* ── 1. Layout utilities ───────────────────────────────────────────────────────── */
.dl-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.dl-split--wide-left { grid-template-columns: 1.6fr 1fr; }
.dl-split--wide-right { grid-template-columns: 1fr 1.6fr; }

.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }

.dl-stat { display: flex; flex-direction: column; gap: 4px; }
.dl-stat__num { font-size: clamp(28px, 5vw, 40px); font-weight: 600; line-height: 1; color: var(--color-ink, #0c0b2f); }
.dl-stat__label { font-size: 13px; color: var(--color-ink-muted, #5b5a73); }

.dl-card { background: var(--color-surface, #fff); border: 1px solid var(--color-line, rgba(12, 11, 47, 0.1)); border-radius: var(--radius-md, 12px); padding: 16px 18px; }

.dl-media { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.dl-media img, .dl-media video { width: 100%; height: auto; border-radius: var(--radius-md, 12px); display: block; }

.dl-quote { font-size: clamp(20px, 3.4vw, 30px); line-height: 1.32; font-weight: 500; color: var(--color-ink, #0c0b2f); border-left: 3px solid currentColor; padding-left: 18px; }
.dl-quote cite { display: block; margin-top: 12px; font-size: 14px; font-weight: 400; font-style: normal; color: var(--color-ink-muted, #5b5a73); }

.dl-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dl-compare > * { background: var(--color-surface, #fff); border: 1px solid var(--color-line, rgba(12, 11, 47, 0.1)); border-radius: var(--radius-md, 12px); padding: 16px; }

.dl-overlay { position: relative; }
.dl-overlay__caption { position: absolute; inset: auto 0 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); color: #fff; padding: 16px; border-radius: 0 0 var(--radius-md, 12px) var(--radius-md, 12px); }

/* ── Marketing-grade section blocks (paired with the editor's composite block types) ─────────
   Built on the utilities above + the deck's own theme variables, so they inherit each deck's look. */

/* Stat band — bigger, centered numbers. Builds on .dl-grid + .dl-stat. */
.dl-stats { gap: 24px; text-align: center; }
.dl-stats .dl-stat { align-items: center; }

/* Feature grid — titled cards. Builds on .dl-grid + .dl-card. */
.dl-features { gap: 16px; }
.dl-feature__title { margin: 0 0 4px; font-weight: 600; color: var(--color-ink, #0c0b2f); }
.dl-feature__body { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-ink-muted, #5b5a73); }

/* Logo / client cloud — a wrapped row of named chips (swap <li> text for <img> when you have marks). */
.dl-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; padding: 0; list-style: none; }
.dl-logos > li { padding: 6px 12px; font-size: 14px; font-weight: 500; color: var(--color-ink-muted, #5b5a73); background: var(--color-surface, #fff); border: 1px solid var(--color-line, rgba(12, 11, 47, 0.1)); border-radius: var(--radius-md, 12px); }

/* CTA band — centered heading + the deck's own .slide__cta button. */
.dl-cta { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 28px 24px; text-align: center; background: var(--color-surface, #fff); border: 1px solid var(--color-line, rgba(12, 11, 47, 0.1)); border-radius: var(--radius-md, 12px); }
.dl-cta__heading { margin: 0; max-width: 32ch; font-size: clamp(20px, 3.2vw, 28px); font-weight: 600; line-height: 1.25; color: var(--color-ink, #0c0b2f); }

/* FAQ — question/answer pairs separated by hairlines. */
.dl-faq { margin: 0; }
.dl-faq__item { padding: 14px 0; border-top: 1px solid var(--color-line, rgba(12, 11, 47, 0.1)); }
.dl-faq__item:first-child { border-top: 0; }
.dl-faq dt { margin: 0 0 4px; font-weight: 600; color: var(--color-ink, #0c0b2f); }
.dl-faq dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-ink-muted, #5b5a73); }

/* Stack the two-up layouts on narrow screens */
@media (max-width: 640px) {
  .dl-split, .dl-split--wide-left, .dl-split--wide-right, .dl-media, .dl-compare { grid-template-columns: 1fr; }
}

/* ── 2. Mobile vertical-scroll ─────────────────────────────────────────────────────
   On phones, flip the horizontal scroll-snap carousel into a vertical feed. Loaded after the deck's
   inline styles, so these win at <=640px. track.js analytics key off slide visibility either axis. */
@media (max-width: 640px) {
  .carousel__track {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y proximity;
    align-items: stretch;
  }
  .carousel__track > .slide {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    max-height: none;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
}