/* === ATLAS TEXT + TWO VIDEOS ROW ===
   Used by sections/landing-text-two-videos.liquid.
   Forensic clone of sunday.ai "Every home is different…" 3-block
   row (text card + 2 click-to-play video cards).
   See section comment for measured values. */

/* Section wrapper. White bg matches the landing.
   Top padding 0 so this card abuts the previous section with
   only the 8px coming from the section above (matches sunday's
   gap-2 tight spacing between cards in the same service-card).
   Bottom keeps the larger pb-40-style break for the spacer. */
.ac-text-two-videos-section{width:100%;background:var(--ac-bg,#fff);padding:0 16px 96px}
@media (min-width:768px){.ac-text-two-videos-section{padding:0 24px 160px}}

/* Parent row — sunday's `grid grid-cols-6 gap-2`.
   <lg: text and videos both col-span-6 (full) → stack.
   ≥lg: text col-span-2 (1/3), videos col-span-4 (2/3).
   NO max-width: Sunday's service-card has no cap. On wide monitors
   (>1440) capping here at 1392 made this row narrower than the
   sibling fullbleed/wide-video sections (which span viewport-48),
   producing visible misalignment. */
.ac-text-two-videos{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;width:100%;margin:0 auto}
.ac-text-two-videos__text{grid-column:span 6}
.ac-text-two-videos__videos{grid-column:span 6}
@media (min-width:1024px){
  .ac-text-two-videos__text{grid-column:span 2}
  .ac-text-two-videos__videos{grid-column:span 4}
}

/* === TEXT CARD ===
   Card with subtle border + 12px radius + 12px padding.
   flex-col + justify-between puts label at top, body at bottom. */
.ac-text-two-videos__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}
@media (min-width:1024px){.ac-text-two-videos__text{aspect-ratio:auto;min-height:192px}}

/* Label — Geist Mono.
   Mobile 12px / lh 1.2 / ls +0.025em. Desktop 14px / same ratios. */
.ac-text-two-videos__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:1024px){.ac-text-two-videos__label{padding-bottom:0;font-size:14px}}

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

/* === VIDEOS WRAPPER ===
   <md (768): horizontal carousel — flex + overflow-x-auto with
     snap-mandatory. Each video w=calc(100%-16px) so users swipe
     one at a time. Hide scrollbar.
   ≥md: 4-col grid where each video takes col-span-2 → 2 videos
     side by side. */
.ac-text-two-videos__videos{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ac-text-two-videos__videos::-webkit-scrollbar{display:none}
@media (min-width:768px){
  .ac-text-two-videos__videos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;overflow:visible;scroll-snap-type:none}
}

/* === EACH VIDEO CARD === */
.ac-text-two-videos__video{position:relative;flex:0 0 calc(100% - 16px);scroll-snap-align:start;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;cursor:pointer;isolation:isolate;transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(white,black)}
@media (min-width:768px){
  .ac-text-two-videos__video{flex:none;grid-column:span 2}
}

/* Subtle 3% dark tint (matches sunday's bg-black/3). */
.ac-text-two-videos__video::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,0.03);pointer-events:none}

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

/* Overlay: badges top, caption bottom. */
.ac-text-two-videos__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. */
.ac-text-two-videos__badges{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.ac-text-two-videos__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-two-videos__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-two-videos__caption-icon{flex:none;width:14px;height:14px;fill:currentColor;display:block;transition:opacity 200ms ease}

/* Hide play icon when video is playing (state added by JS) */
.ac-text-two-videos__video[data-playing] .ac-text-two-videos__caption-icon{opacity:0}

/* === PAGINATION DOTS (mobile only) ===
   Hidden on tablet+ (≥768) where the carousel turns into a grid.
   Sunday spec: 8×8 round buttons, gap 8px, active = solid ink,
   inactive = ink at ~6% opacity, 300ms bg-color transition. */
.ac-text-two-videos__dots{grid-column:span 6;display:flex;justify-content:center;align-items:center;gap:8px;padding:16px 0 0;width:100%}
@media (min-width:768px){.ac-text-two-videos__dots{display:none}}

.ac-text-two-videos__dot{display:block;width:8px;height:8px;padding:0;border:0;border-radius:999px;background:rgba(26,26,26,0.06);cursor:pointer;transition:background 300ms ease}
.ac-text-two-videos__dot:hover{background:rgba(26,26,26,0.25)}
.ac-text-two-videos__dot:focus-visible{outline:2px solid var(--ac-ink,#1A1A1A);outline-offset:2px}
.ac-text-two-videos__dot.is-active{background:var(--ac-ink,#1A1A1A)}