/* Luma Screens — WordPress page chrome for single/archive/taxonomy templates
   and the [luma_screen] shortcode card. Layered on top of the ported
   assets/style.css design system. */

/*
 * padding-top/bottom only — NOT the `padding: X 0 Y` shorthand this
 * used to be. That 3-value shorthand explicitly zeroes padding-left
 * and padding-right, which silently overrode .luma-container's own
 * padding-inline (style.css) on every page using both classes together
 * (every template except blog-404). Invisible on desktop, where
 * max-width already leaves auto-margins outside .luma-container — but
 * on mobile the container fills the full viewport width, so that
 * zeroed-out padding was the *only* thing separating content from the
 * screen edge. Content ran edge-to-edge, corners included.
 */
.luma-single, .luma-archive { padding-top: var(--sp-12); padding-bottom: var(--sp-20); color: var(--text-primary); }
/* Scoped to .luma-home specifically (the homepage / blog landing
   page), not every .luma-archive page — those pages have a .hero
   section with its own var(--sp-10) top padding for breathing room
   below the category nav bar, so stacking this wrapper's var(--sp-12)
   on top of that left ~89px of empty space before the eyebrow badge
   even appeared. Category/blog-archive/search pages don't have a
   .hero to double up with, so they keep the full padding. */
.luma-archive.luma-home { padding-top: var(--sp-4); }
.luma-single h1, .luma-archive h1 { font-size: clamp(1.9rem, 4vw, var(--fs-4xl)); margin-bottom: var(--sp-4); }

.luma-breadcrumb { font-size: var(--fs-xs); color: var(--text-tertiary); margin-bottom: var(--sp-4); }
.luma-breadcrumb a { color: var(--text-secondary); }
.luma-breadcrumb a:hover { color: var(--text-primary); }

/*
 * width: fit-content, not the full column width -- neither child
 * (a fixed-220px thumb, a button) grows to fill available space, so
 * on a wide .page-main column this card used to stretch full-width
 * and leave a large dead gap to the right of the button. Capped at
 * max-width:100% so flex-wrap can still kick in and stack the thumb
 * above the button on narrow viewports, same as before.
 */
.luma-launch-card {
  display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap;
  width: fit-content; max-width: 100%;
  padding: var(--sp-6); border-radius: var(--radius-lg); border: 1px solid var(--border);
  background: var(--surface); margin: var(--sp-8) 0;
}
/*
 * On templates/single-luma_screen.php this card is always page-main's
 * first child — its own var(--sp-8) top margin there just stacked on
 * top of .page-layout's own top padding (redundant whitespace below
 * the ad-leaderboard above), and also meant it started 32px lower than
 * the sidebar's first ad even though grid align-items:start put both
 * columns at the same row top — a visible misalignment between the
 * launch card and the sidebar ad next to it. Same fix already applied
 * to .ad-leaderboard below.
 */
.page-main > .luma-launch-card:first-child { margin-top: 0; }
.luma-launch-thumb { width: 220px; aspect-ratio: 16/10; border-radius: var(--radius-md); overflow: hidden; flex-shrink: 0; }

.luma-article { max-width: 72ch; color: var(--text-secondary); line-height: 1.7; }
.luma-article h2 { color: var(--text-primary); font-size: var(--fs-xl); margin: var(--sp-8) 0 var(--sp-3); }
.luma-article p { margin-bottom: var(--sp-4); }
.luma-article ol { padding-left: 1.4em; margin-bottom: var(--sp-4); }
.luma-article li { margin-bottom: var(--sp-2); }

.luma-related { margin-top: var(--sp-12); }
.luma-related h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-5); }

.luma-archive-lede { color: var(--text-secondary); max-width: 60ch; margin-bottom: var(--sp-6); }
.luma-category-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-8); }
.luma-category-chips .chip span { opacity: 0.6; margin-left: 4px; }

/* ---------- Two-column layout: main content + right sidebar ---------- */
.page-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-10); align-items: start; }
@media (min-width: 1024px) {
  .page-layout { grid-template-columns: minmax(0, 1fr) 300px; }
}
/*
 * .ad-leaderboard always directly precedes .page-layout on single
 * screen pages, and already contributes its own var(--sp-10) bottom
 * margin — this wrapper's own var(--sp-10) top padding stacked right
 * on top of that (80px combined) before anything below it appeared.
 */
.luma-single .page-layout { padding-top: var(--sp-4); }
.page-main { min-width: 0; }

.page-sidebar { display: flex; flex-direction: column; gap: var(--sp-8); }
.sidebar-ad { width: 100%; max-width: 300px; margin: 0 auto; }
.ad-mrec { aspect-ratio: 300 / 250; }
.ad-halfpage { aspect-ratio: 300 / 600; }
/*
 * No longer independently sticky here — .page-sidebar (style.css) is
 * already sticky as a whole, and this ad's own top: var(--sp-6) (24px)
 * was smaller than the sidebar's own sticky offset (--catnav-height +
 * 16px, ~80px), which is a contradictory nested-sticky setup: an
 * element can't stick 24px from the viewport top while its own
 * containing block is itself stuck no higher than ~80px. Letting the
 * sidebar be the only sticky layer avoids that conflict entirely.
 */

.sidebar-widget {
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
  padding: var(--sp-5);
}
.sidebar-widget h3 {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-tertiary); margin: 0 0 var(--sp-4);
}
.sidebar-widget ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.sidebar-widget li a { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-secondary); }
.sidebar-widget li a:hover { color: var(--text-primary); }
.sidebar-widget .swatch { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; border: 1px solid var(--border-strong); }
.sidebar-category-list li a { justify-content: space-between; }
.sidebar-category-list li a span { color: var(--text-tertiary); font-size: var(--fs-xs); }

.luma-embed-card {
  display: flex; gap: var(--sp-4); align-items: center; padding: var(--sp-4);
  border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface);
  margin: var(--sp-6) 0; color: var(--text-primary);
}
.luma-embed-body h4 { margin-bottom: 2px; }
.luma-embed-body p { color: var(--text-tertiary); font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.luma-embed-link { font-size: var(--fs-xs); color: var(--text-secondary); margin-left: var(--sp-3); }
.luma-embed-link:hover { color: var(--text-primary); }