/* === ATLAS DESIGNED FOR REAL USE ===
   Used by sections/landing-designed-real-use.liquid.
   Forensic clone of sunday.ai #design section. Source measurements:
   /tmp/sunday-designed-for-real-use/measurements.json

   Structure recap:
     .ac-dru-outer  → white bg (sits on the page body bg, which
                      returns to white after the imitation section)
     .ac-dru-inner  → cream #F3F3F0 "card", slight gutter desktop
     .ac-dru-heading
     .ac-dru-runway → tall scroll runway (1062px + 100vh)
     .ac-dru-sticky → sticky pin holding the gallery while page
                      scrolls through the runway
     .ac-dru-gallery
       .ac-dru-card (× N)
     .ac-dru-tabbar → fixed bottom pill; sibling of inner so the
                      inner's scale transform doesn't trap it.
*/

/* === OUTER SECTION ===
   White body bg (the page returns to white after imitation).
   No padding — the inner "card" handles spacing. */
.ac-dru-outer{
  position:relative;
  width:100%;
  background:#ffffff;
}

/* === INNER CARD ===
   Cream surface like sunday's bg-surface. On desktop a small
   horizontal gutter (≈14px each side) lets the outer white peek
   around the card — that's how sunday renders the "floating
   card" feel. On mobile no gutter, card fills viewport width.

   Scroll-driven pop-in: when the inner enters viewport, JS adds
   .is-in-view which removes the initial scale(0.97) + radius 24px.
   Gated to ≥1024px so mobile is static (sunday gates it the same
   way with `md:` utilities). */
.ac-dru-inner{
  background:#F3F3F0;
  padding:48px 0 96px;
  position:relative;
}

@media (min-width:1024px){
  .ac-dru-inner{
    padding:24px 0 96px;
    margin:0 14px;
    border-radius:24px;
    transform:scale(0.97);
    transform-origin:center 60%;
    transition:transform 600ms cubic-bezier(0.16,1,0.3,1),
               border-radius 600ms cubic-bezier(0.16,1,0.3,1);
    /* NO overflow:hidden here. `overflow:hidden` would make
       .ac-dru-inner a scroll-container, which means its
       descendant `position:sticky` element pins relative to THIS
       (non-scrolling) container instead of the viewport — the
       sticky never engages and the gallery scrolls up with the
       page even while JS pans it horizontally.
       Inner content (gallery) is clipped by .ac-dru-sticky's own
       overflow:hidden, so we don't need it here for that purpose.
       Subpixel rendering at the rounded corners during the scale
       pop-in is fine without it. */
  }
  .ac-dru-inner.is-in-view{
    transform:scale(1);
    border-radius:0;
  }
}

/* === HEADLINE ===
   Sunday spec:
     desktop : 142px / lh 142px (1.0) / ls -2.5%
     mobile  :  42px / lh 46.2px (1.1) / ls -2.5%
   Weight 400, color #1A1A1A, centered. Sunday's H2 carries the
   gap to the gallery via its own padding-bottom (144px desktop)
   rather than a margin on the gallery. */
.ac-dru-heading{
  margin:0 auto;
  padding:0 16px 144px;
  text-align:center;
  text-wrap:balance;
  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:#1A1A1A;
}

@media (min-width:1024px){
  .ac-dru-heading{
    padding:0 24px 144px;
    font-size:142px;
    line-height:1;
    letter-spacing:-0.025em;
  }
}

/* === SCROLL RUNWAY + STICKY PIN ===
   On DESKTOP: JS sets runway.style.height inline to
   `viewport_h + gallery_overflow_px`. This gives the sticky child
   exactly enough scroll runway to translate the gallery from x=0
   to x=-overflow during the pin window.

   On MOBILE: runway has no height (collapses to gallery height),
   so sticky doesn't pin and the gallery just behaves like a
   regular horizontal scroll-snap row. No vertical "dead scroll"
   like sunday on mobile. */
.ac-dru-runway{
  position:relative;
}

.ac-dru-sticky{
  position:sticky;
  top:96px;
  overflow:hidden;
}

@media (min-width:1024px){
  .ac-dru-sticky{
    top:108px;
  }
}

/* === GALLERY ===
   Mobile (<1024px): native CSS horizontal scroll-snap.
                     overflow-x:auto + snap-mandatory.
                     Section behaves like a normal block.
   Desktop (≥1024px): width:max-content (gallery wider than
                     viewport). overflow:visible. No scroll-snap.
                     JS translates the gallery horizontally as the
                     user scrolls VERTICALLY through the runway —
                     the sticky parent's overflow:hidden clips
                     cards that are off-screen. The runway is set
                     tall enough by JS that the pin duration equals
                     the overflow distance, so translateX moves
                     from 0 to -overflow in lockstep with scroll. */
.ac-dru-gallery{
  display:flex;
  align-items:center;
  gap:8px;
  height:calc(100svh - 192px);
  max-height:540px;
  padding:0 16px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-left:16px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* will-change so the browser promotes the gallery to a
     compositor layer ready for the JS-driven translateX. */
  will-change:transform;
}
.ac-dru-gallery::-webkit-scrollbar{display:none}

@media (min-width:1024px){
  .ac-dru-gallery{
    width:max-content;
    padding:0 24px;
    overflow:visible;
    scroll-snap-type:none;
    scroll-padding-left:0;
  }
}

/* === CARDS ===
   Base: grid 2 rows × 1 col (text top, image bottom-fill).
   Tone variants set bg + foreground colors. Aspect variants set
   the visible card aspect ratio (always portrait on mobile).
   border-radius 12px (rounded-xl), padding 12px (p-3). */
.ac-dru-card{
  position:relative;
  flex:none;
  scroll-snap-align:start;
  display:grid;
  grid-template-rows:auto 1fr;
  gap:24px;
  height:100%;
  max-width:calc(100vw - 32px);
  padding:12px;
  border-radius:12px;
  overflow:hidden;
  /* GPU compositing fix — same pattern as other Atlas cards.
     Prevents Safari's rounded-corner + <img> paint bug. */
  isolation:isolate;
  transform:translateZ(0);
  -webkit-mask-image:-webkit-radial-gradient(white, black);
}

/* Subtle top vignette (sunday's `before:bg-linear-to-b
   before:from-black/30 before:to-black/0`). Helps title legibility
   on dark cards where text overlays an image. */
.ac-dru-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(to bottom, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 50%);
  pointer-events:none;
}

/* Mobile: all cards become portrait 2/3. */
.ac-dru-card--aspect-portrait,
.ac-dru-card--aspect-landscape{
  aspect-ratio:2/3;
}

@media (min-width:1024px){
  /* No max-width cap on desktop — cards take their natural width
     from aspect-ratio + height (540px). They line up in a row
     wider than the viewport so JS can pan horizontally. */
  .ac-dru-card{
    max-width:none;
  }
  .ac-dru-card--aspect-portrait{
    aspect-ratio:3/4;
  }
  .ac-dru-card--aspect-landscape{
    aspect-ratio:3/2;
    /* Landscape cards swap to image-on-the-right layout */
    grid-template-rows:1fr;
    grid-template-columns:1fr 1fr;
    gap:24px;
    align-items:end;
  }
}

/* Tone variants */
.ac-dru-card--tone-dark{
  background-color:#000;
  color:#ffffff;
}
.ac-dru-card--tone-beige{
  background-color:#EADCCE;
  color:#1A1A1A;
}
.ac-dru-card--tone-sage{
  background-color:#AEC2B8;
  color:#1A1A1A;
}

/* === CARD TEXT ===
   Sunday spec: h3+p both 18px / lh 25.2 (1.4) / weight 400.
   Title uses card foreground color, body uses card foreground at
   ~63% opacity (sunday's text-secondary token). */
.ac-dru-card__text{
  position:relative;
  z-index:10;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.ac-dru-card__title{
  margin:0;
  font-family:"Geist","Inter","Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:18px;
  font-weight:400;
  line-height:1.4;
  letter-spacing:0;
  color:inherit;
}

.ac-dru-card__body{
  margin:0;
  font-family:"Geist","Inter","Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:18px;
  font-weight:400;
  line-height:1.4;
  letter-spacing:0;
  color:inherit;
  opacity:0.63;
  white-space:pre-line;
}

/* === CARD IMAGE ===
   Portrait dark cards: image fills the WHOLE card (absolute),
   text floats over it.
   Landscape (or any non-dark) cards: image sits in its grid cell,
   text sits in the other cell. */
.ac-dru-card__image,
.ac-dru-card__image-placeholder{
  display:block;
  width:100%;
  height:100%;
  border-radius:8px;
  overflow:hidden;
  object-fit:cover;
  user-select:none;
  -webkit-user-drag:none;
}

.ac-dru-card--aspect-portrait .ac-dru-card__image,
.ac-dru-card--aspect-portrait .ac-dru-card__image-placeholder{
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
}

/* Image placeholder styling — a neutral grey box that flags the
   slot for the user to drop a real image via the theme editor.
   Aspect ratio inherits from card so swapping in the real image
   later doesn't change layout. */
.ac-dru-card__image-placeholder{
  background:#f0f0f0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#9aa0a6;
}

.ac-dru-card__image-placeholder-text{
  font-family:"Geist Mono",ui-monospace,"JetBrains Mono",monospace;
  font-size:12px;
  letter-spacing:0.025em;
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion:reduce){
  .ac-dru-inner{transition:none}
  .ac-dru-gallery{scroll-behavior:auto}
}