/* === ATLAS TEXT + VIDEO ROW ===
   Used by sections/landing-text-video-row.liquid.
   Forensic clone of sunday.ai "Lightening the load" two-col section.
   See section comment for measured values. */

/* Section wrapper. White bg matches the rest of the landing.
   Top padding 0 so this card sits 8px below the fullbleed-video
   above (whose own padding-bottom is 8px). Bottom padding keeps
   the large "section break" spacing for what comes after. */
.ac-text-video-row-section{width:100%;background:var(--ac-bg,#fff);padding:0 16px 96px}
@media (min-width:768px){.ac-text-video-row-section{padding:0 24px 160px}}

/* 2-column row. 1 col stacked mobile, 2 cols ≥768. Gap 8px (sunday gap-2).
   NO max-width: Sunday's service-card has no max-width cap, so the
   row scales to (viewport - 48) at every breakpoint. Previously
   capping at 1392px caused a visible width mismatch on monitors
   wider than 1440 (the wide video above stayed full viewport-48
   while this row capped — see CTA_PILL_REPORT.md "Wide-viewport
   alignment" issue). */
.ac-text-video-row{display:grid;grid-template-columns:1fr;gap:8px;width:100%;margin:0 auto}
@media (min-width:768px){.ac-text-video-row{grid-template-columns:1fr 1fr}}

/* === TEXT CARD (left) ===
   Card with subtle border, padding, flex-col + justify-between so
   the label sits at the top and the body paragraph at the bottom.

   Equal-height enforcement: text card uses the SAME aspect-ratio
   16/9 as the media card at every breakpoint. Sunday's spec
   (aspect-ratio:auto + min-height:192px + grid stretch) worked in
   my Playwright tests but the user reported visible mismatch in
   their browser, so we set an explicit 16/9 here to make the equal
   height intrinsic and not dependent on `align-items: stretch`. */
.ac-text-video-row__text{display:flex;flex-direction:column;justify-content:space-between;border:1px solid rgba(26,26,26,0.1);border-radius:12px;padding:12px;background:var(--ac-bg,#fff);aspect-ratio:16/9}

/* Small label "Lightening the load" — Geist Mono.
   Mobile 12px / lh 1.2 / ls +0.025em. Desktop 14px / lh 1.2 / ls +0.025em.
   flex-1 pushes the body paragraph to the bottom on tall containers. */
.ac-text-video-row__label{flex:1 1 auto;margin:0;padding:0 0 48px;font-family:"Geist Mono",ui-monospace,"JetBrains Mono",monospace;font-size:12px;font-weight:400;line-height:1.2;letter-spacing:0.025em;color:var(--ac-ink,#1A1A1A)}
@media (min-width:768px){.ac-text-video-row__label{padding-bottom:0;font-size:14px}}

/* Body paragraph — Geist.
   Mobile 16px / lh 1.4 / ls normal. Desktop 20px / lh 1.4 / ls normal. */
.ac-text-video-row__body{margin:0;padding:0 16px 0 0;font-family:"Geist","Inter","Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;font-weight:400;line-height:1.4;letter-spacing:0;color:var(--ac-ink,#1A1A1A);white-space:pre-line}
@media (min-width:768px){.ac-text-video-row__body{font-size:20px}}

/* === VIDEO CARD (right) ===
   16/9, 12px radius, black bg, overflow hidden. GPU compositing
   trick (translateZ + isolation + -webkit-mask) avoids Safari's
   rounded-corner-with-video bug (same fix as .ac-feature-card). */
.ac-text-video-row__media{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;isolation:isolate;transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(white,black)}

/* Subtle ~3% black tint over video for badge/caption legibility. */
.ac-text-video-row__media::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,0.03);pointer-events:none}

.ac-text-video-row__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Overlay container: flex-col, padded 12px, split between top
   row (badges) and bottom row (caption). pointer-events:none so
   it doesn't block underlying interactions. */
.ac-text-video-row__overlay{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;justify-content:space-between;padding:12px;pointer-events:none;color:#fff}

/* Top-left badges row. */
.ac-text-video-row__badges{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.ac-text-video-row__badge{display:inline-block;padding:3px 5px;border:1px solid rgba(255,255,255,0.2);border-radius:4px;background:transparent;font-family:"Geist Mono",ui-monospace,"JetBrains Mono",monospace;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0.025em;color:#fff;white-space:nowrap}

/* Bottom-left caption with play icon. */
.ac-text-video-row__caption{display:flex;align-items:center;gap:8px;font-family:"Geist Mono",ui-monospace,"JetBrains Mono",monospace;font-size:14px;font-weight:400;line-height:1.2;letter-spacing:0.025em;color:#fff}
.ac-text-video-row__caption-icon{flex:none;width:14px;height:14px;fill:currentColor;display:block}