/* ============================================================================
   Blog detail - responsive ("v3 Modern")

   Desktop-first, matching the rest of the theme: blog-detail.css carries the
   full-size layout and this file steps it down. Same .html-blogpost-page scope,
   so nothing here reaches another page either.

   The side column keeps the rules it already had; nothing new was added to it.

   The steps, in order of what actually breaks:

     1400  the reading measure stops growing with the column
     1200  the hero title and the section headings come down a notch
     1024  the wide grids halve
     1000  the article and the side column stack
      768  phone type scale; the numbered step loses its badge column
      620  every remaining multi-column grid becomes a single column
      480  small phone
      380  the last squeeze
   ============================================================================ */

/* ---- 1400: keep the measure honest on a wide screen ---------------------- */
@media (max-width: 1400px) {
  .html-blogpost-page {
    --bd-measure: 700px;
  }
}

/* ---- 1200 ---------------------------------------------------------------- */
@media (max-width: 1200px) {
  .html-blogpost-page .ch-blog-hero      { padding: 60px 26px 48px; }
  .html-blogpost-page .ch-blog-hero h1   { font-size: 46px; }
  .html-blogpost-page .ch-blog-hero-sub  { font-size: 19px; }

  .html-blogpost-page .post-body                    { font-size: 18.5px; padding-top: 42px; }
  .html-blogpost-page .post-body p                  { font-size: 18.5px; }
  .html-blogpost-page .post-body > p:first-of-type  { font-size: 20px; }
  .html-blogpost-page .post-body h2                 { font-size: 34px; }
  .html-blogpost-page .post-body h3                 { font-size: 23px; }

  .html-blogpost-page .post-body .ch-bd-live-name { font-size: 29px; }

  .html-blogpost-page .ch-bd-faq-title       { font-size: 34px; }
  .html-blogpost-page .ch-bd-related-head h2 { font-size: 28px; }
}

/* ---- 1024 ----------------------------------------------------------------

   The sidebar stops being capped, and the seven-stop journey and the three-up
   card grids stop fitting on one line at this width.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .html-blogpost-page {
    --bd-measure: 680px;
  }

  .html-blogpost-page .ch-blog-hero    { padding: 52px 24px 44px; }
  .html-blogpost-page .ch-blog-hero h1 { font-size: 40px; margin-top: 22px; }

  .html-blogpost-page .post-body    { font-size: 18px; }
  .html-blogpost-page .post-body p  { font-size: 18px; }
  .html-blogpost-page .post-body h2 { font-size: 31px; margin: 40px 0 16px; }

  /* four stops a row rather than seven in a squeeze */
  .html-blogpost-page .post-body .ch-bd-journey {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .html-blogpost-page .post-body .ch-bd-grid.is-three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .html-blogpost-page .post-body .ch-bd-live {
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 20px;
  }

  .html-blogpost-page .ch-bd-related-grid {
    gap: 16px;
  }

  .html-blogpost-page .ch-bd-faq-title { font-size: 31px; }
}

/* ---- 1000: the two columns stop being two columns ------------------------

   The theme floats .center-2 and .side-2 side by side only above 1000px; below
   that they are already stacked, so the article takes the full width and the
   side column falls underneath it, where on a narrow screen it belongs.
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .html-blogpost-page .center-2,
  .html-blogpost-page .side-2 {
    float: none;
    width: 100%;
  }

  .html-blogpost-page .side-2 {
    margin-top: 32px;
  }
}

/* ---- 768: the phone type scale ------------------------------------------

   Sizes step down together rather than one at a time, which is what keeps the
   heading, the prose and the cards in proportion.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .html-blogpost-page {
    --bd-measure: 100%;
  }

  .html-blogpost-page .ch-blog-hero      { padding: 40px 18px 34px; }
  .html-blogpost-page .ch-blog-hero h1   { font-size: 31px; margin-top: 18px; letter-spacing: -.03em; }
  .html-blogpost-page .ch-blog-hero-sub  { font-size: 17px; margin-top: 16px; }
  .html-blogpost-page .ch-blog-hero-meta { margin-top: 20px; font-size: 11.5px; gap: 8px 14px; }

  .html-blogpost-page .ch-blog-hero-meta > * + *::before {
    margin-right: 14px;
  }

  .html-blogpost-page .post-body                    { font-size: 17px; line-height: 1.7; padding: 30px 0 4px; }
  .html-blogpost-page .post-body > p:first-of-type  { font-size: 18.5px; line-height: 1.65; }
  .html-blogpost-page .post-body p                  { font-size: 17px; line-height: 1.7; margin: 0 0 16px; }
  .html-blogpost-page .post-body h2                 { font-size: 25px; margin: 34px 0 14px; }
  .html-blogpost-page .post-body h3                 { font-size: 20px; margin: 26px 0 10px; }
  .html-blogpost-page .post-body h4                 { font-size: 17px; }
  .html-blogpost-page .post-body ul li,
  .html-blogpost-page .post-body ol li              { font-size: 16.5px; margin-bottom: 8px; }
  .html-blogpost-page .post-body blockquote         { padding: 18px 20px; font-size: 17px; border-radius: 14px; }
  .html-blogpost-page .post-body figure             { margin: 0 0 26px; }
  .html-blogpost-page .post-body img                { border-radius: 14px; }
  .html-blogpost-page .post-body hr                 { margin: 32px 0; }

  /* ---- blocks ---- */
  .html-blogpost-page .post-body .ch-bd-summary {
    gap: 12px;
    margin: 12px 0 32px;
    padding: 20px 20px;
    border-radius: 18px;
  }

    .html-blogpost-page .post-body .ch-bd-summary ul {
      grid-template-columns: minmax(0, 1fr);
      gap: 11px;
    }

      .html-blogpost-page .post-body .ch-bd-summary ul li {
        font-size: 16px;
      }

  .html-blogpost-page .post-body .ch-bd-chips {
    gap: 7px;
    margin-bottom: 20px;
    font-size: 13.5px;
  }

    .html-blogpost-page .post-body .ch-bd-chips li,
    .html-blogpost-page .post-body .ch-bd-chips span {
      padding: 6px 12px;
    }

  .html-blogpost-page .post-body .ch-bd-flow {
    gap: 6px;
    margin-bottom: 26px;
    font-size: 12.5px;
  }

    .html-blogpost-page .post-body .ch-bd-flow li {
      gap: 6px;
    }

      .html-blogpost-page .post-body .ch-bd-flow li > span,
      .html-blogpost-page .post-body .ch-bd-flow li > strong {
        padding: 6px 11px;
      }

  .html-blogpost-page .post-body .ch-bd-highlight {
    padding: 18px 20px;
    font-size: 17px;
    border-radius: 14px;
  }

  .html-blogpost-page .post-body .ch-bd-note {
    gap: 12px;
    margin-bottom: 32px;
    padding: 18px 18px;
    font-size: 16.5px;
    border-radius: 14px;
  }

  /* the number moves above the heading: a 44px column plus a 20px gap is a
     third of a phone screen, and the step's prose cannot spare it */
  .html-blogpost-page .post-body .ch-bd-steps {
    gap: 12px;
    margin-bottom: 32px;
  }

  .html-blogpost-page .post-body .ch-bd-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 20px 20px;
    border-radius: 16px;
  }

    .html-blogpost-page .post-body .ch-bd-step-num {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      font-size: 15px;
    }

    .html-blogpost-page .post-body .ch-bd-step h3 { margin: 0 0 8px; font-size: 20px; }
    .html-blogpost-page .post-body .ch-bd-step p  { font-size: 16.5px; margin-bottom: 10px; }

  .html-blogpost-page .post-body pre,
  .html-blogpost-page .post-body .ch-bd-code {
    padding: 14px 14px;
    font-size: 12.5px;
    line-height: 1.8;
  }

  .html-blogpost-page .post-body .ch-bd-ladder {
    font-size: 12.5px;
  }

    .html-blogpost-page .post-body .ch-bd-ladder li > span {
      padding: 6px 11px;
    }

  /* the bid list drops below the player rather than beside them */
  .html-blogpost-page .post-body .ch-bd-live {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 20px 20px;
    border-radius: 14px;
  }

    .html-blogpost-page .post-body .ch-bd-live-name { font-size: 25px; }
    .html-blogpost-page .post-body .ch-bd-live-sub  { font-size: 14px; }

  .html-blogpost-page .post-body .ch-bd-journey {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

    .html-blogpost-page .post-body .ch-bd-journey li {
      padding: 13px 5px;
      border-radius: 12px;
    }

      .html-blogpost-page .post-body .ch-bd-journey li > span {
        font-size: 12.5px;
      }

  .html-blogpost-page .post-body .ch-bd-compare {
    gap: 12px;
  }

  .html-blogpost-page .post-body .ch-bd-compare-card {
    padding: 20px 20px;
    border-radius: 16px;
  }

    .html-blogpost-page .post-body .ch-bd-compare-card ul li {
      font-size: 16px;
    }

  .html-blogpost-page .post-body .ch-bd-grid {
    gap: 10px;
  }

    .html-blogpost-page .post-body .ch-bd-grid > li,
    .html-blogpost-page .post-body .ch-bd-grid .ch-bd-card {
      padding: 16px 18px;
      border-radius: 14px;
    }

      .html-blogpost-page .post-body .ch-bd-grid strong { font-size: 17px; }
      .html-blogpost-page .post-body .ch-bd-grid span   { font-size: 15px; }

  .html-blogpost-page .post-body .ch-bd-table {
    padding: 4px 14px;
    border-radius: 14px;
  }

  .html-blogpost-page .post-body table    { font-size: 15px; }
  .html-blogpost-page .post-body table th { font-size: 11.5px; padding: 12px 8px 8px; }
  .html-blogpost-page .post-body table td { padding: 9px 8px; }

  .html-blogpost-page .post-body .ch-bd-tip   { padding: 16px 18px; border-radius: 14px; }
  .html-blogpost-page .post-body .ch-bd-tip p { font-size: 16px; }
  .html-blogpost-page .post-body .ch-bd-sec   { margin-bottom: 32px; }

  /* ---- furniture ---- */
  .html-blogpost-page .ch-bd-end       { padding-bottom: 32px; }
  .html-blogpost-page .ch-bd-faq-title { font-size: 25px; }
  .html-blogpost-page .ch-bd-faq-sub   { font-size: 16px; margin-bottom: 18px; }
  .html-blogpost-page .ch-bd-faq-list  { gap: 8px; }
  .html-blogpost-page .ch-bd-faq-item  { border-radius: 14px; }
  .html-blogpost-page .ch-bd-faq-q     { padding: 15px 18px; font-size: 16.5px; gap: 14px; }
  .html-blogpost-page .ch-bd-faq-a     { padding: 0 18px 16px; font-size: 16px; }

  .html-blogpost-page .blogpost-page .tags {
    margin-bottom: 30px;
    padding-top: 20px;
  }

  .html-blogpost-page .ch-bd-related          { padding-top: 40px; }
  .html-blogpost-page .ch-bd-related-head     { margin-bottom: 18px; }
  .html-blogpost-page .ch-bd-related-head h2  { font-size: 24px; }
  .html-blogpost-page .ch-bd-related-all      { font-size: 14px; }
  .html-blogpost-page .ch-bd-related-grid     { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .html-blogpost-page .ch-bd-related-card     { grid-template-rows: 110px auto; border-radius: 16px; }

    /* an odd third card would leave a hole, so the last one spans the row */
    .html-blogpost-page .ch-bd-related-card:nth-child(3):last-child {
      grid-column: 1 / -1;
    }

  .html-blogpost-page .ch-bd-related-thumb    { font-size: 26px; }
  .html-blogpost-page .ch-bd-related-body     { padding: 14px 16px 16px; gap: 6px; }
  .html-blogpost-page .ch-bd-related-title    { font-size: 17px; }
  .html-blogpost-page .ch-bd-related-read     { font-size: 14px; }

  .html-blogpost-page .blogpost-page .new-comment,
  .html-blogpost-page .blogpost-page .comment-list {
    margin-bottom: 24px;
    padding: 20px 20px;
    border-radius: 18px;
  }

    .html-blogpost-page .blogpost-page .new-comment .title strong,
    .html-blogpost-page .blogpost-page .comment-list .title strong {
      font-size: 18px;
    }

    .html-blogpost-page .blogpost-page .enter-comment-text {
      min-height: 120px;
      font-size: 16px;
    }

    /* a full-width target is easier to hit than a pill floated in the corner */
    .html-blogpost-page .blogpost-page .blog-post-add-comment-button {
      width: 100%;
      padding: 14px 20px;
    }

    .html-blogpost-page .blogpost-page .blog-comment .comment-body {
      font-size: 16.5px;
    }
}

@media all and (max-width: 767px) {
  .html-blogpost-page .post-body h2.ch-set-auc-h2 {
    font-size: 20px;
    margin: 0 0 10px;
  }

  .html-blogpost-page .post-body h2.ch-blog-hcpc-h2 {
    margin: 0 0 10px;
    font-size: 22px;
  }
  .html-blogpost-page .post-body .ch-better-cho-lede,
  .html-blogpost-page .post-body .ch-better-cho-h2,
  .html-blogpost-page .post-body .ch-better-cho-h3,
  .html-blogpost-page .post-body .ch-better-cho-numbers-h,
  .html-blogpost-page .post-body .ch-better-cho-cta-h {
    font-size: 20px;
  }
  .html-blogpost-page .post-body p,
  .ch-better-cho-trial-t,
  .html-blogpost-page .post-body .ch-better-cho-quote p,
  .html-blogpost-page .post-body .ch-better-cho-cta p {
    font-size: 16px;
  }
  .html-blogpost-page .post-body .ch-better-cho-stat-n {
    font-size: 25px;
  }
  .ch-better-cho-flow,
  .html-blogpost-page .post-body .ch-better-cho-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .ch-better-cho-card {
    min-height: 160px;
  }
  .ch-better-cho-checks {
    gap: 10px;
  }
}

/* ---- 620: one column, everywhere ----------------------------------------- */
@media (max-width: 620px) {
  .html-blogpost-page .post-body .ch-bd-cols,
  .html-blogpost-page .post-body .ch-bd-grid,
  .html-blogpost-page .post-body .ch-bd-grid.is-three,
  .html-blogpost-page .post-body .ch-bd-compare,
  .html-blogpost-page .ch-bd-related-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .html-blogpost-page .ch-bd-related-card,
  .html-blogpost-page .ch-bd-related-card:nth-child(3):last-child {
    grid-template-rows: 96px auto;
  }

  /* the journey is a sequence, so at this width it reads down the page as one
     rather than as an uneven grid */
  .html-blogpost-page .post-body .ch-bd-journey {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- 480 ----------------------------------------------------------------- */
@media (max-width: 480px) {
  .html-blogpost-page .ch-blog-hero    { padding: 30px 14px 26px; }
  .html-blogpost-page .ch-blog-hero h1 { font-size: 26px; line-height: 1.15; margin-top: 14px; }

  .html-blogpost-page .ch-blog-hero-eyebrow {
    padding: 6px 11px;
    font-size: 10px;
    letter-spacing: .12em;
  }

  .html-blogpost-page .ch-blog-hero-sub  { font-size: 16px; }
  .html-blogpost-page .ch-blog-hero-meta { font-size: 11px; }

  .html-blogpost-page .post-body                    { font-size: 16.5px; padding-top: 24px; }
  .html-blogpost-page .post-body p                  { font-size: 16.5px; }
  .html-blogpost-page .post-body > p:first-of-type  { font-size: 17.5px; }
  .html-blogpost-page .post-body h2                 { font-size: 22px; margin: 30px 0 12px; }
  .html-blogpost-page .post-body h3                 { font-size: 18.5px; }
  .html-blogpost-page .post-body ul li,
  .html-blogpost-page .post-body ol li              { font-size: 16px; padding-left: 22px; }
  .html-blogpost-page .post-body ol li              { padding-left: 30px; }
  .html-blogpost-page .post-body img                { border-radius: 10px; }

  .html-blogpost-page .post-body .ch-bd-summary,
  .html-blogpost-page .post-body .ch-bd-step,
  .html-blogpost-page .post-body .ch-bd-compare-card {
    padding: 17px 16px;
  }

  .html-blogpost-page .post-body .ch-bd-live      { padding: 17px 16px; }
  .html-blogpost-page .post-body .ch-bd-live-name { font-size: 22px; }
  .html-blogpost-page .post-body .ch-bd-highlight { padding: 16px 16px; font-size: 16.5px; }
  .html-blogpost-page .post-body .ch-bd-note      { padding: 16px 16px; font-size: 16px; }

  /* the mono panels are the one thing that cannot reflow, so they scroll */
  .html-blogpost-page .post-body pre,
  .html-blogpost-page .post-body .ch-bd-code {
    font-size: 11.5px;
  }

  .html-blogpost-page .ch-bd-faq-title { font-size: 22px; }
  .html-blogpost-page .ch-bd-faq-q     { padding: 14px 16px; font-size: 15.5px; gap: 12px; }
  .html-blogpost-page .ch-bd-faq-a     { padding: 0 16px 15px; font-size: 15.5px; }

  .html-blogpost-page .ch-bd-related-head h2 { font-size: 21px; }

  .html-blogpost-page .blogpost-page .new-comment,
  .html-blogpost-page .blogpost-page .comment-list {
    padding: 17px 16px;
  }
  .html-blogpost-page .post-body .ch-blog-rbid-checklist li {
    padding: 0;
    margin: 0;
  }
  .html-blogpost-page .post-body .ch-better-cho-stats li{
    padding-left: 0;
  }
  .html-blogpost-page .post-body .ch-better-cho-stat-n {
    font-size: 20px;
  }
  .html-blogpost-page .post-body .ch-better-cho-stat-l {
    font-size: 13px;
  }
  .html-blogpost-page .post-body .ch-better-cho-lede,
  .html-blogpost-page .post-body .ch-better-cho-h2,
  .html-blogpost-page .post-body .ch-better-cho-h3,
  .html-blogpost-page .post-body .ch-better-cho-numbers-h,
  .html-blogpost-page .post-body .ch-better-cho-cta-h {
    font-size: 17px;
  }
  .html-blogpost-page .post-body .ch-better-cho-sec,
  .ch-better-cho-cta {
    margin-top: 30px;
  }
}

/* ---- 380: the last squeeze ----------------------------------------------- */
@media (max-width: 380px) {
  .html-blogpost-page .ch-blog-hero h1 { font-size: 23px; }

  .html-blogpost-page .post-body    { font-size: 16px; }
  .html-blogpost-page .post-body p  { font-size: 16px; }
  .html-blogpost-page .post-body h2 { font-size: 20px; }

  .html-blogpost-page .post-body .ch-bd-journey {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
  }

    .html-blogpost-page .post-body .ch-bd-journey li {
      grid-template-columns: 22px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding: 11px 14px;
    }
}

/* ---- motion --------------------------------------------------------------

   The progress bar and the FAQ chevron are the only two things that move, and
   both of them are decoration.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .html-blogpost-page {
    scroll-behavior: auto;
  }

  .html-blogpost-page .ch-bd-progress-bar,
  .html-blogpost-page .ch-bd-faq-q::after,
  .html-blogpost-page .ch-bd-related-card {
    transition: none;
  }

  .html-blogpost-page .ch-bd-related-card:hover {
    transform: none;
  }
}

/* ---- print ---------------------------------------------------------------

   The article, and nothing else.
   -------------------------------------------------------------------------- */
@media print {
  .html-blogpost-page .ch-bd-progress,
  .html-blogpost-page .side-2,
  .html-blogpost-page .ch-bd-related,
  .html-blogpost-page .blogpost-page .new-comment {
    display: none !important;
  }

  .html-blogpost-page .center-2 {
    float: none;
    width: 100%;
  }

  .html-blogpost-page .post-body {
    max-width: none;
    font-size: 12pt;
  }

  .html-blogpost-page .post-body .ch-bd-live,
  .html-blogpost-page .post-body .ch-bd-compare-card.is-dark,
  .html-blogpost-page .post-body .ch-bd-journey li.is-final {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #999;
  }
}