/* ==========================================================================
   Explore Topics portal
   --------------------------------------------------------------------------
   Everything here is namespaced under .topics-portal so it cannot reach the
   rest of the site, and every class is prefixed .topic- so it cannot collide
   with Bootstrap. Colours come from the existing brand palette.
   ========================================================================== */

.topics-portal {
  --topic-brand: #1c4587;
  --topic-brand-deep: #152562;
  --topic-brand-soft: #e8eef8;
  --topic-accent: #42a013;
  --topic-ink: #101a2b;
  --topic-ink-soft: #46536b;
  --topic-muted: #657086;
  --topic-rule: #dde3ec;
  --topic-rule-soft: #edf0f5;
  --topic-surface: #ffffff;
  --topic-surface-2: #f6f8fb;

}

/* The listing pages are new design and set their own type. The entry page is
   the blog article template reused, so it must NOT be reset here — its
   headings, links and paragraphs come from the site's existing article
   styles, and anything reset below would fight them. */
.topics-portal--listing {
  color: var(--topic-ink);
  font-family: "SF Pro Display", -apple-system, "Segoe UI", Arial, sans-serif;
  background: var(--topic-surface);
  /* The entry page sits inside .blog_container, which carries its own
     margin-top after the banner. This wrapper doesn't, so the breadcrumb
     sat flush against the banner below it. 15px matches the gap News and
     Discussion and the entry page leave (E0277, 7 Oct). */
  padding-top: 15px;
}

.topics-portal--listing p {
  margin: 0;
}

.topics-portal--listing a {
  color: inherit;
}

.topics-portal--listing h1,
.topics-portal--listing h2,
.topics-portal--listing h3 {
  margin: 0;
  font-weight: 700;
  color: var(--topic-ink);
}

.topics-portal--listing h1 {
  /* Site blue, as the entry page title and News and Discussion titles. */
  color: var(--topic-brand);
  font-size: 2.5rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.topics-portal--listing h2 {
  font-size: 1.75rem;
  line-height: 1.25;
}

.topics-portal--listing h3 {
  font-size: 1.25rem;
  line-height: 1.35;
}

@media (max-width: 767px) {
  .topics-portal--listing h1 {
    font-size: 1.9rem;
  }

  .topics-portal--listing h2 {
    font-size: 1.4rem;
  }
}

/* --- small shared pieces ------------------------------------------------ */

.topic-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--topic-muted);
}

.topic-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--topic-brand);
  background: var(--topic-brand-soft);
  padding: 6px 9px;
  border-radius: 2px;
  text-decoration: none;
}

a.topic-badge:hover {
  background: #dbe6f6;
  color: var(--topic-brand-deep);
}

.topic-tag {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--topic-muted);
  border: 1px solid var(--topic-rule);
  padding: 5px 8px;
  border-radius: 2px;
}

.topic-soon {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--topic-muted);
  border: 1px dashed var(--topic-rule);
  padding: 5px 8px;
  border-radius: 2px;
}

.topic-tagrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.topic-meta {
  font-size: 0.85rem;
  color: var(--topic-muted);
}

/* Stand-in for artwork that has not been supplied yet. Each tone is a
   different placeholder so listings do not read as one repeated block. */
.topic-thumb {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(150deg, #1c4587 0%, #2f6ab5 50%, #7fa3d3 100%);
}

.topic-thumb--slate {
  background: linear-gradient(160deg, #2b4a6f 0%, #4b7fa8 55%, #93b3c4 100%);
}

.topic-thumb--sand {
  background: linear-gradient(165deg, #6b5637 0%, #a08454 55%, #d9c49a 100%);
}

.topic-thumb--green {
  background: linear-gradient(200deg, #33513f 0%, #4f7f5a 52%, #9dbe93 100%);
}

.topic-thumb--plum {
  background: linear-gradient(175deg, #4a3358 0%, #6f4f86 55%, #b39cc4 100%);
}

/* --- portal home -------------------------------------------------------- */

.topic-hero {
  display: grid;
  gap: 16px;
  max-width: 42rem;
  padding: 32px 0 28px;
}

.topic-hero__lead {
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--topic-ink-soft);
}

.topic-search {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 30rem;
  margin-top: 8px;
  padding: 14px 16px;
  border: 1px solid var(--topic-rule);
  border-radius: 3px;
  background: var(--topic-surface-2);
  color: var(--topic-muted);
  font-size: 0.95rem;
}

.topic-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--topic-rule);
  border-top: 1px solid var(--topic-rule);
  border-bottom: 1px solid var(--topic-rule);
}

.topic-cat {
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 20px 18px;
  background: var(--topic-surface);
  text-decoration: none;
}

.topic-cat:hover {
  background: var(--topic-surface-2);
}

.topic-cat__count {
  font-size: 0.85rem;
  color: var(--topic-muted);
  font-variant-numeric: tabular-nums;
}

.topic-cat__blurb {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--topic-ink-soft);
}

.topic-section-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 32px 0 16px;
}

.topic-section-head__more {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--topic-brand);
  text-decoration: none;
}

.topic-section-head__more:hover {
  text-decoration: underline;
}

.topic-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  padding-bottom: 40px;
}

.topic-feature {
  display: grid;
  gap: 10px;
  align-content: start;
  text-decoration: none;
}

.topic-feature .topic-thumb {
  aspect-ratio: 16 / 10;
}

.topic-feature__hook {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--topic-ink-soft);
}

.topic-feature:hover h3 {
  color: var(--topic-brand);
}

/* --- category listing --------------------------------------------------- */

.topic-cat-head {
  display: grid;
  gap: 14px;
  padding: 20px 0 18px;
}

.topic-cat-head p {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--topic-ink-soft);
}

/* Collection pill-tabs — same visual language as the e-commerce Browse
   Resources tabs (brief: "pill-tab category filters... reuses this
   component's structure"), restyled with Topics' own tokens instead of
   copying ecommerce's scoped CSS variables. */
.topic-collection-filter {
  overflow: hidden;
  padding: 4px 0 18px;
}

.topic-collection-filter__scroller {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.topic-collection-filter__scroller::-webkit-scrollbar {
  display: none;
}

.topic-collection-filter__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* On a phone even compact pills wrap into a wall of rows ahead of the first
   entry. One row that scrolls sideways instead. A fade alone did not read as
   "more to swipe" (E0277 R9, client on his phone), so each edge with more
   pills beyond it gets a real arrow button over a white fade. */
.topic-collection-filter {
  position: relative;
}

.topic-collection-filter__arrow {
  position: absolute;
  top: 4px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--topic-brand);
  cursor: pointer;
}

.topic-collection-filter__arrow[hidden] {
  display: none;
}

.topic-collection-filter__arrow--prev {
  left: 0;
  justify-content: flex-start;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff 45%);
}

.topic-collection-filter__arrow--next {
  right: 0;
  justify-content: flex-end;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 45%);
}

.topic-collection-filter__arrow i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--topic-brand);
  color: #fff;
  font-size: 0.8rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

@media (max-width: 767.98px) {
  .topic-collection-filter__tabs {
    flex-wrap: nowrap;
    width: max-content;
    padding-right: 40px;
  }
}

.topic-collection-filter__tab {
  flex: 0 0 auto;
  padding: 5px 14px;
  border: 1px solid var(--topic-brand);
  border-radius: 999px;
  background: transparent;
  color: var(--topic-brand);
  text-transform: uppercase;
  font-size: 0.72rem;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.topic-collection-filter__tab.is-active {
  background: var(--topic-brand);
  border-color: var(--topic-brand);
  color: #fff;
}

.topic-collection-filter__tab:hover {
  color: #fff;
  background: var(--topic-brand);
}

/* Listing layout — card column + right-rail filter panel, per the same
   brief section ("card grid, right-rail filters"). */
.topic-listing-layout {
  align-items: flex-start;
}

/* Boxed card matching .ecommerce-listing-shell — same border/background as
   the filter panel beside it, so both columns start at the same top edge
   and the result count reads as part of the card, not a floating line. */
.topic-listing-shell {
  background: #fff;
  border: 1px solid var(--topic-rule-soft);
  padding: 24px;
}

.topic-results-count {
  color: var(--topic-muted);
  font-size: 0.875rem;
  margin-bottom: 12px;
}

.topic-filter-panel {
  background: #fff;
  border: 1px solid var(--topic-rule-soft);
  padding: 24px;
}

.topic-filter-panel__group {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--topic-rule);
}

/* mainstyle.css ships a bare `h2 { font-size: 28px !important; ... }` site
   rule (same reason the ecommerce filter panel's own heading rule carries
   !important) — nothing without !important here can win against it. */
.topic-filter-panel .topic-filter-panel__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--topic-brand);
  margin: 0 0 16px;
}

.topic-filter-search {
  position: relative;
}

.topic-filter-search i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--topic-muted);
}

.topic-filter-search__input {
  width: 100%;
  height: 46px;
  padding: 0 12px 0 40px;
  border: 1px solid var(--topic-rule);
  background: #f9f9f9;
  color: var(--topic-ink);
  font-size: 0.9rem;
}

.topic-filter-search__input:focus {
  outline: 2px solid var(--topic-brand-soft);
  border-color: var(--topic-brand);
  background: #fff;
}

.topic-filter-search__hint {
  display: block;
  color: var(--topic-muted);
  font-size: 0.75rem;
  margin-top: 6px;
}

/* Result count shares its line with the mobile Search & filter button. */
.topic-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.topic-results-head .topic-results-count {
  margin-bottom: 0;
}

.topic-filter-open {
  display: none;
  position: relative;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 6px 14px;
  border: 1px solid var(--topic-brand);
  border-radius: 999px;
  background: #fff;
  color: var(--topic-brand);
  font-size: 0.85rem;
  font-weight: 600;
}

.topic-filter-open__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--topic-accent);
}

.topic-filter-sheet__head {
  display: none;
}

/* Below 992px the rail would stack under every card, at the bottom of the
   page. It becomes a panel that slides up over the list instead, opened by
   the button beside the result count - News and Discussion's mobile filter,
   in Topics' tokens. */
@media (max-width: 991.98px) {
  .topic-filter-open {
    display: inline-flex;
  }

  .topic-filter-sheet {
    position: fixed;
    inset: 0;
    z-index: 1050;
    margin: 0 !important;
    padding: 0;
    width: 100%;
    display: flex;
    align-items: flex-end;
    background: rgba(16, 26, 43, 0.45);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }

  .topic-filter-sheet.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s ease;
  }

  .topic-filter-sheet__panel {
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 16px 20px 24px;
    transform: translateY(100%);
    transition: transform 0.25s ease;
  }

  .topic-filter-sheet.is-open .topic-filter-sheet__panel {
    transform: none;
  }

  .topic-filter-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }

  .topic-filter-sheet__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--topic-brand);
  }

  .topic-filter-sheet__close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--topic-brand-soft);
    color: var(--topic-brand);
    font-size: 1.1rem;
  }

  .topic-filter-sheet .topic-filter-panel {
    margin-top: 0;
    padding: 0;
    border: 0;
  }

  body.topic-filter-locked {
    overflow: hidden;
  }
}

/* Collapsible filter group — same shape as the e-commerce Browse Resources
   filter panel's Author/Price/etc. groups (chevron-toggled section under a
   FILTERS heading), restyled with Topics' own tokens. */
.topic-filter-toggle-group {
  border-bottom: 1px solid var(--topic-rule);
}

.topic-filter-toggle-group:last-of-type {
  border-bottom: 0;
}

.topic-filter-toggle-group__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0 10px;
  background: transparent;
  border: 0;
  color: var(--topic-ink);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: left;
}

.topic-filter-toggle-group__chevron {
  color: var(--topic-brand);
  transition: transform 0.15s ease;
}

.topic-filter-toggle-group__toggle:not(.collapsed) .topic-filter-toggle-group__chevron {
  transform: rotate(180deg);
}

.topic-filter-toggle-group__content {
  padding: 0 0 16px;
}

.topic-filter-options {
  display: grid;
  gap: 12px;
}

.topic-filter-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--topic-muted);
  cursor: pointer;
  margin: 0;
}

.topic-filter-option:hover .topic-filter-option__label {
  color: var(--topic-brand);
}

.topic-filter-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex-shrink: 0;
  border: 1px solid var(--topic-rule);
  border-radius: 50%;
  background: #fff;
  position: relative;
  cursor: pointer;
}

.topic-filter-option input[type="radio"]:checked {
  border-color: var(--topic-brand);
}

.topic-filter-option input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--topic-brand);
  transform: translate(-50%, -50%);
}

.topic-filter-option input[type="radio"]:focus-visible {
  outline: 2px solid var(--topic-brand);
  outline-offset: 2px;
}

.topic-filter-option__label {
  font-size: 0.9rem;
  transition: color 0.15s ease;
}

.topic-chip {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 14px;
  border: 1px solid var(--topic-rule);
  border-radius: 100px;
  color: var(--topic-ink-soft);
  text-decoration: none;
}

.topic-chip.is-active {
  background: var(--topic-brand);
  border-color: var(--topic-brand);
  color: #fff;
}

/* Category listing cards are the blog listing's own .blog_list-row (see
   BlogController::load_blog_list). A real .blog_thumb holds a real <img>
   whose own natural height matches the card (site's actual thumbnails run
   ~300px wide) — nothing to fix there. Our placeholder has no natural
   size of its own, so left alone it either collapses to nothing or (with
   a fixed aspect-ratio) mismatches the text column's height, leaving a
   whitespace gap under whichever side is shorter. Filling it to the row's
   own stretched height (Bootstrap's .row is a flex row, stretch by
   default) keeps both columns flush, same as a real photo would. */
.blog_list-row .row>div:first-child>a,
.blog_list-row .row>div:first-child .blog_thumb {
  display: block;
  height: 100%;
}

.blog_list-row .topic-thumb {
  height: 100%;
  max-width: 300px;
}

/* A real photo is the exception to the rule above: it has proportions of
   its own, and stretching it to the row's height squashes whatever the
   editor uploaded. The column is already locked to 300px, so fixing the
   width and letting the height follow keeps the artwork intact. The
   max-height cap mainstyle.css applies below 992px would squash it the
   same way, so it goes too. */
.blog_list-row img.topic-thumb {
  width: 100%;
  height: auto;
  max-height: none;
  align-self: flex-start;
}

/* col-lg-4 is a percentage of the row, so past ~900px container width it
   grows wider than the 300px thumb cap above — the column still reserves
   its full grid share, stranding blank space between the (now narrower)
   image and where the text column starts. Locking the column itself to
   300px at the breakpoint where col-lg-4 applies keeps the two flush. */
@media (min-width: 992px) {
  .blog_list-row>.row>div:first-child {
    flex: 0 0 300px;
    max-width: 300px;
  }

  /* The text column is still col-lg-8, i.e. 66% of the row, and 300px +
     66% overflows any row narrower than ~900px — the column then wraps
     under the thumb and the two read as one stacked block. It takes
     whatever the thumb leaves instead. */
  .blog_list-row>.row>div:first-child+div {
    flex: 1 1 0;
    max-width: none;
  }
}

/* Phones and tablets: the thumb column is only ~100px wide, so a landscape
   photo scaled to it came out a sliver ~35px tall, and the placeholder -
   which has no height of its own - collapsed to nothing once mainstyle.css
   stops the row stretching below 992px. A square crop fills the column the
   way News and Discussion's cover images do. */
@media (max-width: 991.98px) {
  .blog_list-row .row>div:first-child>a,
  .blog_list-row .row>div:first-child .blog_thumb {
    height: auto;
  }

  .blog_list-row .topic-thumb,
  .blog_list-row img.topic-thumb {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 5px;
  }
}

/* Wrapped or not, the text needs air between it and the image. */
.blog_list-row>.row>div:first-child {
  margin-bottom: 16px;
}

@media (min-width: 992px) {
  .blog_list-row>.row>div:first-child {
    margin-bottom: 0;
    padding-right: 24px;
  }
}

/* .author_list-data's justify-content:space-between (mainstyle.css) is
   built for a card narrow enough that name and date crowd together; at
   our full container width it strands the date far right with a long
   empty run beside it. Packed close instead, like the blog card actually
   reads once you allow for its narrower column. */
.blog_list-row .author_list-data {
  justify-content: flex-start;
  column-gap: 24px;
}

/* .post-date carries Bootstrap's .mb-3 (margin-bottom, !important), which
   throws off align-items:center on .author_list-data — the bottom margin
   is included in the centering box, so the date visibly rides high instead
   of sitting level with the avatar. Only shows up here because our card is
   wide enough that date and avatar never wrap onto separate lines. */
.blog_list-row .post-date.mb-3 {
  margin-bottom: 0 !important;
}

/* Blog's own listing card has no gap here either; ours reads cramped
   without one since our cards run one entry per row. */
.blog_list-row .blog_content {
  padding-top: 10px;
}

/* Blog runs Read More inline after the hook text; requested as its own
   line here. */
.blog_list-row .blog_summary .read-more {
  display: block;
  margin-top: 6px;
}

/* Phones and tablets (E0277 R9). Two fixes the client saw on his phone:
   - every card sat inside the listing shell's own border and padding, a
     box in a box that cost a third of the screen's width; and
   - mainstyle.css lifts the blog card's title under the thumbnail with a
     negative margin-left sized for the blog's short photos. Against our
     square thumb that only works while the author line is tall enough;
     with a one-line name the title ran over the image.
   The card is laid out as a grid instead: thumb beside the category,
   title and author, then the summary across the full width below. With
   only the author beside the thumb, the right quarter of a phone screen
   stayed empty (R10), so the title moved up beside it. */
@media (max-width: 991.98px) {
  .topics-portal--listing .topic-listing-shell {
    padding: 0;
    border: 0;
    background: transparent;
  }

  .topics-portal--listing .blog_list-row>.extra-blog-category {
    padding: 0;
  }

  .topics-portal--listing .blog_list-row>.row {
    display: grid;
    grid-template-columns: minmax(0, 112px) minmax(0, 1fr);
    grid-template-areas:
      "thumb cate"
      "thumb title"
      "thumb author"
      "summary summary";
    grid-template-rows: auto auto 1fr auto;
    column-gap: 14px;
    /* mainstyle.css pins every .row's side margins to minus half the gutter
       with !important, which pulled the thumb and title 12px left of the
       category line above them. No gutter, no pull. */
    --bs-gutter-x: 0;
    margin: 0;
  }

  .topics-portal--listing .blog_list-row>.row>div {
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
  }

  .topics-portal--listing .blog_list-row>.row>div:first-child {
    grid-area: thumb;
  }

  .topics-portal--listing .blog_list-row .blog_thumb {
    margin-bottom: 0;
  }

  .topics-portal--listing .blog_list-row>.row>div:first-child+div,
  .topics-portal--listing .blog_list-row .blog_details-col {
    display: contents;
  }

  .topics-portal--listing .blog_list-row .blog_cate-row {
    grid-area: cate;
  }

  .topics-portal--listing .blog_list-row .author_list-data {
    grid-area: author;
    align-self: start;
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .topics-portal--listing .blog_list-row .blog_content {
    display: contents;
  }

  .topics-portal--listing .blog_list-row .read_more-expand {
    grid-area: title;
    align-self: start;
    margin: 0 0 6px;
  }

  .topics-portal--listing .blog_list-row .read_more-expand .title {
    /* mainstyle.css sets every phone h3 to 16px !important. */
    font-size: 1.15rem !important;
    line-height: 1.3;
  }

  .topics-portal--listing .blog_list-row .blog_summary {
    grid-area: summary;
    padding-top: 12px;
  }
}

.topic-empty {
  padding: 32px 0 44px;
  color: var(--topic-muted);
}

/* --- entry page --------------------------------------------------------- */

.topic-entry {
  padding-bottom: 40px;
}

/* Nothing here sets the reading width, the hero treatment, the breadcrumb, the
   category row, the share row or the author row: those are the blog article
   template's own components, reused by the markup. Only what is genuinely new
   to Explore Topics is styled below — block provenance labels, the direct
   answer, block media, the source list and the CTA stack. */

.topic-avatar {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--topic-brand), #6f93c8);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Copy link sits in the blog's own share list and inherits its icon styling.
   Copying gives no feedback of its own, so the link reports it. */
.topic-share__copy {
  position: relative;
}

.topic-share__copy.is-copied {
  color: var(--topic-accent);
}

.topic-share__copy.is-copied::after {
  content: "Copied";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--topic-accent);
}

/* Only needed while the hero artwork is a placeholder: the stand-in has no
   intrinsic size, so it needs a ratio to occupy. Real images will not use it. */
.topic-entry__image {
  aspect-ratio: 21 / 9;
  border-radius: 15px;
  overflow: hidden;
}

/* Blog's own .blog_cate-row relies on justify-content: space-between to
   separate the tag list from the share icons, which collapses to almost no
   gap once the column narrows. Scoped to the entry page only, not the shared
   blog stylesheet. */
.topic-entry .blog_cate-row {
  gap: 16px;
}

/* Same reasoning: the blog's .my-2 utility sets margin-bottom with
   !important, so a plain override here is silently dropped. Scoped to the
   entry page only. */
.topic-entry .blog_image-large {
  margin-bottom: 20px !important;
}

.direct-answer {
  display: grid;
  gap: 10px;
  padding: 20px 22px;
  margin: 4px 0 28px;
  background: var(--topic-brand-soft);
  border-left: 3px solid var(--topic-brand);
}

.direct-answer p {
  font-size: 1.2rem;
  line-height: 1.62;
}

/* blocks */
/* 
.topic-block {
  padding-bottom: 26px;
} */

/* The wrapped figure floats, so the block must close over it before the next
   block starts. */
.topic-block::after {
  content: "";
  display: block;
  clear: both;
}

.topic-block h2 {
  margin-bottom: 14px;
  color: var(--topic-brand);
}

.topic-block__body p {
  font-size: 1rem;
  line-height: 1.8;
}

.topic-block__body p+p {
  margin-top: 18px;
}

/* The single entry body (E0277 Step 2). Same measure and rhythm as the
   block body it replaces. */
.topic-body::after {
  content: "";
  display: block;
  clear: both;
}

.topic-body h2 {
  clear: both;
  margin: 32px 0 14px;
  color: var(--topic-brand);
}

.topic-body h3 {
  margin: 24px 0 10px;
  color: var(--topic-brand);
}

.topic-body > :first-child {
  margin-top: 0;
}

/* Set by the editor's alignment buttons on a paragraph or subhead (R10). */
.topic-body .topic-align-left {
  text-align: left;
}

.topic-body .topic-align-center {
  text-align: center;
}

.topic-body .topic-align-right {
  text-align: right;
}

.topic-body p,
.topic-body li {
  font-size: 1rem;
  line-height: 1.8;
}

.topic-body p + p {
  margin-top: 18px;
}

.topic-body ul,
.topic-body ol {
  margin: 14px 0 18px;
  padding-left: 1.4em;
}

.topic-body .new-quote-sec-cont {
  clear: both;
  margin: 24px 0;
}

/* Interpretive passages read as ordinary body text (client, 22 Sep): the
   italics, the side rule and the dotted underline are gone. The class stays
   on the markup because the structured data still needs to know which
   passages are a stated reading rather than sourced fact, and because the
   editor's Interpretive toggle works from it. Bold and italic inside one are
   the author's to set. */
div.topic-interpretive,
p.topic-interpretive,
h2.topic-interpretive,
h3.topic-interpretive,
blockquote.topic-interpretive,
ul.topic-interpretive,
ol.topic-interpretive {
  margin: 18px 0;
}

.topic-ref {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  vertical-align: super;
  margin-left: 2px;
  font-variant-numeric: tabular-nums;
}

/* Inline, not inline-block: an atomic inline box gives the line breaker
   somewhere to break, which stranded the full stop after a marker at the end
   of a sentence on a line of its own. Horizontal padding still applies. */
.topic-ref a {
  display: inline;
  padding: 2px 4px;
  border-radius: 2px;
  background: var(--topic-brand-soft);
  color: var(--topic-brand);
  text-decoration: none;
}

.topic-ref a:hover {
  background: var(--topic-brand);
  color: #fff;
}

/* media */

.topic-figure {
  margin: 0;
}

.topic-figure .topic-thumb {
  aspect-ratio: 4 / 3;
}

/* Wrapped media runs 35-40% of the reading column so the text beside it still
   has a readable measure. */
.topic-figure--right,
.topic-figure--left {
  width: 38%;
}

.topic-figure--right {
  float: right;
  margin: 6px 0 18px 26px;
}

.topic-figure--left {
  float: left;
  margin: 6px 26px 18px 0;
}

.topic-figure--center,
.topic-figure--full {
  margin: 24px 0;
}

.topic-figure--center .topic-thumb {
  aspect-ratio: 16 / 9;
}

/* Body figures keep the picture's own proportions; the author chose the
   image, so the page does not crop it. */
.topic-body .topic-figure img.topic-thumb {
  aspect-ratio: auto;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.topic-body .topic-figure--full {
  clear: both;
}

.topic-figure--w25 { width: 25%; }
.topic-figure--w33 { width: 33%; }
.topic-figure--w40 { width: 40%; }
.topic-figure--w50 { width: 50%; }

@media (max-width: 575px) {

  .topic-figure--right,
  .topic-figure--left,
  .topic-figure--w25,
  .topic-figure--w33,
  .topic-figure--w40,
  .topic-figure--w50 {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 20px 0;
  }
}

.topic-figure figcaption {
  padding-top: 10px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--topic-ink-soft);
}

/* Evidence is captioned and credited and has to read as evidence; an
   illustrative image is mood and carries no attribution. */
.topic-figure--evidentiary figcaption {
  margin-top: 10px;
  border-top: 1px solid var(--topic-rule);
}

.topic-figure__credit {
  display: block;
  padding-top: 5px;
  font-size: 0.75rem;
  color: var(--topic-muted);
}

/* Directory: search reset, sort apply, page links */

.topic-filter-clear {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--topic-brand);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.topic-filter-apply {
  margin-top: 12px;
  width: 100%;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: var(--topic-brand);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.topic-filter-apply:hover {
  filter: brightness(0.94);
}

.topic-pagination {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.topic-pagination .pagination {
  margin-bottom: 0;
}

/* book quote */

/* The block renders the CMS pull-quote's own wrapper classes, so the glyph,
   the flex row and the spacing all come from mainstyle.css and cannot drift
   away from the pages already using the component.

   The one thing restated here is the slant. mainstyle.css sets the paragraph
   italic !important, but the live Two-Minute Takeaways pages read upright:
   the editor switched italic off inside the CMS, one generated id rule per
   span (#i0kcwl{font-style:normal} and friends in the page's own CSS). The
   portal has no per-span ids to hang that on, so it says upright once, here,
   and matches what those pages actually look like rather than what the
   stylesheet default says they should. */
.topics-portal .new-quote-sec-cont .quote-cont-txt p,
.topics-portal .new-quote-sec-cont .quote-cont-txt p span,
.topics-portal .new-quote-sec-cont .quote-cont-txt p a {
  font-style: normal !important;
}

/* related */

/* Related entries and calls to action: one gadget before the sources
   (E0277 R7.c). */
.topic-next {
  display: grid;
  gap: 24px;
  padding-top: 28px;
  border-top: 1px solid var(--topic-rule);
}

.related-entries__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  padding-top: 14px;
}

.related-entries__card {
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 14px 16px;
  border: 1px solid var(--topic-rule);
  border-radius: 2px;
  text-decoration: none;
}

.related-entries__card:hover {
  background: var(--topic-surface-2);
}

.related-entries__card:hover h3 {
  color: var(--topic-brand);
}

.related-entries__card h3 {
  font-size: 1rem;
}

/* article footer */

/* This is a <footer> element, and style.css has a bare `footer { background:
   ...; padding-top: 80px; }` rule meant for the site's own footer at the
   bottom of every page. An element selector still applies to any <footer>
   on the page, so it was bleeding a grey-blue gradient and 80px of top
   padding into this one. Both are cancelled explicitly below. */
.topic-entry__footer {
  display: grid;
  gap: 24px;
  padding-top: 28px;
  background: none;
}

.topic-reviewed {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 8px;
  background: var(--topic-surface-2);
  font-size: 0.9rem;
  color: var(--topic-ink-soft);
}

.topic-sources {
  display: grid;
  gap: 14px;
}

.topic-sources ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  counter-reset: topic-src;
}

.topic-sources li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--topic-ink-soft);
}

.topic-sources li::before {
  counter-increment: topic-src;
  content: counter(topic-src) ".";
  font-weight: 700;
  color: var(--topic-brand);
  font-variant-numeric: tabular-nums;
}

.topic-sources a {
  color: var(--topic-brand);
}

.topic-cta-stack {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.topic-cta-card {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--topic-rule);
  border-radius: 8px;
  text-decoration: none;
}

.topic-cta-card:hover {
  background: var(--topic-surface-2);
}

.topic-cta-card__icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--topic-brand-soft);
  color: var(--topic-brand);
}

.topic-cta-card__text {
  display: grid;
  gap: 3px;
}

.topic-cta-card__text strong {
  font-size: 1rem;
  font-weight: 600;
  color: var(--topic-ink);
}

.topic-cta-card__text span {
  font-size: 0.85rem;
  color: var(--topic-muted);
}

/* The one filled button on the page, matching the Give treatment sitewide. */
.topic-cta-button {
  padding: 15px 26px;
  border-radius: 8px;
  background: var(--topic-accent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.topic-cta-button:hover {
  background: #3a8c10;
  color: #fff;
}

.topic-cta-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--topic-brand);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* --- video embeds -------------------------------------------------------- */

/* Video is embedded from its host and never rehosted, so the frame has to hold
   its own ratio rather than wait on an intrinsic size. */
.topic-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #101a2b;
}

.topic-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- CTA weights --------------------------------------------------------- */

/* One primary per entry, and the primary is the filled accent button — the
   same treatment the GIVE button carries in the site header. Everything else
   steps down from it. */
.topic-cta--secondary.topic-cta-button {
  background: transparent;
  border: 1px solid var(--topic-brand);
  color: var(--topic-brand);
}

.topic-cta--secondary.topic-cta-button:hover {
  background: var(--topic-brand);
  color: #fff;
}

.topic-cta--primary.topic-cta-card {
  border-color: var(--topic-accent);
}

/* --- sources ------------------------------------------------------------- */

.topic-sources__date {
  color: var(--topic-muted);
  font-variant-numeric: tabular-nums;
}