/* ============================================================
   HOMEPAGE additions (intro video + doctors carousel)
   Zdorovo Dental — homepage build (ТЗ на оновлення головної).
   Loads AFTER zd-blocks.css. No new design tokens.
   · intro video: landscape 16/11 default, --portrait 9/16 for an Instagram reel.
   · doctors carousel paging visuals; JS pins the row height (see the JS file).
   · .zd-prose > p + p restores paragraph rhythm (theme reset outranks its own rule).
   ============================================================ */

/* ============================================================
   Homepage-only additions — everything else comes from
   zd-blocks.css + service-visual.css + services-index.css.
   ============================================================ */

/* intro pull-quote (ТЗ asks for a quote from the head doctor) */
.zd-quote { margin: 18px 0 0; padding: 16px 20px; border-left: 3px solid var(--zd-accent); background: var(--zd-tint); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 16px; line-height: 1.6; color: var(--ink-800); font-style: italic; }
.zd-quote cite { display: block; margin-top: 8px; font-style: normal; font-weight: 700; font-size: 13px; color: var(--zd-accent-strong); }

/* intro · section CTA. The mockup carried this as an inline margin on
   .zd-hero__actions; give it a real class instead. */
.zd-intro__actions { margin-top: 22px; }

/* ---------- intro media in video mode ----------
   Two shapes, because the source dictates it:
     default        16/11 landscape — a clip filmed for the site
     --portrait      9/16 vertical  — an Instagram reel, which is ALWAYS 9:16
   A reel forced into the landscape box would letterbox with huge black bars,
   so portrait gets its own capped width and sits centred in the column. */
.zd-intro__media--video { display: flex; flex-direction: column; aspect-ratio: auto; background: none; box-shadow: none; overflow: visible; }
/* placeholder box reusing the kit's .zd-ba__ph photo-placeholder pattern —
   in WP this is the <video> element itself, same box and aspect ratio */
.zd-intro__vbox { position: relative; width: 100%; aspect-ratio: 16/11; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
/* the gradient in zd-blocks.css lives on the --before/--after modifiers, so the
   bare .zd-ba__ph has no surface — give the video variant its own */
.zd-ba__ph--video { background: linear-gradient(150deg, var(--ink-100), #e9eef1); color: var(--ink-500); }
.zd-intro__vbox .zd-ba__ph { width: 100%; height: 100%; }
/* note pinned to the bottom edge so the centred play badge never covers it */
.zd-intro__vnote { position: absolute; left: 14px; bottom: 12px; z-index: 2; padding: 4px 9px; border-radius: var(--radius-pill); background: rgba(15,23,42,.62); color: #fff; opacity: 1; }
.zd-intro__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--zd-accent-strong); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); padding-left: 4px; }
.zd-intro__media--portrait { align-items: center; }
.zd-intro__media--portrait .zd-intro__vbox { aspect-ratio: 9/16; max-width: 340px; }
.zd-intro__vcap { margin: 9px 2px 0; font-size: 12px; line-height: 1.45; color: var(--zd-muted); text-align: center; }

/* ---------- doctors carousel (module doctors · doctors_layout = carousel) ----------
   Paging mirrors the reviews carousel: cards are hidden per page, nav reuses
   .zd-ba-nav. Page size follows the column count at the current breakpoint. */
.zd-docs--carousel { position: relative; }
.zd-docs--carousel .zd-doc { min-width: 0; }
.zd-docs__nav { margin-top: 22px; }
.zd-docs--carousel.is-slide-l { animation: zd-docs-l .28s var(--ease-out); }
.zd-docs--carousel.is-slide-r { animation: zd-docs-r .28s var(--ease-out); }
@keyframes zd-docs-l { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes zd-docs-r { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .zd-docs--carousel.is-slide-l, .zd-docs--carousel.is-slide-r { animation: none; }
}

/* related · section CTA ("Усі статті блогу"). Its own class rather than borrowing
   .zd-sidx__cta — the services-index sheet is design-owned and gets re-synced. */
.zd-related__cta { margin-top: 28px; text-align: center; }

/* The theme's own .zd-prose p { margin: 0 } is declared after — and outranks —
   .zd-prose > * + *, so multi-paragraph prose loses its rhythm. Restore it. */
.zd-prose > p + p { margin-top: 14px; }