/* Revision 11: client round 11 (blog). Loaded after the r6 files.

   The educational articles imported from eliteod.com: the /blog/ index and
   the topic archives (archive.php, home.php), the article (single.php, also
   the "Article" page template used by the Braces 101 guides) and the
   article card (template-parts/components/post-card.php).

   1. Article cards (.post-card, on the .tcard of revision-5.css)
   2. Listing: heading, topics (.bfilter), grid, page numbers
   3. Article hero (.ihero--article)
   4. Article body: reading column, "On this page", next step, trust card
   5. Related articles
   6. A guide index (Braces 101): introduction, the guides, the next step

   Revision 12 (blog QA): most imported photographs are the old site's
   banners with the title, the logo and a "Learn More" button lettered into
   them. Wherever they appear they keep their own 16:9 shape, so the
   lettering is never cut: full-width card photographs on a phone, and an
   article hero whose photograph scales down, rather than being cropped,
   when the first view is short.
*/


/* --------------------------------------------------------------------------
   1. Article cards
   -------------------------------------------------------------------------- */
.post-card .tcard__label { color: var(--ortho); }
.post-card.tcard--ped .tcard__label { color: var(--ped); }
.post-card .tcard__title { font-size: 1.12rem; line-height: 1.25; text-wrap: balance; }
.post-card .tcard__text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.post-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.45rem;
  color: #6b6279; font-size: 0.8rem; font-weight: 600; line-height: 1.4;
}
.post-card .tcard__media { aspect-ratio: 16 / 9; }
.post-card .tcard__media img { object-position: center 35%; }
.post-card .tcard__more { padding-top: 0.75rem; }

/* A phone: the photograph across the card in its own 16:9 shape (not the
   compact row of a treatment card, whose small square cut the lettering),
   then the text and the arrow link. */
@media (max-width: 47.99rem) {
  .post-card.tcard { flex-direction: column; align-items: stretch; }
  .post-card .tcard__media { flex: none; width: auto; height: auto; margin: 0.55rem 0.55rem 0; aspect-ratio: 16 / 9; border-radius: 0.75rem; }
  .post-card .tcard__media img { object-position: center; }
  .post-card .tcard__media--plain { aspect-ratio: 16 / 7; }
  .post-card .tcard__body { gap: 0.3rem; padding: 0.8rem 1rem 1rem; }
  .post-card .tcard__title { font-size: 1.04rem; line-height: 1.25; }
  .post-card .tcard__text { font-size: 0.86rem; line-height: 1.45; -webkit-line-clamp: 2; }
  .post-card__meta { font-size: 0.76rem; }
  .post-card .tcard__label { font-size: 0.72rem; letter-spacing: 0.1em; }
  .post-card .tcard__more { position: static; margin-top: 0.35rem; padding-top: 0; transform: none; }
  .post-card .tcard__more > span:first-child { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
}


/* --------------------------------------------------------------------------
   2. Listing: heading, topics, grid, page numbers
   -------------------------------------------------------------------------- */
.premium-inner .blog-list__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 3rem;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.premium-inner .blog-list__head h2 { margin-top: 0.9rem; }
.premium-inner .blog-list__lede { max-width: 36ch; margin: 0; color: var(--body-strong); font-size: 1.02rem; line-height: 1.6; }

.bfilter {
  display: grid; gap: 1.25rem; margin-bottom: clamp(2rem, 4vw, 2.75rem); padding: 1.35rem 1.5rem 1.5rem;
  border: 1px solid var(--line-soft, #e5e1ea); border-radius: 1.4rem; background: #fbfafc;
}
.bfilter__all { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bfilter__groups { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 0.9fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.25rem 2rem; }
.bfilter__group--more { grid-column: 1 / -1; }
.bfilter__label {
  margin: 0 0 0.65rem; color: #6b6279; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1.3; text-transform: uppercase;
}
.bfilter__list { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.bfilter__list > li { margin: 0; }
.bfilter__chip {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.6rem; padding: 0.3rem 0.4rem 0.3rem 0.95rem;
  border: 1px solid var(--line-soft, #e5e1ea); border-radius: 999px; background: #fff; color: var(--ink);
  font-size: 0.9rem; font-weight: 650; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.bfilter__n {
  display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding: 0 0.45rem;
  border-radius: 999px; background: var(--ortho-tint); color: var(--ortho); font-size: 0.75rem; font-weight: 700;
}
.bfilter__chip:hover { border-color: var(--ortho); color: var(--ortho); box-shadow: 0 10px 22px -18px rgba(26, 18, 54, 0.55); }
.bfilter__chip:focus-visible { outline: 3px solid var(--ortho); outline-offset: 2px; }
.bfilter__chip.is-current { border-color: var(--ortho); background: var(--ortho); color: #fff; }
.bfilter__chip.is-current .bfilter__n { background: rgba(255, 255, 255, 0.2); color: #fff; }
.bfilter__group--ped .bfilter__n { background: var(--ped-tint); color: var(--ped); }
.bfilter__group--ped .bfilter__chip:hover { border-color: var(--ped); color: var(--ped); }
.bfilter__group--ped .bfilter__chip.is-current { border-color: var(--ped); background: var(--ped); color: #fff; }
.bfilter__chip--guide { padding-right: 1rem; border-style: dashed; }
.bfilter__chip--guide svg { flex: none; color: var(--ortho); }
.bfilter__chip--guide:hover { border-style: solid; }

/* A phone or tablet: one row of topics that scrolls sideways, cluster names left out. */
@media (max-width: 63.99rem) {
  .bfilter {
    display: flex; gap: 0.5rem; margin: 0 calc(-1 * var(--gut)) 1.5rem; padding: 0.15rem var(--gut) 0.6rem;
    overflow-x: auto; border: 0; border-radius: 0; background: none; scroll-padding-inline: var(--gut);
    scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  .bfilter::-webkit-scrollbar { display: none; }
  /* The row fades out at the right edge, so it reads as one that scrolls;
     the extra end padding lets the last topic scroll clear of the fade. */
  .bfilter {
    padding-inline-end: calc(var(--gut) + 2.5rem);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent);
  }
  .bfilter__all, .bfilter__groups, .bfilter__group, .bfilter__list, .bfilter__list > li { display: contents; }
  .bfilter__label { display: none; }
  .bfilter__chip { flex: none; min-height: 2.75rem; font-size: 0.88rem; }
  /* The topic being read leads the row, so it is in view without scrolling. */
  .bfilter__chip.is-current { order: -1; }
  .premium-inner .blog-list__head { margin-bottom: 1.1rem; }
  .premium-inner .blog-list__lede { font-size: 0.95rem; }
}

/* Twelve to a page, then the page numbers, centred under the grid. */
.premium-inner .post-grid + .blog-pages { display: block; margin-top: clamp(2rem, 4vw, 3rem); }
.blog-pages .nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; }
.blog-pages .page-numbers {
  display: inline-grid; place-items: center; min-width: 2.9rem; height: 2.9rem; padding: 0 0.85rem;
  border: 1px solid var(--line-soft, #e5e1ea); border-radius: 0.8rem; background: #fff; color: var(--ink);
  font-weight: 700; text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease;
}
.blog-pages a.page-numbers:hover { border-color: var(--ortho); color: var(--ortho); }
.blog-pages .page-numbers.current { border-color: var(--ortho); background: var(--ortho); color: #fff; }
.blog-pages .page-numbers.dots { border-color: transparent; background: none; }


/* --------------------------------------------------------------------------
   3. Article hero: the inner hero, with the topic and dates above a
      smaller H1 (article titles are long) and the photograph in a wide
      frame, since many carry lettering that an arch would cut off.
   -------------------------------------------------------------------------- */
.premium-inner .ihero--article.ihero--ped { --lane: var(--ped); --lane-dark: var(--ped-dark); --lane-tint: #e5f5f6; --lane-tint-2: #f2faf9; }
.premium-inner .ihero--article h1 {
  max-width: 24ch; font-size: clamp(2rem, 1.25rem + 2.1vw, 3.05rem); line-height: 1.08; letter-spacing: -0.03em;
}
.premium-inner .ihero--article .breadcrumbs [aria-current] {
  display: inline-block; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.post-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.85rem; margin: 0 0 1rem; }
.post-kicker__topic {
  display: inline-flex; align-items: center; min-height: 2rem; padding: 0.2rem 0.85rem;
  border-radius: 999px; background: var(--lane-tint, #eee9f8); color: var(--lane, var(--ortho));
  font-size: 0.74rem; font-weight: 750; letter-spacing: 0.1em; line-height: 1.2; text-decoration: none; text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}
a.post-kicker__topic:hover { background: var(--lane, var(--ortho)); color: #fff; }
.post-kicker__meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0; color: #6b6279; font-size: 0.88rem; font-weight: 600; line-height: 1.4; }
.post-kicker__meta > span + span::before { content: "\00B7"; margin: 0 0.55rem; color: #a59db3; }
.premium-inner .ihero--article .post-review {
  display: flex; align-items: flex-start; gap: 0.55rem; margin-top: 0.9rem; color: var(--body-strong, #484159);
  font-size: 0.92rem; line-height: 1.5;
}
.post-review svg { flex: none; margin-top: 0.15rem; color: var(--lane, var(--ortho)); }
.post-review a { color: var(--lane, var(--ortho)); font-weight: 700; }
.post-review__when { display: block; color: #6b6279; }
.premium-inner .ihero--article .ihero__art {
  width: 100%; max-width: 40rem; aspect-ratio: 16 / 9; border-radius: 1.4rem 1.4rem 5rem 1.4rem;
}
.premium-inner .ihero--article .ihero__art img { width: 100%; height: 100%; object-fit: cover; }

/* A desktop: the frame keeps the photograph's own 16:9 shape rather than
   the fixed arch height of the other heroes. */
@media (min-width: 64rem) {
  body.premium-inner .ihero.ihero--article .ihero__visual .ihero__art {
    width: 100%; max-width: 40rem; height: auto; aspect-ratio: 16 / 9 !important;
    border-radius: 1.4rem 1.4rem 5rem 1.4rem;
  }
}
/* A tablet: one column (an article title needs the width), the photograph
   under the actions. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  body.premium-inner .ihero.ihero--article:not(.ihero--team) > .wrap > .ihero__in:not(.ihero__in--solo) { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  body.premium-inner .ihero.ihero--article:not(.ihero--team) .ihero__visual { width: 100%; max-width: 38rem; justify-self: start; }
  body.premium-inner .ihero.ihero--article:not(.ihero--team) .ihero__visual .ihero__art {
    width: 100%; max-width: none; height: auto; aspect-ratio: 16 / 9 !important; border-radius: 1.4rem 1.4rem 4rem 1.4rem;
  }
  body.premium-inner .ihero.ihero--article .ihero__copy h1 { max-width: 26ch; font-size: clamp(2.1rem, 1rem + 3.4vw, 2.8rem); line-height: 1.08; }
}

@media (max-width: 47.99rem) {
  .premium-inner .ihero--article h1 { font-size: clamp(1.6rem, 6.6vw, 2rem); line-height: 1.12; }
  /* The breadcrumb stays one line: the article's own title shortens. */
  .premium-inner .ihero--article .breadcrumbs { flex-wrap: nowrap; max-width: 100%; }
  .premium-inner .ihero--article .breadcrumbs > * { flex: none; white-space: nowrap; }
  .premium-inner .ihero--article .breadcrumbs > :last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .premium-inner .ihero--article .breadcrumbs [aria-current] { max-width: 100%; }
  .post-kicker { gap: 0.45rem 0.7rem; margin-bottom: 0; }
  .post-kicker__meta { font-size: 0.8rem; }
  .premium-inner .ihero--article .post-review { margin-top: 0; font-size: 0.85rem; }

  /* The photograph (r7-shared.css section 1 gives it the height the copy
     and the actions leave) is drawn at 16:9 inside that height: full width
     when there is room, smaller and centred on a short first view, never
     cropped. The copy column is the size container of the picture box, and
     the picture box that of the photograph. */
  :root body.premium-inner .ihero--article .ihero__in:has(> .ihero__visual) { container-type: inline-size; }
  :root body.premium-inner .ihero--article .ihero__in > .ihero__visual:has(> .ihero__art) {
    container-type: size; min-height: var(--r11-vis-min, 7rem); max-height: calc(100cqw * 9 / 16);
  }
  :root body.premium-inner .ihero--article .ihero__in > .ihero__visual > .ihero__art {
    flex: none; align-self: center; width: min(100cqw, 100cqh * 16 / 9); height: min(100cqh, 100cqw * 9 / 16);
    max-width: none; aspect-ratio: auto; border-radius: 1rem 1rem 2.25rem 1rem;
  }
  :root body.premium-inner .ihero--article .ihero__in > .ihero__visual > .ihero__art img { object-position: 50% 50%; }
  :root body.premium-inner .ihero--article .ihero__in:has(> .ihero__visual) > .ihero__copy > .lede { font-size: 0.95rem; line-height: 1.55; }
}
/* A short phone (375x667): article titles are long, so the H1 keeps the
   article size instead of the larger short-phone hero size (r7-shared.css). */
@media (max-width: 47.99rem) and (max-height: 700px) {
  :root body.premium-inner .ihero--article .ihero__in:has(> .ihero__visual) > .ihero__copy > h1 { font-size: clamp(1.45rem, 6.4vw, 1.6rem); line-height: 1.12; }
}


/* --------------------------------------------------------------------------
   4. Article body. One reading column (about 70 characters); beside it on
      a desktop "On this page" and the next step, which stays in view. On a
      phone the list folds at the top of the article and the next step and
      the trust card follow it.
   -------------------------------------------------------------------------- */
.premium-inner .post-main { padding-top: clamp(2.5rem, 5vw, 4.5rem); }
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.post-article { min-width: 0; }

.premium-inner .post-prose { max-width: 44rem; color: var(--body-strong, #484159); font-size: 1.08rem; line-height: 1.78; }
/* Paragraphs use the whole reading column (about 73 characters), as the lists
   and tables do, rather than the 68ch of site.css, so the right edge does not
   step in and out between them. */
.premium-inner .post-prose p { max-width: none; }
.premium-inner .post-prose > * { margin: 0; }
.premium-inner .post-prose > * + * { margin-top: 1.2rem; }
.premium-inner .post-prose h2 {
  margin-top: 2.75rem; color: var(--ink); font-size: clamp(1.45rem, 1.18rem + 1vw, 1.95rem); line-height: 1.2; letter-spacing: -0.02em;
  scroll-margin-top: calc(var(--header-h, 81px) + 1.5rem);
}
.premium-inner .post-prose h3 { margin-top: 2.1rem; color: var(--ink); font-size: clamp(1.16rem, 1.08rem + 0.4vw, 1.38rem); line-height: 1.3; }
.premium-inner .post-prose h4 { margin-top: 1.6rem; color: var(--ink); font-size: 1.06rem; line-height: 1.35; }
.premium-inner .post-prose :is(h2, h3, h4) + * { margin-top: 0.75rem; }
.premium-inner .post-prose > :first-child { margin-top: 0; }
.premium-inner .post-prose strong { color: var(--ink); font-weight: 700; }
.premium-inner .post-prose a { color: var(--lane, var(--ortho)); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.premium-inner .post-prose a:hover { text-decoration-thickness: 2px; }
.premium-inner .post-prose :is(ul, ol) { padding-left: 1.35rem; }
.premium-inner .post-prose li { padding-left: 0.2rem; }
.premium-inner .post-prose li + li { margin-top: 0.55rem; }
.premium-inner .post-prose li::marker { color: var(--lane, var(--ortho)); font-weight: 700; }
.premium-inner .post-prose :is(ul, ol) :is(ul, ol) { margin-top: 0.55rem; }
.premium-inner .post-prose img { display: block; max-width: 100%; height: auto; border-radius: 1rem; }
.premium-inner .post-prose blockquote { padding: 1rem 1.25rem; border-left: 3px solid var(--lane, var(--ortho)); border-radius: 0 0.9rem 0.9rem 0; background: var(--lane-tint-2, #f7f4fb); }

/* Tables: the column scrolls, not the page. The first row is the header. */
.premium-inner .post-table { overflow-x: auto; border: 1px solid var(--line-soft, #e5e1ea); border-radius: 1rem; background: #fff; }
.premium-inner .post-table table { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: 0.95rem; line-height: 1.5; }
.premium-inner .post-table :is(td, th) { padding: 0.75rem 0.95rem; border-bottom: 1px solid var(--line-soft, #e5e1ea); text-align: left; vertical-align: top; }
.premium-inner .post-table tr:last-child :is(td, th) { border-bottom: 0; }
.premium-inner .post-table tr:first-child :is(td, th) { background: var(--lane-tint-2, #f7f4fb); color: var(--ink); font-weight: 700; }

/* Questions and answers, one open at a time is not enforced: each opens alone. */
.premium-inner .post-prose details { border: 1px solid var(--line-soft, #e5e1ea); border-radius: 1rem; background: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.premium-inner .post-prose details + details { margin-top: 0.6rem; }
.premium-inner .post-prose details[open] { border-color: color-mix(in srgb, var(--lane, #462d88) 28%, #e5e1ea); box-shadow: 0 16px 34px -30px rgba(26, 18, 54, 0.45); }
.premium-inner .post-prose summary {
  position: relative; display: block; padding: 1rem 3.4rem 1rem 1.15rem; color: var(--ink); cursor: pointer;
  font-family: var(--display); font-size: 1.02rem; font-weight: 700; line-height: 1.35; list-style: none;
}
.premium-inner .post-prose summary::-webkit-details-marker { display: none; }
.premium-inner .post-prose summary::after {
  content: ""; position: absolute; top: 50%; right: 1.1rem; width: 0.55rem; height: 0.55rem; margin-top: -0.4rem;
  border-right: 2px solid var(--lane, var(--ortho)); border-bottom: 2px solid var(--lane, var(--ortho)); transform: rotate(45deg); transition: transform 0.2s ease;
}
.premium-inner .post-prose details[open] > summary::after { margin-top: -0.15rem; transform: rotate(-135deg); }
.premium-inner .post-prose summary:focus-visible { outline: 3px solid var(--lane, var(--ortho)); outline-offset: 2px; border-radius: 1rem; }
.premium-inner .post-prose details > :not(summary) { margin: 0; padding: 0 1.15rem; font-size: 1rem; line-height: 1.7; }
.premium-inner .post-prose details > :not(summary) + :not(summary) { padding-top: 0.75rem; }
.premium-inner .post-prose details > :last-child:not(summary) { padding-bottom: 1.1rem; }

/* The practice's own videos and embedded films. Films that follow one
   another sit two to a row from a tablet up. */
.premium-inner .post-prose .post-videos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 48rem) {
  .premium-inner .post-prose .post-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; }
}
.premium-inner .post-prose .post-video { margin: 0; }
.premium-inner .post-prose .post-video video { aspect-ratio: 16 / 9; object-fit: cover; }
.premium-inner .post-prose .post-video video { display: block; width: 100%; max-height: 30rem; border-radius: 1rem; background: #120c26; }
.premium-inner .post-prose .post-video figcaption { margin-top: 0.55rem; color: #6b6279; font-size: 0.88rem; font-weight: 600; }
.premium-inner .post-prose iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 1rem; }
.premium-inner .post-prose .wp-embedded-content, .premium-inner .post-prose .wp-block-embed { max-width: 100%; }

/* "On this page": folded at the top of the article below a desktop. */
.post-toc--inline { margin-bottom: 2rem; border: 1px solid var(--line-soft, #e5e1ea); border-radius: 1rem; background: #fbfafc; }
.post-toc--inline > summary {
  position: relative; display: flex; align-items: center; min-height: 3.25rem; padding: 0.75rem 3rem 0.75rem 1.1rem;
  color: var(--ink); cursor: pointer; font-size: 0.95rem; font-weight: 700; list-style: none;
}
.post-toc--inline > summary::-webkit-details-marker { display: none; }
.post-toc--inline > summary::after {
  content: ""; position: absolute; top: 50%; right: 1.2rem; width: 0.5rem; height: 0.5rem; margin-top: -0.35rem;
  border-right: 2px solid var(--ortho); border-bottom: 2px solid var(--ortho); transform: rotate(45deg);
}
.post-toc--inline[open] > summary::after { margin-top: -0.1rem; transform: rotate(-135deg); }
.post-toc ol { display: grid; gap: 0.1rem; margin: 0; padding: 0; list-style: none; }
.post-toc--inline ol { padding: 0 1.1rem 1rem; }
.post-toc a { display: block; padding: 0.45rem 0; color: var(--body); font-size: 0.92rem; font-weight: 600; line-height: 1.35; text-decoration: none; }
.post-toc a:hover, .post-toc a.is-current { color: var(--ortho); }
.post-toc--side { display: none; }

/* The next step. */
.post-aside { display: grid; align-content: start; gap: 1.25rem; min-width: 0; }
.post-next {
  --lane: var(--ortho); --lane-tint: #eee9f8; --lane-tint-2: #f7f4fb;
  padding: 1.5rem 1.4rem 1.4rem; border: 1px solid var(--line-soft, #e5e1ea); border-radius: 1.4rem;
  background: linear-gradient(180deg, var(--lane-tint-2) 0, #fff 11rem); box-shadow: var(--shadow-sm, 0 10px 28px -24px rgba(29, 16, 57, 0.3));
}
.post-next--ped { --lane: var(--ped); --lane-tint: #e5f5f6; --lane-tint-2: #f2faf9; }
.post-next .eyebrow { margin: 0; color: var(--lane); }
.premium-inner .post-next__h { margin: 0.75rem 0 0.45rem; font-size: 1.35rem; line-height: 1.2; }
.post-next__p { margin: 0; color: var(--body-strong, #484159); font-size: 0.95rem; line-height: 1.55; }
.post-next__docs { display: grid; gap: 0.35rem; margin: 1rem 0 1.1rem; padding: 0; list-style: none; }
.post-next__docs > li { margin: 0; }
.post-doc {
  display: flex; align-items: center; gap: 0.8rem; padding: 0.45rem 0.55rem 0.45rem 0.45rem; border: 1px solid transparent; border-radius: 0.95rem;
  color: var(--ink); text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease;
}
.post-doc:hover { border-color: var(--line-soft, #e5e1ea); background: #fff; }
.post-doc__photo { flex: none; width: 3.1rem; height: 3.1rem; overflow: hidden; border-radius: 999px 999px 0.7rem 0.7rem; background: var(--lane-tint); }
.post-doc__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.post-doc__text { display: grid; gap: 0.1rem; min-width: 0; }
.post-doc__name { font-family: var(--display); font-size: 0.98rem; font-weight: 700; line-height: 1.25; }
.post-doc__role { color: #6b6279; font-size: 0.8rem; font-weight: 600; line-height: 1.3; }
.post-doc:hover .post-doc__name { color: var(--lane); }
.post-next__book .btn { width: 100%; }
.post-next__links { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.post-next__links .go-link { width: 100%; }
.post-next--ped .go-link__ic { background: var(--ped-tint); color: var(--ped); }
.post-next--ped .go-link:hover { border-color: var(--ped); color: var(--ped); }
.post-next--ped .go-link:hover .go-link__ic { background: var(--ped); color: #fff; }
.post-next__call { justify-content: center; width: 100%; margin-top: 0.75rem; }
/* A dental emergency topic: the call leads; the booking button follows as
   the quieter, outlined choice. */
.post-next--urgent .post-next__book--call { margin-top: 1.1rem; }
.post-next--urgent .post-next__book:not(.post-next__book--call) .btn {
  border: 1px solid color-mix(in srgb, var(--lane) 45%, #fff); background: #fff; color: var(--lane); box-shadow: none;
}
.post-next--urgent .post-next__book:not(.post-next__book--call) .btn:hover { border-color: var(--lane); background: var(--lane-tint); color: var(--lane); }
.post-next--urgent .post-next__book:not(.post-next__book--call) .btn .btn__slot { color: var(--body, #5b5468); }
.post-end { min-width: 0; }
.post-end .post-trust { max-width: 44rem; }

@media (min-width: 64rem) {
  .post-layout { grid-template-columns: minmax(0, 44rem) minmax(19rem, 22.5rem); justify-content: space-between; column-gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .post-toc--inline { display: none; }
  .post-aside { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
  .post-article, .post-end { grid-column: 1; }
  .post-toc--side { display: block; }
  .post-toc__h { margin: 0 0 0.8rem; color: #6b6279; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
  .post-toc--side ol { border-left: 1px solid var(--line-soft, #e5e1ea); }
  .post-toc--side a { margin-left: -1px; padding: 0.4rem 0 0.4rem 1rem; border-left: 2px solid transparent; font-size: 0.88rem; transition: color 0.2s ease, border-color 0.2s ease; }
  .post-toc--side a:hover, .post-toc--side a.is-current { border-left-color: var(--ortho); }
  /* The next step stays in view while the article is read. */
  .post-next { position: sticky; top: calc(var(--header-h, 81px) + 1.5rem); }
}


/* --------------------------------------------------------------------------
   5. Related articles
   -------------------------------------------------------------------------- */
.premium-inner .post-related__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.premium-inner .post-related__head h2 { margin-top: 0.9rem; }
@media (max-width: 47.99rem) {
  .premium-inner .post-related__all { width: 100%; }
}
/* A children's dental topic: the eyebrow ("Keep reading", coloured by
   --lane in inner-redesign.css) and the "All articles" link in the
   pediatric teal. */
.premium-inner .post-related--ped { --lane: var(--ped); --lane-tint: var(--ped-tint); }
.post-related--ped .go-link__ic { background: var(--ped-tint); color: var(--ped); }
.post-related--ped .go-link:hover { border-color: var(--ped); color: var(--ped); }
.post-related--ped .go-link:hover .go-link__ic { background: var(--ped); color: #fff; }


/* --------------------------------------------------------------------------
   6. A guide index (Braces 101): the heading with the introduction beside
      it, the guides as cards, then the next step and the trust card side
      by side.
   -------------------------------------------------------------------------- */
.premium-inner .post-hub__head {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 4rem; align-items: end; margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.premium-inner .post-hub__head h2 { margin-top: 0.9rem; }
.premium-inner .post-hub__intro { max-width: 40rem; font-size: 1.05rem; line-height: 1.7; }
.premium-inner .post-hub-next { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.premium-inner .post-hub-next .post-trust { max-width: none; }
@media (min-width: 64rem) {
  .premium-inner .post-hub__head { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .premium-inner .post-hub-next { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 2rem; }
  .premium-inner .post-hub-next .post-next { position: static; }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .premium-inner .post-hub-next { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}