/* ============================================================================
   AXADLE DIRECT — FRONTEND-ONLY EXTENSIONS
   Loaded AFTER design-system.css.

   NOTE: The cinematic frontend currently keeps most of its CSS inline inside
   app/Views/frontend/layouts/main.php and per-page views (hero, rows, cards).
   That inline CSS already consumes the --ax-* tokens, which design-system.css
   now owns. This file is the migration target: as inline blocks are extracted,
   move them here so the frontend, like the admin, links one stylesheet.

   Until then, this holds frontend-only utilities not present in the admin.
   ========================================================================== */

/* ── Section rhythm ─────────────────────────────────────────────────────── */
.ds-fe-section { padding: 36px 0 0; }
.ds-fe-gutter  { padding-left: var(--ax-gutter, clamp(16px,3vw,48px)); padding-right: var(--ax-gutter, clamp(16px,3vw,48px)); }

/* ── Section title with accent tick (matches home rows) ─────────────────── */
.ds-fe-title { display: flex; align-items: center; gap: 10px; font-family: var(--ds-font-head); font-size: clamp(18px,2.4vw,24px); font-weight: 800; letter-spacing: -.02em; }
.ds-fe-title .ds-tick { width: 4px; height: 22px; border-radius: 3px; background: var(--ds-gradient); }

/* ── Red CTA (shared with hero "Watch Now") ─────────────────────────────── */
.ds-cta { display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border-radius: 10px; background: var(--ds-gradient); color: #fff; font-weight: 800; font-size: 14px; text-decoration: none; box-shadow: var(--ds-shadow-sm); transition: transform .2s var(--ds-ease), box-shadow .25s; }
.ds-cta:hover { transform: translateY(-2px); box-shadow: var(--ds-glow); color: #fff; }

/* ── Soft glow image frame (poster hover) ───────────────────────────────── */
.ds-poster { border-radius: var(--ds-radius); overflow: hidden; transition: transform .35s var(--ds-ease), box-shadow .35s; }
.ds-poster:hover { transform: translateY(-4px); box-shadow: var(--ds-shadow-lg); }