/* Aligned Momentum — shared photo components + automatic dark mode (6 Oct 2026).
   Load this LAST in <head> (after styles.css and the page's own <style>), so its dark-mode rules win.
   Dark mode follows the visitor's device setting (prefers-color-scheme); there is no toggle.
   It works by re-colouring the Tailwind utilities the public pages already use, so page markup
   doesn't need dark: classes. Sections that are deliberately dark (bg-slate-950/900) stay as they are.
   Photos live in images/site/<name>-1600.jpg and -800.jpg (graded copies of Slide_Images). */

:root { color-scheme: light dark; }

/* ---------- Photo components ---------- */

/* A dark panel with a photo behind its content: add .am-photo to the panel, then put
   <img class="am-photo-img" ...> and <span class="am-photo-shade"></span> as its first children. */
.am-photo { position: relative; overflow: hidden; isolation: isolate; }
.am-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: var(--am-photo-opacity, .45); }
.am-photo-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--am-photo-shade, linear-gradient(180deg, rgba(2,6,23,.55) 0%, rgba(2,6,23,.85) 100%)); }
.am-photo > .am-photo-img, .am-photo > .am-photo-shade { margin: 0 !important; } /* space-y-* utilities would otherwise push them down */
.am-photo-shade--side { background: linear-gradient(90deg, rgba(2,6,23,.97) 0%, rgba(2,6,23,.85) 45%, rgba(2,6,23,.35) 100%); }
@media (max-width: 767px) { .am-photo-shade--side { background: linear-gradient(180deg, rgba(2,6,23,.6) 0%, rgba(2,6,23,.92) 100%); } }

/* Image on top of a white card: the card gets overflow:hidden + no padding; the text sits in .am-card-body. */
.am-card { overflow: hidden; display: flex; flex-direction: column; }
.am-cardimg { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.am-card-body { padding: 2rem; display: flex; flex-direction: column; gap: 1rem; }

/* Wide photo band with an optional caption. */
.am-band { position: relative; border-radius: 1.5rem; overflow: hidden; margin-top: 3rem; aspect-ratio: 21 / 8; max-width: 100%; }
@media (max-width: 639px) { .am-band { aspect-ratio: 4 / 3; } }
.am-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.am-band figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.5rem 1.25rem; color: #f8fafc;
  font-size: .9375rem; font-weight: 600; line-height: 1.45; background: linear-gradient(180deg, transparent, rgba(2,6,23,.85)); }
.am-band figcaption b { display: block; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #5eead4; margin-bottom: .25rem; }

/* Two captioned photos side by side (stacked on phones). */
.am-duo { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.5rem; text-align: left; }
@media (min-width: 640px) { .am-duo { grid-template-columns: 1fr 1fr; } }
.am-duo figure { margin: 0; position: relative; border-radius: 1rem; overflow: hidden; aspect-ratio: 16 / 9; }
.am-duo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.am-duo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 1.1rem 1rem; color: #f8fafc; font-weight: 800; font-size: 1.05rem;
  background: linear-gradient(180deg, transparent, rgba(2,6,23,.85)); }
.am-duo figcaption span { display: block; font-size: .8125rem; font-weight: 500; color: #cbd5e1; margin-top: .15rem; }

/* Rounded standalone photo (e.g. beside a form). */
.am-pic { display: block; width: 100%; border-radius: 1.5rem; aspect-ratio: 16 / 10; object-fit: cover; }

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark) {
  :root { --am-d-page: #0b1220; --am-d-surface: #111a2e; --am-d-raised: #1e293b; --am-d-line: #1f2a40; --am-d-line2: #334155;
          --am-d-head: #f1f5f9; --am-d-text: #e2e8f0; --am-d-soft: #cbd5e1; --am-d-muted: #a3b1c6; --am-d-faint: #8b9bb3;
          --am-d-teal: #2dd4bf; --am-d-teal-soft: #99f6e4; }
  html, body { background-color: var(--am-d-page); }

  /* light surfaces */
  .bg-white { background-color: var(--am-d-surface) !important; }
  .bg-slate-50 { background-color: var(--am-d-page) !important; }
  .bg-slate-100 { background-color: var(--am-d-raised) !important; }
  .hover\:bg-slate-200:hover { background-color: var(--am-d-line2) !important; }
  .bg-teal-50 { background-color: rgba(45,212,191,.1) !important; }

  /* borders */
  .border-slate-200 { border-color: var(--am-d-line) !important; }
  .border-slate-300 { border-color: var(--am-d-line2) !important; }
  .border-teal-200 { border-color: rgba(45,212,191,.35) !important; }

  /* text */
  .text-slate-950, .text-slate-900 { color: var(--am-d-head) !important; }
  .text-slate-800 { color: var(--am-d-text) !important; }
  .text-slate-700 { color: var(--am-d-soft) !important; }
  .text-slate-600 { color: var(--am-d-muted) !important; }
  .text-slate-500 { color: var(--am-d-faint) !important; }
  .text-teal-700 { color: var(--am-d-teal) !important; }
  .text-teal-900 { color: var(--am-d-teal-soft) !important; }
  .hover\:text-teal-700:hover { color: #5eead4 !important; }
  .hover\:text-slate-600:hover { color: var(--am-d-soft) !important; }
  .text-red-600 { color: #f87171 !important; }

  /* keep dark text on bright teal buttons and badges */
  .bg-teal-400.text-slate-950, .bg-teal-300.text-slate-950 { color: #020617 !important; }

  /* near-black buttons would vanish on a dark page: invert them */
  a.bg-slate-950, button.bg-slate-950 { background-color: #e2e8f0 !important; color: #020617 !important; }
  a.bg-slate-950:hover, button.bg-slate-950:hover { background-color: #ffffff !important; }

  /* form fields */
  input, textarea, select { background-color: var(--am-d-page); color: var(--am-d-text); }
  ::placeholder { color: #64748b; }

  /* deliberately dark panels keep a visible edge against the dark page */
  .bg-slate-950.rounded-3xl, .bg-slate-950.rounded-2xl { box-shadow: 0 0 0 1px var(--am-d-line2); }

  /* site header (index, course, contact, enlightenme, roi-calculator) */
  .am-header { background: rgba(11,18,32,.92) !important; border-bottom-color: var(--am-d-line) !important; }
  .am-brand .am-n { color: var(--am-d-head) !important; }
  .am-brand .am-t { color: var(--am-d-teal) !important; }
  .am-navlink { color: var(--am-d-soft) !important; }
  .am-navlink:hover, .am-navlink[aria-expanded="true"] { color: #5eead4 !important; background: var(--am-d-raised) !important; }
  .am-menu { background: var(--am-d-surface) !important; border-color: var(--am-d-line) !important; box-shadow: 0 18px 40px -12px rgba(0,0,0,.6) !important; }
  .am-menu a:hover, .am-menu a:focus-visible { background: var(--am-d-raised) !important; }
  .am-menu a b { color: var(--am-d-head) !important; }
  .am-menu a span { color: #94a3b8 !important; }
  .am-ghost { color: var(--am-d-text) !important; border-color: var(--am-d-line2) !important; background: transparent !important; }
  .am-ghost:hover { color: #5eead4 !important; border-color: var(--am-d-teal) !important; background: rgba(45,212,191,.08) !important; }
  .am-cta { background: var(--am-d-teal) !important; color: #022c22 !important; }
  .am-cta:hover { background: #5eead4 !important; }
  .am-burger { color: var(--am-d-text) !important; }
  .am-burger:hover { background: var(--am-d-raised) !important; }
  .am-mobile { background: var(--am-d-page) !important; border-top-color: var(--am-d-line) !important; }
  .am-mobile a.am-mlink { color: var(--am-d-text) !important; }
  .am-mobile a.am-mlink:hover { color: #5eead4 !important; }
  .am-mobile a.am-msub { border-left-color: var(--am-d-line2) !important; color: var(--am-d-soft) !important; }
  .am-header a:focus-visible, .am-header button:focus-visible { outline-color: var(--am-d-teal) !important; }

  /* legal pages: inline-styled "Sign in" link */
  a.am-portal { color: var(--am-d-text) !important; background: transparent !important; border-color: var(--am-d-line2) !important; }
  a.am-portal:hover { color: #5eead4 !important; border-color: var(--am-d-teal) !important; }

  /* numbered / icon badges on cards need an edge on the dark surface */
  .am-card .bg-slate-900 { box-shadow: 0 0 0 1px var(--am-d-line2); }

  /* course.html "What's inside" captions */
  .ws-caption h3 { color: var(--am-d-head) !important; }
  .ws-caption p { color: var(--am-d-muted) !important; }

  /* photos sit a little quieter on a dark page */
  .am-cardimg, .am-pic, .am-band img, .am-duo img { filter: brightness(.92); }
}