/**
 * Movieguide New — front-end styles.
 *
 * Everything whose markup this plugin is the only source of: the review page
 * (verdict box, content levels, sections, Talk About It), the reviews/TV/lists
 * archives, poster cards and shelves, acceptability badges, and the plugin's
 * own blocks. If the templates that print it live here, so does its CSS.
 *
 * What stays in movieguide-2026/style.css is what the theme's own markup uses
 * too — .mg-main, .mg-wrap, .mg-section, the news river, .mg-back, .mg-share,
 * .mg-byline, pagination and the infinite-scroll loader — plus the design
 * tokens (--ink, --card, --fam-ink …) that every rule below reads. Those
 * tokens are the theme's, so this file is styling for the 2026 theme rather
 * than a standalone skin; under another theme the selectors still apply but
 * the custom properties resolve to nothing.
 *
 * Enqueued after the theme stylesheet by mgnew_assets() in inc/assets.php,
 * which declares mg26-style a dependency — so where a rule here and a rule
 * there name the same thing, this file wins on source order.
 */

/* ============================================================
   LISTS ARCHIVE (Movieguide® Lists category)
   Wider cards than the home-page lists grid, so the archive reads as a
   browse page rather than a teaser rail.
   ============================================================ */
.mg-archive-lists .mg-lists-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 28px;
}
.mg-archive-lists .mg-list-card__title { font-size: 18px; }

/* ============================================================
   MOVIE FINDER BLOCK
   ============================================================ */
.mg-finder__intro { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.mg-finder__intro p { margin: 0; font-size: 16px; font-weight: 500; color: var(--ink56); }
/* Two short filter labels ("SERVICE", "SHOW ME") — narrower than the
   default filter gutter so the chips start closer to them. */
.mg-finder .mg-filters__label { flex-basis: 88px; }
.mg-finder__count { margin-bottom: 20px; font-size: 14px; font-weight: 600; color: var(--ink40); }
.mg-finder .mg-poster-grid { padding-bottom: 64px; }

/* ============================================================
   GIVE PAGE PATTERNS
   Centered band header (title over sub) used by the donation sections.
   ============================================================ */
.mg-center-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	text-align: center;
}
.mg-center-head--loose { margin-bottom: 36px; }
.mg-center-head h2 { margin: 0; font-size: 28px; font-weight: 800; }
.mg-center-head p { margin: 0; font-size: 15px; font-weight: 500; color: var(--ink56); }

/* ============================================================
   DONOR QUOTE
   The testimonial on the Give page is a [movieguide_quotes] shortcode — one of
   the donor quotes held in the legacy Movieguide plugin's options, picked at
   random per request. That plugin decides the markup and this cannot change it,
   so everything below is built around what it prints:

     .movieguide_module_style_wrap        (id used by an inline <style>)
       <style>                            (empty here: the module has no options)
       .movieguide_module_style.Movieguide_LC_Quotes
         .mg_donor_quote
           p.mg_quote_text                the quote, already in quote marks
           label.mg_quote_text            "- Name", or empty when unattributed

   All of it is here rather than split with the theme: the shortcode belongs to
   the legacy plugin, the page content that uses it is seeded by
   inc/defaults.php, and neither survives a theme change, so the styling should
   not either.

   Nothing below names a wrapper. The rules key on the shortcode's own classes
   and nothing else, so the quote looks right wherever it is dropped — a Section
   block, a Group, or straight in page content. That is what the styling used to
   lack: it hung off .mg-quoteband, one particular Group on the Give page, so
   moving the shortcode out of that Group left the quote unstyled. Whatever
   block it sits in owns the column and the gap above and below; these rules own
   the type, and there is no longer any band styling of its own to fall out of.

   Every rule is prefixed body:not(:has(#dslc-main)) — the Live Composer page
   wrapper from live-composer-page-builder/includes/display-functions.php. The
   same shortcode is an LC module on the older /donate pages, which carry their
   own module styling, so nothing here may reach them. On a browser too old for
   :has() the whole selector is invalid and the quote falls back to unstyled,
   which is where it was before this existed.
   ============================================================ */

/* The quote and the attribution are two boxes stacked in normal flow, each
   centred on its OWN margins below rather than on an ancestor's alignment.
   That is deliberate: several wrappers stand between the quote and whatever
   contains it — the shortcode's two, plus any the surrounding block adds — and
   an ancestor's align-items could be defeated by any one of them. Inheriting
   text-align would be just as fragile, so .mg_donor_quote sets it itself. */
body:not(:has(#dslc-main)) .mg_donor_quote {
	display: block;
	text-align: center;
}
/* The quote and its attribution carry the same class, so they are told apart
   by tag. No max-width on the box above, so the reading measure goes here: the
   quote stays readable even when the section around it is the full site
   column. */
body:not(:has(#dslc-main)) p.mg_quote_text {
	max-width: 680px;
	margin: 0 auto;
	font-size: 22px;
	font-weight: 500;
	font-style: italic;
	line-height: 1.55;
	color: var(--ink80);
}
/* display: block so it stacks under the quote instead of running on after it,
   and so its auto margins centre it. Block layout ignores gap, so the space
   under the quote is this top margin. */
body:not(:has(#dslc-main)) label.mg_quote_text {
	display: block;
	margin: 16px auto 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--ink40);
}
/* A quote with no name prints an empty <label>: no name, no gap under it. */
body:not(:has(#dslc-main)) label.mg_quote_text:empty { display: none; }

/* ============================================================
   COMING SOON PAGE
   The whole page is this plugin's — templates/page-coming-soon.php, the TMDB
   lookup behind it, and the Top 10 block that links to it — so its styles
   belong here rather than in the theme.

   .mg-btn--ghost is scoped to the page on purpose: the theme owns .mg-btn, and
   this is the only place the outlined variant is used.
   ============================================================ */
.mg-comingsoon { display: flex; gap: 32px; align-items: flex-start; padding: 24px 0; }
.mg-comingsoon__poster { width: 220px; max-width: 36vw; border-radius: 16px; background: var(--card); flex: none; }
.mg-comingsoon__kicker { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink56); }
.mg-comingsoon__title { margin: 8px 0 14px; font-size: clamp(24px, 4vw, 38px); line-height: 1.15; }
.mg-comingsoon__overview { font-size: 17px; line-height: 1.55; color: var(--ink80); max-width: 640px; }
.mg-comingsoon__meta { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--ink56); }
.mg-comingsoon__note { margin-top: 18px; font-size: 15px; color: var(--ink56); max-width: 560px; }
.mg-comingsoon__actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.mg-comingsoon .mg-btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--chipbd); }
@media (max-width: 640px) { .mg-comingsoon { flex-direction: column; } .mg-comingsoon__poster { width: 180px; } }

/* ============================================================
   ACCEPTABILITY TAG BLOCK
   The badge and audience line for one tier (mg26/acceptability-tag). The badge
   itself is the theme's .mg-badge in its solid variant; what is here is the row
   the two sit in and the audience line, which exists only in this block.
   ============================================================ */
.mg-tier-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mg-tier-aud { font-size: 13px; font-weight: 700; }
.mg-tier-aud--family { color: var(--fam-ink); }
.mg-tier-aud--caution { color: var(--cau-ink); }
.mg-tier-aud--extreme { color: var(--ext-ink); }
.mg-tier-aud--excessive,
.mg-tier-aud--abhorrent { color: var(--ext-ink); }

/* ============================================================
   QUALITY STARS BLOCK
   The 1–4 star scale at page size (mg26/quality-stars). The block carries the
   theme's .mg-stars as well, so it is the same mark a poster card shows; this
   class only steps it up from caption size to page size.

   Nothing here lays anything out beside it — the block is one element, and what
   sits next to it is whatever blocks the Row it lives in holds.
   ============================================================ */
.mg-quality-stars { font-size: 20px; letter-spacing: 3px; color: var(--ink80); }
/* The core Row holding the stars and their caption. A Row's gap is a theme.json
   setting (settings.spacing.blockGap) and this is a classic theme, so core
   drops any blockGap the block carries and falls back to 0.5em. The class is on
   the group in the seeded content purely so that gap can be set here. */
.mg-quality-row { gap: 16px; }

/* ============================================================
   WHAT OUR RATINGS MEAN PAGE
   Nearly nothing, now that the page is blocks: the Stacks it is built from set
   their own spacing from the editor, and the Cards, Chips and CTA Band bring
   their own surfaces. What is left is the heading size the page reads at, and
   the run-out under the last band — the Canvas template has no .mg-main__end.
   ============================================================ */
.mg-ratings-page { padding-bottom: 64px; }
.mg-ratings-page h2 { margin: 0; font-size: 22px; font-weight: 800; }

/* ============================================================
   WATCH LINKS
   The row of "where to watch" service buttons (mgnew_watch_links). The markup
   carries the theme's .mg-share, so the circles, their hover and the small
   variant all come from there and are not restated; what is here is only the
   icon size inside them and the hero row that puts watch and share side by
   side.
   ============================================================ */
.mg-watch .mg-service-icon { width: 17px; height: 17px; display: block; }
.mg-watch.mg-share--sm .mg-service-icon { width: 15px; height: 15px; }

/* Share and watch on one line, wrapping to two when the hero is narrow. */
.mg-review-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; }

/* ============================================================
   MOVED FROM THE THEME
   Everything below styles markup this plugin is the only source of, so it
   moved out of movieguide-2026/style.css to travel with the templates that
   print it. Load order is unchanged: inc/assets.php declares mg26-style as a
   dependency, so these rules still land after the theme's, exactly where they
   sat when they were part of it.
   ============================================================ */

/* ============================================================
   ACCEPTABILITY BADGES & DOTS
   ============================================================ */
.mg-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  align-self: flex-start;
  white-space: nowrap;
}
.mg-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.mg-badge--family { background: var(--fam-bg); color: var(--fam-ink); }
.mg-badge--caution { background: var(--cau-bg); color: var(--cau-ink); }
.mg-badge--extreme { background: var(--ext-bg); color: var(--ext-ink); }
.mg-badge--excessive { background: #b3261e; color: #ffffff; }
/* Solid: the tier colour as the fill instead of as the ink, for a badge that
   labels a whole tinted surface rather than sitting on the page. The dot is
   ::before with currentColor, so it turns white with the text. */
.mg-badge--solid { color: #ffffff; }
.mg-badge--solid.mg-badge--family { background: var(--fam-ink); }
.mg-badge--solid.mg-badge--caution { background: var(--cau-ink); }
.mg-badge--solid.mg-badge--extreme { background: var(--ext-ink); }
.mg-badge--abhorrent { background: #501313; color: #ffffff; box-shadow: 0 0 0 2px var(--ext-bg); }
html[data-theme="dark"] .mg-badge--abhorrent { box-shadow: 0 0 0 2px rgba(255, 123, 115, 0.3); }
.mg-badge--lg { padding: 8px 16px; border-radius: 8px; font-size: 15px; font-weight: 800; }
.mg-badge--lg::before { width: 8px; height: 8px; }

.mg-dots { display: flex; gap: 3px; }
.mg-dots span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.16;
}
.mg-dots span.is-on { opacity: 1; }

.mg-stars { font-size: 14px; letter-spacing: 2px; color: var(--ink56); }

/* ============================================================
   POSTER CARDS & SHELVES
   ============================================================ */
.mg-shelf {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.mg-shelf::-webkit-scrollbar { display: none; }

.mg-poster-card {
  flex: 0 0 172px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mg-poster-card:hover { opacity: 0.85; color: inherit; }
.mg-poster-card .mg-poster {
  width: 172px;
  height: 250px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  background: var(--card);
}
.mg-poster-card__meta { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mg-poster-card__title { font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.mg-poster-card__sub { font-size: 12px; font-weight: 500; color: var(--ink56); overflow-wrap: anywhere; }

.mg-poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
  gap: 28px 20px;
}
.mg-poster-grid .mg-poster-card { flex: none; }
.mg-poster-grid .mg-poster-card .mg-poster {
  width: 100%;
  height: auto;
  aspect-ratio: 172 / 250;
}

/* ============================================================
   HOME: FAMILY-SAFE BAND
   ============================================================ */
.mg-famsafe {
  background: var(--fam-bg);
  border-radius: 20px;
  padding: 28px 28px 32px;
}
.mg-famsafe__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.mg-famsafe__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 80px;
  background: var(--fam-ink);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.mg-famsafe__head h2 { margin: 0; font-size: 26px; font-weight: 800; }
.mg-famsafe__sub { font-size: 14px; font-weight: 600; color: var(--ink56); }
.mg-famsafe__more { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--fam-ink); }
.mg-famsafe__more:hover { opacity: 0.8; color: var(--fam-ink); }
.mg-famsafe .mg-poster-card img.mg-poster { background: var(--bg); }

/* ============================================================
   REVIEWS BROWSE
   The browse head, view toggle and row list for the reviews / TV / lists
   archives. Pagination, the infinite-scroll loader and .mg-filters__row stay
   in the theme: 404.php uses the row, and the loader is the theme's own
   archive furniture.
   ============================================================ */

.mg-browse-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.mg-browse-head .mg-page-title { margin-right: 0; }
.mg-browse-head__finder { font-size: 14px; font-weight: 600; color: var(--accent); }
.mg-browse-head__finder:hover { opacity: 0.8; }

.mg-viewtoggle {
  margin-left: auto;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--card);
  border-radius: 12px;
}
.mg-viewtoggle button {
  padding: 7px 16px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.mg-viewtoggle button.is-active { background: var(--pill-active-bg); color: var(--pill-active-ink); }

.mg-filters { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }

.mg-filters__label {
  flex: 0 0 110px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink40);
}

.mg-rows { display: flex; flex-direction: column; }
[data-mg-view][hidden] { display: none !important; }
.mg-row-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hair);
}
.mg-row-item:hover { opacity: 0.8; color: inherit; }
.mg-row-item__poster {
  flex: 0 0 56px;
  width: 56px; height: 80px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: var(--card);
}
.mg-row-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mg-row-item__title { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.mg-row-item__sub { font-size: 12px; font-weight: 500; color: var(--ink40); overflow-wrap: anywhere; }
.mg-row-item > .mg-badge { flex-shrink: 0; }

/* ============================================================
   REVIEW DETAIL
   The hero, content cards and body furniture of a review page. .mg-back and
   .mg-share stay in the theme — articles and attachments use both.
   ============================================================ */

.mg-review-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 48px;
  align-items: start;
  margin-top: 24px;
}
.mg-review-hero__posterwrap { max-width: 320px; }
.mg-review-hero__posterwrap img {
  width: 100%;
  border-radius: 16px;
  display: block;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
.mg-review-hero__body { display: flex; flex-direction: column; gap: 20px; }
.mg-review-hero__type { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: var(--ink40); }
.mg-review-hero__title {
  margin: 0;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.mg-review-hero__facts {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink56);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.mg-review-hero__facts .sep { width: 1px; height: 14px; background: var(--ink26); }
.mg-review-hero__verdict { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mg-audience-chip {
  padding: 8px 16px;
  border: 1px solid var(--chipbd);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}
.mg-review-hero__quality { display: flex; align-items: center; gap: 10px; }
.mg-review-hero__quality .label { font-size: 13px; font-weight: 600; color: var(--ink40); }
.mg-review-hero__quality a { font-size: 13px; font-weight: 600; color: var(--accent); }
.mg-review-hero__lede { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.65; color: var(--ink80); }

.mg-content-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 12px;
}
.mg-content-card {
  background: var(--card);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mg-content-card__label { font-size: 12px; font-weight: 600; color: var(--ink56); }
.mg-content-card__value { font-size: 14px; font-weight: 600; }

.mg-hr { height: 1px; background: var(--hair); margin: 48px 0; border: none; }

.mg-review-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 64px;
  align-items: start;
}
.mg-review-cols h2 { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
.mg-prose { min-width: 0; font-size: 15px; font-weight: 500; line-height: 1.7; color: var(--ink80); overflow-wrap: anywhere; }
.mg-prose p { margin: 0 0 14px; }
.mg-prose p:last-child { margin-bottom: 0; }
.mg-prose img { border-radius: 16px; }

.mg-accordion { display: flex; flex-direction: column; }
.mg-accordion__item { display: flex; flex-direction: column; border-bottom: 1px solid var(--hair); }
.mg-accordion__toggle {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
  text-align: left;
  width: 100%;
}
.mg-accordion__toggle:hover { opacity: 0.75; }
.mg-accordion__heading { margin: 0; font-size: 16px; font-weight: 700; flex: 1; }
.mg-accordion__chev { font-size: 11px; color: var(--ink40); flex-shrink: 0; }
.mg-accordion__panel { margin: 0; padding: 0 0 20px; font-size: 14px; font-weight: 500; line-height: 1.7; color: var(--ink80); }
.mg-accordion__panel[hidden] { display: none; }

.mg-details { display: flex; flex-direction: column; max-width: 420px; }
.mg-details h2 { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
.mg-details__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hair);
}
.mg-details__k { font-size: 12px; font-weight: 600; color: var(--ink56); }
.mg-details__v { font-size: 14px; font-weight: 600; line-height: 1.5; }

/* ============================================================
   MOVIEGUIDE TV
   ============================================================ */
.mg-tv-featured {
  position: relative;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  background: #111;
  margin-bottom: 40px;
}
.mg-tv-featured:hover { opacity: 0.92; }
.mg-tv-featured img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.mg-tv-featured__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.8) 100%); }
.mg-tv-featured__play {
  position: absolute;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mg-tv-featured__play::after {
  content: "";
  width: 0; height: 0;
  border-left: 22px solid #0a0a0a;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  margin-left: 6px;
}
.mg-tv-featured__text {
  position: absolute;
  left: 28px; right: 28px; bottom: 24px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mg-tv-featured__kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.7); }
.mg-tv-featured__title { font-size: clamp(20px, 2.4vw, 30px); font-weight: 800; line-height: 1.2; max-width: 720px; }

.mg-tv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 32px 24px;
  padding-bottom: 64px;
}
.mg-tv-card { display: flex; flex-direction: column; gap: 12px; }
.mg-tv-card:hover { opacity: 0.85; color: inherit; }
.mg-tv-card__thumb { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: #111; }
.mg-tv-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mg-tv-card__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mg-tv-card__play::after {
  content: "";
  width: 0; height: 0;
  border-left: 14px solid #ffffff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.mg-tv-card__meta { display: flex; flex-direction: column; gap: 5px; }
.mg-tv-card__cat { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--accent); text-transform: uppercase; }
.mg-tv-card__title { font-size: 15px; font-weight: 700; line-height: 1.35; }

/* ============================================================
   MOVIEGUIDE® LIST BODY (list posts, from repeater meta)
   ============================================================ */
.mg-toplist { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }
.mg-toplist__group { margin: 20px 0 0; font-size: 22px; font-weight: 800; }
.mg-toplist__item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px;
  border: 1px solid var(--hair);
  border-radius: 20px;
  background: var(--bg);
}
.mg-toplist__rank {
  flex: 0 0 auto;
  min-width: 40px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink16, var(--ink40));
  text-align: center;
  padding-top: 4px;
}
.mg-toplist__posterlink { flex: 0 0 auto; }
.mg-toplist__poster,
.mg-toplist__posterlink img {
  width: 96px;
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.mg-toplist__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mg-toplist__title { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.25; }
.mg-toplist__title a { color: inherit; }
.mg-toplist__title a:hover { color: var(--accent); }
.mg-toplist__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mg-toplist__sub { font-size: 13px; font-weight: 600; color: var(--ink56); }
.mg-toplist__desc { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--ink80); }
.mg-toplist__more { font-size: 14px; font-weight: 700; color: var(--accent); }
@media (max-width: 560px) {
  .mg-toplist__item { flex-wrap: wrap; }
  .mg-toplist__rank { min-width: 28px; font-size: 24px; }
  .mg-toplist__poster,
  .mg-toplist__posterlink img { width: 72px; height: 105px; }
}

/* FlixPatrol chart credit */
.mg-ranked__credit { margin: 14px 4px 0; font-size: 12.5px; font-weight: 500; color: var(--ink56); }
.mg-ranked__credit a { color: inherit; font-weight: 700; }

/* ============================================================
   REVIEW PAGE — 2026 FORMAT
   (verdict box, sections, talk-about cards, byline)
   ============================================================ */
.mg-review-hero__dek { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.45; color: var(--ink80); }

.mg-verdict {
  background: var(--card);
  border-radius: 20px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mg-verdict__head { display: flex; align-items: center; gap: 12px; }
.mg-verdict__kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; color: var(--accent); }
.mg-verdict__rule { flex: 1; height: 1px; background: var(--ink16); }
.mg-verdict__link { font-size: 12px; font-weight: 700; color: var(--ink40); flex-shrink: 0; }
.mg-verdict__link:hover { color: var(--accent); }
.mg-verdict__headline {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.mg-verdict__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 10px;
}
.mg-vcard {
  background: var(--card2);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mg-vcard__label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink40); }
.mg-vcard__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mg-vcard__score { font-size: 13px; font-weight: 700; color: var(--ink56); }
.mg-vcard__note { font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--ink56); }
.mg-vcard .mg-stars { font-size: 15px; color: var(--ink); }
.mg-stars__off { opacity: 0.2; }

/*
 * Content levels — the four content codes (Content_L/V/S/N) as one traffic
 * light. Each row lights a single dot at its own place on a fixed None → Heavy
 * scale, so the position of the lit dot is the reading: further right is more,
 * and four rows stack into a shape you can take in without reading a word.
 *
 * A field the review left blank, or filled with something outside its four
 * codes, lights nothing — four grey dots and no label, which reads as "not
 * rated" instead of quietly claiming "None".
 *
 * The card spans the whole grid: a full-width row under the two summary cards,
 * never a squeezed third column beside them.
 */
.mg-vcard--levels { grid-column: 1 / -1; }
.mg-vcard--levels .mg-vcard__label { display: flex; justify-content: space-between; gap: 12px; }
.mg-vcard__scale { color: var(--ink26); }
/* One grid for all four rows — .mg-meter is display:contents so every row's
   name, dots and value land in the same three columns and line up down the
   card, whatever the labels are translated to. */
.mg-meters {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 10px 14px;
  padding-top: 4px;
}
.mg-meter { display: contents; }
.mg-meter__k { font-size: 15px; font-weight: 600; }
.mg-meter__v {
  text-align: right;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lvl-ink, var(--ink26));
}
.mg-dots--level { gap: 10px; }
.mg-dots--level span { width: 8px; height: 8px; }
.mg-dots--level span.is-on { background: var(--lvl-dot, var(--ink)); }
/* Green / amber / red, the same three the acceptability badges use, so the row
   agrees with the badge above it. The lit dot takes the amber a step brighter
   than the label: --cau-ink is tuned for text on white and goes brown at 8px.
   Dark mode's --cau-ink is already a bright amber, so there the two are one. */
.mg-meter--none,
.mg-meter--light { --lvl-ink: var(--fam-ink); --lvl-dot: var(--fam-ink); }
.mg-meter--moderate { --lvl-ink: var(--cau-ink); --lvl-dot: #e0a308; }
.mg-meter--heavy { --lvl-ink: var(--ext-ink); --lvl-dot: var(--ext-ink); }
html[data-theme="dark"] .mg-meter--moderate { --lvl-dot: var(--cau-ink); }

.mg-verdict__rows { display: flex; flex-direction: column; gap: 9px; padding-top: 2px; }
.mg-vrow { display: flex; gap: 12px; align-items: baseline; }
.mg-vrow__k { flex: 0 0 92px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; color: var(--ink40); }
.mg-vrow__k--best { color: var(--fam-ink); }
.mg-vrow__k--not { color: var(--ext-ink); }
.mg-vrow__v { font-size: 14px; font-weight: 600; line-height: 1.5; min-width: 0; }
.mg-vrow__v--soft { font-weight: 500; color: var(--ink80); }

.mg-review-main { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.mg-rsection { display: flex; flex-direction: column; gap: 14px; }
.mg-rsection h2 { margin: 0; }
.mg-rsection__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mg-rsection__head h2 { margin: 0; }
.mg-rsection__note { margin: -8px 0 0; font-size: 13px; font-weight: 500; font-style: italic; line-height: 1.6; color: var(--ink56); }
.mg-rsection__sub { margin: -8px 0 0; font-size: 14px; font-weight: 500; color: var(--ink56); }
.mg-chip-nospoilers {
  padding: 4px 12px;
  border-radius: 80px;
  background: var(--fam-bg);
  color: var(--fam-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.mg-codes { border-top: 1px solid var(--hair); padding-top: 14px; font-size: 12px; font-weight: 600; line-height: 1.7; color: var(--ink40); }
.mg-codes__list { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.mg-codes a { color: var(--accent); font-weight: 700; }

.mg-talk {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 14px;
}
.mg-talk__card {
  background: var(--card);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mg-talk__num { font-size: 20px; font-weight: 800; color: var(--ink26); }
.mg-talk__q { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.6; color: var(--ink80); flex: 1; }
.mg-talk__refs { font-size: 12px; font-weight: 700; color: var(--accent); }

.mg-verdict-restate {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px;
  background: var(--card);
  border-radius: 14px;
}
.mg-verdict-restate__line { font-size: 17px; font-weight: 800; }

.mg-byline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mg-byline__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}
.mg-byline__name { font-size: 14px; font-weight: 700; }
.mg-byline__meta { font-size: 13px; font-weight: 600; color: var(--ink40); }

.mg-family-cta { font-size: 14px; font-weight: 700; color: var(--accent); }

.mg-how-works {
  background: var(--card);
  border-radius: 16px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.mg-how-works__kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--accent); }
.mg-how-works__line { font-size: 14px; font-weight: 700; line-height: 1.55; }
.mg-how-works__body { font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--ink56); }

/* Narrow viewports. The theme's own @media (max-width: 480px) block holds the
   rules for theme-owned components; these are the plugin's half of it. */
@media (max-width: 480px) {
  .mg-poster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .mg-row-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 8px 12px;
    align-items: start;
  }
  .mg-row-item__poster { grid-row: 1 / span 2; width: 48px; height: 68px; }
  .mg-row-item > .mg-badge { grid-column: 2; justify-self: start; }
  .mg-content-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-tv-featured { aspect-ratio: auto; min-height: 260px; }
  .mg-tv-featured__play { top: 31%; width: 52px; height: 52px; }
  .mg-tv-featured__play::after { border-left-width: 15px; border-top-width: 10px; border-bottom-width: 10px; margin-left: 4px; }
  .mg-tv-featured__text { left: 16px; right: 16px; bottom: 16px; }
  .mg-tv-featured__title { font-size: 18px; }
  .mg-famsafe { padding: 22px 18px 26px; }
  .mg-prose .alignleft,
  .mg-prose .alignright { float: none; margin-left: 0; margin-right: 0; }
  .mg-review-hero,
  .mg-review-cols { gap: 32px; }
}