/* ==========================================================================
   BD Custom — Base styles. Loaded on every page. Mobile-first: base rules
   target small screens, larger breakpoints layer on with min-width queries.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bd-black);
  color: var(--bd-off-white);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, iframe, video, embed, object { max-width: 100%; }
img { height: auto; display: block; }

/* Safety net against horizontal scroll (stray fixed-width embeds, long
   unbroken URLs, etc.). Deliberately NOT overflow-x:hidden on html/body or
   .bd-page-wrap — that creates a new scrolling context that breaks
   position:sticky for anything nested inside it. That bit us twice: it's
   why the header has to live outside .bd-page-wrap, and it's why the
   article sidebar's sticky ad column silently failed to stick even with
   position:sticky correctly set on it. overflow-x:clip prevents the same
   horizontal scroll without creating that scrolling context, so sticky
   descendants (like .bd-article__sidebar) keep working. Trade-off: clip
   isn't supported in pre-2022 Safari, which will silently ignore it — an
   acceptable gap given oversized ad creatives (the main known culprit) are
   already separately contained at the widget level below. */
html { overflow-x: clip; }
.bd-page-wrap { overflow-x: clip; width: 100%; background: var(--bd-black); }

/* Ad widget content is arbitrary third-party HTML/JS we don't control, and
   ad tags very commonly hardcode a fixed pixel width (e.g. a 728px
   leaderboard banner) that's wider than a phone screen — this was the
   likely cause of the horizontal scroll with blank space on the right.
   Force everything inside a widget area to respect its container. */
.bd-sidebar-widget, .bd-list-module__sidebar, .bd-module--ad-banner .bd-module__inner {
  max-width: 100%;
  overflow-x: hidden;
}
.bd-sidebar-widget *, .bd-list-module__sidebar *, .bd-module--ad-banner .bd-module__inner * {
  max-width: 100% !important;
}

/* Sidebar widget box — shared by the article sidebar, homepage list-module
   ad column, and category/tag archive sidebar (all render into a WP
   sidebar registered with this same before_widget wrapper). */
.bd-sidebar-widget { margin-bottom: var(--space-3); background: var(--bd-charcoal); padding: var(--space-2); }
.bd-sidebar-widget__title { font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 var(--space-1); }

/* YouTube/Vimeo embeds pasted into post content usually carry a fixed
   width="560" height="315" HTML attribute. The rule above caps width, but
   without this the height stays fixed and the video can look squashed.
   Forcing a 16:9 box keeps it proportional at any width.

   Scoped to WordPress core's own .wp-embed-aspect-16-9 wrapper (added
   automatically via add_theme_support('responsive-embeds') above, but
   only for oEmbeds WP recognizes as type "video" — YouTube, Vimeo, etc.)
   rather than every iframe in article content. Instagram's oEmbed type is
   "rich", not "video", so it never gets that wrapper — matching on bare
   `iframe` previously caught Instagram's embed too and forced its
   naturally portrait/square content into a 16:9 box, cropping it. */
.bd-article__body .wp-embed-aspect-16-9 iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}
a { color: inherit; text-decoration: none; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Header — slim bar only: logo left, hamburger right. Same slim bar at
   every breakpoint; no inline desktop nav, no separate search icon. All
   navigation, search, and utility links live in the flyout (.bd-flyout),
   triggered by .bd-flyout-toggle. */
.bd-site-header {
  background: var(--bd-black);
  border-bottom: 1px solid var(--bd-charcoal-2);
  position: sticky;
  top: 0;
  z-index: 50;
}
.bd-site-header__top {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.bd-logo__text {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--bd-off-white);
}
.bd-logo img { display: block; height: 40px; width: auto; }
.bd-logo { margin-right: auto; }

/* "/db" badge — small bordered link to the Horror DB. On mobile it sits
   next to the hamburger (pushed there by .bd-logo's auto margin above).
   On desktop that gets cancelled below so the badge sits next to the logo
   instead, matching bloody-disgusting.com/db's own layout at each width. */
.bd-db-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--bd-red);
  color: var(--bd-red);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.375rem 0.5rem;
  letter-spacing: 0.02em;
}

.bd-desktop-nav { display: none; }

.bd-flyout-toggle {
  background: none; border: none; padding: var(--space-1);
  color: var(--bd-off-white); cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
}
.bd-flyout-toggle__bar { width: 22px; height: 2px; background: var(--bd-off-white); }

/* The flyout — one component at every breakpoint. Mobile: full-screen
   takeover. Desktop: fixed-width panel spanning the full viewport height,
   contained to the right edge rather than full-width (Polygon.com-style).
   Uses transform (not display) so it can animate, and stays in the layout
   (off-screen) at all times rather than being display:none —
   position:fixed needs that to transition smoothly. */
.bd-flyout {
  position: fixed;
  top: 0; right: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: linear-gradient(160deg, var(--bd-charcoal) 0%, var(--bd-black) 100%);
  padding: var(--space-3) var(--space-3) var(--space-2);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  /* Ad units (sticky/anchor formats, video ads, etc. served via GAM)
     commonly set their own z-index to the practical browser ceiling so
     they always render above everything else on the page. To guarantee
     the flyout is navigable regardless of what an ad does, it needs to
     sit at that same ceiling — anything lower can still get covered. */
  z-index: 2147483647;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
}
.bd-flyout.is-open { transform: translateX(0); }

.bd-flyout-close {
  position: absolute; top: var(--space-2); right: var(--space-2);
  background: none; border: none; color: var(--bd-off-white); cursor: pointer;
  padding: var(--space-1);
}

/* Dark backdrop behind the flyout — click to close, and it's the visual
   cue that this is a panel floating over the page rather than part of
   the normal document flow. */
.bd-flyout-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6);
  opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
  z-index: 2147483646;
}
.bd-flyout-overlay.is-open { opacity: 1; pointer-events: auto; }

/* Search — first thing in the flyout */
.bd-flyout-search { margin: var(--space-2) 0 var(--space-2); }
.bd-flyout-search form { display: flex; gap: 0.5rem; }
.bd-flyout-search input[type="search"] {
  flex: 1; background: var(--bd-black); border: 2px solid var(--bd-charcoal-2);
  color: var(--bd-off-white); padding: 0.75rem 1rem;
  font-size: 1rem; font-weight: 600;
}
.bd-flyout-search input[type="search"]:focus { border-color: var(--bd-red); outline: none; }
.bd-flyout-search button,
.bd-flyout-search input[type="submit"] {
  background: var(--bd-red); border: none; color: #fff; font-weight: 700;
  padding: 0.5rem 1.25rem; font-size: 0.9375rem; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}

/* Theme toggle — sun/moon switch, sits above "What to Watch". The flyout
   itself never changes appearance between themes (Tom: "the flyout does
   not need to change with the theme"), so every color below is intentionally
   var(--bd-*) rather than a fixed hex — that's safe, not a bug, because the
   light-theme override in style.css is scoped to html[data-theme="light"]
   .bd-page-wrap, and while #bd-flyout is technically nested inside
   .bd-page-wrap in the DOM (see header.php), the override only applies
   custom-property values to *descendants* of the element carrying them —
   it doesn't retroactively change ancestor-level resolution for elements
   that were already given a value further up -- CSS custom properties only
   cascade to descendants of the element they're declared on, per spec. This
   is standard cascade behavior, not a browser-specific quirk, but worth
   confirming visually on the actual built pages before calling this done. */
.bd-theme-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--bd-charcoal-2);
  margin-bottom: var(--space-1);
}
.bd-theme-toggle-row__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bd-gray);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bd-theme-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 14px;
  background: var(--bd-charcoal);
  border: 1px solid var(--bd-charcoal-2);
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-appearance: none;
  appearance: none;
}
.bd-theme-toggle__track-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bd-off-white);
  pointer-events: none;
}
.bd-theme-toggle__track-icon--sun { right: 6px; }
.bd-theme-toggle__track-icon--moon { left: 6px; display: none; }
.bd-theme-toggle.is-light .bd-theme-toggle__track-icon--sun { display: none; }
.bd-theme-toggle.is-light .bd-theme-toggle__track-icon--moon { display: flex; }
.bd-theme-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bd-off-white);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.bd-theme-toggle.is-light .bd-theme-toggle__thumb { transform: translateX(24px); }
.bd-theme-toggle__thumb-icon {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bd-black);
}
.bd-theme-toggle__thumb-icon--sun { display: none; }
.bd-theme-toggle.is-light .bd-theme-toggle__thumb-icon--sun { display: flex; }
.bd-theme-toggle.is-light .bd-theme-toggle__thumb-icon--moon { display: none; }

/* Hardcoded "What to Watch" / "Horror DB" links, just under search — same
   retro play-triangle flourish used after homepage module titles. */
.bd-flyout-watch {
  display: block;
  padding: var(--space-1) 0;
  color: var(--bd-off-white);
  text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 0.9375rem; font-weight: 700;
  transition: color 0.15s ease;
}
.bd-flyout-watch::after {
  content: "\25B6";
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.85em;
  color: var(--bd-red);
  vertical-align: middle;
}
.bd-flyout-watch:hover { color: var(--bd-red); }

/* Main menu — big, bold, all caps */
.bd-flyout-main {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--bd-charcoal-2);
}
.bd-flyout-main__list { list-style: none; margin: 0; padding: 0; }
.bd-flyout-main__list a {
  display: block; padding: var(--space-1) 0;
  text-transform: uppercase; letter-spacing: 0.01em;
  font-size: 1.25rem; font-weight: 800; line-height: 1.2;
  color: var(--bd-off-white);
  transition: color 0.15s ease;
}
.bd-flyout-main__list a:hover { color: var(--bd-red); }

/* Newsletter — small, muted utility link, with an icon */
.bd-flyout-utility {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 1px solid var(--bd-charcoal-2);
}
.bd-flyout-utility__link {
  display: flex; align-items: center; gap: 0.4rem;
  color: var(--bd-gray);
  text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 0.75rem; font-weight: 700;
  transition: color 0.15s ease;
}
.bd-flyout-utility__link svg { flex-shrink: 0; }
.bd-flyout-utility__link:hover { color: var(--bd-red); }

/* Secondary menu — standard weight, smaller than the main list */
.bd-flyout-secondary { margin-top: var(--space-2); }
.bd-flyout-secondary__list { list-style: none; margin: 0; padding: 0; }
.bd-flyout-secondary__list a {
  display: block; padding: var(--space-1) 0;
  text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 0.875rem; font-weight: 600;
  color: var(--bd-off-white);
  transition: color 0.15s ease;
}
.bd-flyout-secondary__list a:hover { color: var(--bd-red); }

/* Social links pinned to the bottom of the flyout via margin-top:auto on
   the flex column parent. */
.bd-flyout-social {
  margin-top: auto;
  padding-top: var(--space-2);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}
.bd-flyout-social__link {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  color: var(--bd-gray); transition: color 0.15s ease;
}
.bd-flyout-social__link svg { width: 22px; height: 22px; }
.bd-flyout-social__link:hover { color: var(--bd-red); }

@media (min-width: 768px) {
  .bd-site-header__top { padding: var(--space-2); }
  .bd-logo img { height: 40px; }
  .bd-logo { margin-right: 0; }

  .bd-desktop-nav {
    display: flex; align-items: center; gap: var(--space-3);
    margin-right: auto; margin-left: var(--space-3);
  }
  .bd-desktop-nav__list { display: flex; align-items: center; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
  .bd-desktop-nav__list a {
    padding: 0; font-size: 0.8125rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--bd-off-white); transition: color 0.15s ease;
  }
  .bd-desktop-nav__list a:hover { color: var(--bd-red); }

  /* Desktop: contained side panel instead of a full-screen takeover,
     everything else (single list, search, social) stays the same
     component and behavior as mobile. */
  .bd-flyout { width: min(440px, 90vw); }
  .bd-flyout-main__list a { font-size: 1.5rem; }
}



/* Story grid — image on top, bold headline below. Default for every
   homepage list module (Trending, Reviews, Features, custom modules, etc.):
   4 across on desktop, 2 on small screens. On phones (see mobile override
   below) it converges to the same compact row layout as the list module,
   except for Secondary Featured which keeps its larger card look. */
.bd-story-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: var(--space-3);
}
.bd-story-grid__link { display: block; }
.bd-story-grid__content { min-width: 0; }
.bd-story-grid__media { aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 0.5rem; }
.bd-story-grid__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s ease; }
.bd-story-grid__link:hover .bd-story-grid__media img { transform: scale(1.03); }
.bd-story-grid__meta {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--bd-gray); margin-bottom: 0.3rem;
}
.bd-story-grid__category { color: var(--bd-red); font-weight: 700; }
.bd-story-grid__sep { margin: 0 0.35rem; }
.bd-story-grid__headline {
  font-size: 0.9375rem; line-height: 1.35; font-weight: 700; margin: 0;
  transition: color 0.15s ease;
}
.bd-story-grid__link:hover .bd-story-grid__headline { color: var(--bd-red); }

@media (min-width: 560px) { .bd-story-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .bd-story-grid { grid-template-columns: repeat(4, 1fr); } }

/* Mobile: converge every module's list to one compact row layout (small
   square thumb left, meta + headline right) — matching the reference.
   Secondary Featured, Custom Horizontal, Hero, and Related are explicitly
   excluded and keep the larger card look (full-width image, meta+headline
   below). */
@media (max-width: 559px) {
  .bd-story-grid { grid-template-columns: 1fr; gap: var(--space-2); }
  .bd-story-grid__item { padding: 0; }
  .bd-story-grid__link { display: flex; gap: var(--space-2); align-items: flex-start; }
  .bd-story-grid__media { flex: 0 0 90px; width: 90px; aspect-ratio: 1 / 1; margin-bottom: 0; }
  .bd-story-grid__content { flex: 1; }

  .bd-module--secondary-featured .bd-story-grid__link { display: block; }
  .bd-module--secondary-featured .bd-story-grid__media {
    width: 100%; aspect-ratio: 4 / 3; margin-bottom: 0;
  }
  .bd-module--secondary-featured .bd-story-grid__headline {
    font-size: 1.625rem; font-weight: 800;
  }

  .bd-module--custom-horizontal .bd-story-grid__link { display: block; }
  .bd-module--custom-horizontal .bd-story-grid__media {
    width: 100%; aspect-ratio: 4 / 3; margin-bottom: 0;
  }
  .bd-module--custom-horizontal .bd-story-grid__headline {
    font-size: 1.625rem; font-weight: 800;
  }

  /* Related (single post template): keep the same full-card look as
     Secondary Featured / Custom Horizontal instead of converging to the
     compact row, per request — stacked cards on mobile, matching the
     Featured Content treatment used elsewhere. */
  .bd-article__related .bd-story-grid__link { display: block; }
  .bd-article__related .bd-story-grid__media {
    width: 100%; aspect-ratio: 4 / 3; margin-bottom: 0;
  }
  .bd-article__related .bd-story-grid__headline {
    font-size: 1.625rem; font-weight: 800;
  }

  /* Hero: no top gap under the header, and the whole card (image + text
     block) bleeds full viewport width instead of sitting inside the
     module's normal side padding. The negative margins exactly cancel
     .bd-module__inner's side padding, and the width calc adds it back so
     the card spans edge to edge. Compound selector so this beats the
     later, unconditional ".bd-module { padding: var(--space-4) 0; }"
     rule — same specificity ties resolve by source order otherwise, and
     that rule comes after this one in the file. */
  .bd-module.bd-module--hero { padding-top: 0; }
  .bd-module--hero .bd-hero__card {
    width: calc(100% + (var(--space-2) * 2));
    margin: 0 calc(-1 * var(--space-2)) 0;
  }
  .bd-module--hero .bd-story-grid__media {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0;
  }
}

.bd-eyebrow {
  display: inline-block; font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--bd-red); margin-bottom: 0.25rem;
}
.bd-score-badge {
  display: inline-block; margin-top: 0.25rem; padding: 0.125rem 0.5rem;
  background: var(--bd-red); color: var(--bd-off-white); font-weight: 700;
  font-size: 0.75rem; border-radius: var(--radius);
}
.bd-star-rating { display: block; margin-top: 0.15rem; color: var(--bd-red); font-size: 0.8125rem; letter-spacing: 1px; }

/* Module wrapper — background spans the full viewport width; the actual
   heading + grid content sit inside a centered, max-width inner container.
   Background color is chosen per-module in Appearance > Homepage Modules
   (falls back to dark gray if unset). */
.bd-module { padding: var(--space-4) 0; }
.bd-module--bg-black { background: var(--bd-black); }
.bd-module--bg-charcoal { background: var(--bd-charcoal); }
.bd-module--bg-red { background: var(--bd-red); }
.bd-module--bg-red .bd-module__title,
.bd-module--bg-red .bd-story-grid__headline,
.bd-module--bg-red .bd-news-list__headline,
.bd-module--bg-red .bd-news-list__category { color: var(--bd-off-white); }
.bd-module--bg-red .bd-story-grid__link:hover .bd-story-grid__headline,
.bd-module--bg-red .bd-news-list__link:hover .bd-news-list__headline { color: var(--bd-black); }
.bd-module__inner { max-width: var(--content-width); margin: 0 auto; padding: 0 var(--space-2); }

.bd-module__heading {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--space-2);
}
.bd-module__title {
  font-family: var(--font-body); font-weight: 800; font-size: 1.75rem;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--bd-off-white); margin: 0;
}
.bd-module__title a { color: inherit; transition: color 0.15s ease; }
.bd-module__title a:hover { color: var(--bd-red); }
.bd-module__see-all { font-size: 0.75rem; color: var(--bd-gray); white-space: nowrap; }


/* Buttons */
/* Top-of-page ad slot (posts & pages only), just under the header. */
.bd-top-ad-slot {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-2) var(--space-2) 0;
  display: flex;
  justify-content: center;
}
.bd-top-ad-slot .bd-sidebar-widget { margin-bottom: 0; width: 100%; }

.bd-button {
  display: inline-block; padding: 0.625rem 1.25rem; background: var(--bd-red);
  color: var(--bd-off-white); font-weight: 700; font-size: 0.875rem; border-radius: var(--radius);
}
.bd-button--outline { background: transparent; border: 2px solid var(--bd-red); }

/* List-style row (image-left, category/time meta above a bold headline,
   no excerpt) — shared by the homepage list module and the category/tag
   archive templates. */
.bd-news-list { list-style: none; margin: 0; padding: 0; }
.bd-news-list__item { border-bottom: 1px solid var(--bd-charcoal-2); padding: var(--space-2) 0; }
.bd-news-list__item:last-child { border-bottom: none; }
.bd-news-list__link { display: flex; gap: var(--space-3); align-items: flex-start; }
.bd-news-list__media { flex: 0 0 240px; width: 240px; aspect-ratio: 3 / 2; overflow: hidden; }
.bd-news-list__media img { width: 100%; height: 100%; object-fit: cover; }
.bd-news-list__content { flex: 1; min-width: 0; }
.bd-news-list__meta {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--bd-gray); margin-bottom: 0.35rem;
}
.bd-news-list__category { color: var(--bd-red); font-weight: 700; }
.bd-news-list__sep { margin: 0 0.35rem; }
.bd-news-list__headline {
  font-family: var(--font-body); font-weight: 700; font-size: 1.25rem;
  line-height: 1.3; margin: 0; transition: color 0.15s ease;
}
.bd-news-list__link:hover .bd-news-list__headline { color: var(--bd-red); }

/* Two-column layout: post list left, widget sidebar right. Used by the
   homepage list module (ad column) and the category/tag archive
   templates (Article Sidebar widgets). Unlike .bd-article__columns on
   single posts, this grid only ever has two children (main + sidebar) —
   no Related/Comments sharing the same grid — so plain position:sticky
   is safe here without the wrapper/order trick that page needed. */
.bd-list-module__layout { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.bd-list-module__sidebar { min-width: 0; }

@media (min-width: 900px) {
  .bd-list-module__layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .bd-list-module__sidebar { position: sticky; top: calc(var(--space-2) + 60px); }
}

/* Mobile: compact row (small square thumb left) instead of a stacked
   full-width image. */
@media (max-width: 559px) {
  .bd-news-list__item { border-bottom: none; padding: var(--space-2) 0; }
  .bd-news-list__link { flex-direction: row; gap: var(--space-2); }
  .bd-news-list__media { flex: 0 0 90px; width: 90px; aspect-ratio: 1 / 1; }
  .bd-news-list__headline { font-size: 0.9375rem; }
}

@media (min-width: 768px) {
  .bd-news-list__headline { font-size: 1.5rem; }
}

/* Footer */
.bd-site-footer { background: var(--bd-black); border-top: 1px solid var(--bd-charcoal-2); margin-top: var(--space-5); padding: var(--space-4) var(--space-2); }
.bd-site-footer__inner {
  max-width: var(--content-width); margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
}
.bd-site-footer__col--brand { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.bd-footer-logo { display: inline-block; }
.bd-footer-logo img { display: block; height: 28px; width: auto; }
.bd-footer-logo .bd-logo__text { font-family: var(--font-display); font-size: 0.9375rem; color: var(--bd-off-white); }

.bd-app-links { display: flex; flex-direction: column; gap: 0.5rem; }
.bd-app-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--bd-charcoal-2); color: var(--bd-off-white);
  padding: 0.5rem 0.875rem; font-size: 0.8125rem; font-weight: 600;
  width: fit-content;
}
.bd-app-link:hover { border-color: var(--bd-gray-dim); color: var(--bd-red); }

.bd-footer-social { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bd-footer-social__link {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  color: var(--bd-gray); transition: color 0.15s ease;
}
.bd-footer-social__link:hover { color: var(--bd-red); }

.bd-site-footer__col--links .bd-nav-list,
.bd-site-footer__col--links .menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
}
.bd-site-footer__col--links a { color: var(--bd-gray); font-size: 0.875rem; }
.bd-site-footer__col--links a:hover { color: var(--bd-off-white); }
.bd-site-footer__copy { color: var(--bd-gray-dim); font-size: 0.8125rem; margin-top: var(--space-2); }

@media (min-width: 768px) {
  .bd-site-footer__inner { grid-template-columns: 1fr 2fr; align-items: start; }
}