/* === ATLAS FULL-BLEED VIDEO ===
   Used by sections/landing-fullbleed-video.liquid.
   Forensic clone of sunday.ai "Memo works in homes it's never seen".
   See section comment for measured values & origin. */

/* Section wrapper. Horizontal padding matches the sibling cards
   below (text-video-row uses 16px mobile / 24px tablet+), so the
   four sections in this group line up visually with the same
   lateral gutter on every viewport.
   Bottom padding is only 8px — sunday's video cards inside the
   service-card sit 8px apart (gap-2). The LAST section in the
   group handles the larger pb-40 break, not this one.
   Background explicitly white so the section doesn't inherit any
   tint from ancestors / shopify-section wrappers (the inner video
   card is #000 anyway — only the padded gutter around it is white). */
.ac-fullbleed-video-section{width:100%;padding:8px 16px;background:var(--ac-bg,#fff)}
@media (min-width:768px){.ac-fullbleed-video-section{padding:8px 24px}}

/* The video card itself.
   - aspect-ratio: 3/4 on mobile (portrait), 16/9 on desktop ≥1024.
   - border-radius: 12px on every viewport so it matches the
     adjacent text/video cards (text-video-row, text-two-videos)
     which are rounded-xl 12px at all sizes. (Sunday's mobile
     section uses radius 0, but Atlas keeps the rounded look
     consistent across the whole landing on mobile.)
   - bg #000 (fallback before video loads).
   - GPU compositing trick (translateZ + isolation + -webkit-mask)
     reused from .ac-feature-card to avoid Safari corner-rendering
     bugs around the rounded radius + video element. */
.ac-fullbleed-video{position:relative;width:100%;aspect-ratio:3/4;background:#000;overflow:hidden;border-radius:12px;isolation:isolate;transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(white,black)}
@media (min-width:1024px){.ac-fullbleed-video{aspect-ratio:16/9}}

/* Subtle ~3% black tint over the video for headline legibility.
   Matches sunday's ::before bg-black/3. */
.ac-fullbleed-video::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,0.03);pointer-events:none}

/* Video element — fills container, cover-fit. */
.ac-fullbleed-video__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Centered headline overlay. Non-interactive (pointer-events:none)
   so the toggle button beneath stays clickable. */
.ac-fullbleed-video__overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:12px;pointer-events:none}
.ac-fullbleed-video__headline{margin:0;font-family:"Geist","Inter","Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:42px;font-weight:400;line-height:1.1;letter-spacing:-0.025em;color:#fff;text-align:center;text-wrap:balance;max-width:24ch}
@media (min-width:1024px){.ac-fullbleed-video__headline{font-size:84px}}

/* Pause/play toggle — bottom-left, white icon on subtle dark glass.
   Sunday's button is 16×16 with no bg; Atlas uses 32×32 for tap
   target accessibility and a slight backdrop blur for visibility
   on bright frames. */
.ac-fullbleed-video__toggle{position:absolute;bottom:12px;left:12px;z-index:20;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:rgba(0,0,0,0.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:0;border-radius:999px;color:#fff;cursor:pointer;transition:background 200ms ease,transform 200ms cubic-bezier(0.25,1,0.5,1)}
.ac-fullbleed-video__toggle:hover{background:rgba(0,0,0,0.5);transform:scale(1.05)}
.ac-fullbleed-video__toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ac-fullbleed-video__icon{width:14px;height:14px;fill:currentColor;display:none}
.ac-fullbleed-video__icon--pause{display:block}
.ac-fullbleed-video[data-paused] .ac-fullbleed-video__icon--pause{display:none}
.ac-fullbleed-video[data-paused] .ac-fullbleed-video__icon--play{display:block}

@media (prefers-reduced-motion:reduce){
  .ac-fullbleed-video__toggle{transition:none}
  .ac-fullbleed-video__toggle:hover{transform:none}
}