/* Article blocks (web/content/article-blocks.js). Each block carries its board's
   own inline styles; this file only fits them into the article: the font,
   link colours, the article's image rules switched off, full-width bands on a
   phone, and the two moving pieces. */
.ab { margin: 32px 0; font-family: "SF Pro Rounded", ui-rounded, "Amora Rounded", system-ui, sans-serif; line-height: normal; }
.ab * { box-sizing: border-box; }
.ab-dark { color: #F6F1EA; }
.ab-light { color: #241B22; }
.prose .ab a { text-decoration: none; }
.prose .ab-dark a { color: #FF6B9D; }
.prose .ab-light a { color: #E91E63; }
.prose .ab img, .prose .ab video { margin: 0; box-shadow: none; max-width: none; }
.prose .ab p { margin: 0; }
.prose li .ab { margin: 10px 0 6px; }

/* Bands sit in the reading column as rounded cards, like every other block.
   Their board fades from the page into black over 70px, which reads as a grey
   smear on a phone, so the card takes date night's black with a soft glow. */
.ab-bleed { border-radius: 28px; overflow: hidden; }
.ab-bleed > div { background: radial-gradient(ellipse 90% 45% at 50% 0%, rgba(255,107,157,0.16), rgba(6,4,8,0) 70%), #060408 !important; padding-top: 52px !important; padding-bottom: 56px !important; }
.ab-bleed * { text-wrap: balance; }
.ab-am-band > div { background: radial-gradient(ellipse 70% 60% at 0% 0%, rgba(255,107,157,0.32), rgba(255,255,255,0) 70%), radial-gradient(ellipse 70% 60% at 100% 0%, rgba(255,170,120,0.28), rgba(255,255,255,0) 70%), #FFFFFF !important; }

/* A pick inside a numbered list keeps its idea number, level with the card's top. */
.prose ol > li:has(> .ab) { list-style: none; position: relative; }
.prose ol > li:has(> .ab)::before { content: counter(list-item) "."; position: absolute; right: calc(100% + 0.35rem); top: 12px; color: var(--pink); font-weight: 700; font-variant-numeric: tabular-nums; }
[dir="rtl"] .prose ol > li:has(> .ab)::before { right: auto; left: calc(100% + 0.35rem); }

@media (min-width: 981px) {
  .ab-pick, .ab-dn-pick, .ab-am-pick, .ab-dn-lineup, .ab-dn-countdown, .ab-dn-duo, .ab-dn-moment, .ab-dn-rail, .ab-dn-top10, .ab-dn-ring, .ab-dn-popcorn, .ab-dn-steps, .ab-am-memories, .ab-am-distance, .ab-am-days, .ab-am-steps, .ab-am-compare { max-width: 560px; }
}

/* On a right-to-left page the arrows in links point the way the page reads. */
[dir="rtl"] .ab a svg { transform: scaleX(-1); }

/* The poster row drifts left forever; the list is drawn twice so it never ends. */
@keyframes abRail { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ab .dn-rail { animation: abRail 40s linear infinite; }

/* The poster ring turns in 3D. */
.ab-ring { --ab-ring-r: 150px; position: relative; height: 190px; perspective: 800px; perspective-origin: 50% 34%; }
.ab-ring-spin { position: absolute; left: 50%; top: 40px; width: 72px; height: 108px; margin-left: -36px; transform-style: preserve-3d; animation: abRing 48s linear infinite; }
.ab-ring-spin span { position: absolute; inset: 0; border-radius: 9px; overflow: hidden; background: #1A1F3A; box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 10px 20px rgba(0,0,0,0.55); }
.ab-ring-spin img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes abRing { to { transform: rotateY(-360deg); } }

/* The top 10 swipes sideways without a scroll bar. */
.ab-dn-top10 [style*="overflow-x: auto"]::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ab .dn-rail, .ab-ring-spin { animation: none; }
}