/* =========================================================
   CollegeHound blog — article layer
   =========================================================

   Blog-specific rules, on the tokens defined in marketing-chrome.css.
   Load order on a blog page: marketing.css, marketing-chrome.css, blog.css.

   NOT build output. Like marketing.css, homepage.css and
   marketing-chrome.css it needs BOTH a .gitignore negation AND a
   .dockerignore whitelist, or `COPY priv priv` drops it and the page ships
   unstyled with every local check passing. See the note in .dockerignore.
   ========================================================= */

/* ---------- Mobile width ----------
   `.blog-layout--post` is a grid whose track measures 288px at a 320px
   viewport, but `article.blog-article` rendered 370px inside it: 302px of
   content plus 2rem of padding each side plus a 2px border. A grid item's
   default `min-width: auto` refuses to shrink below its min-content size, so
   the item pushed its own track open and took the page with it, giving 66px
   of horizontal overflow on every post.

   This shipped on production long before the redesign. It is fixed here
   rather than left for the browse-page pass because the article PR owns the
   article reading experience, and knowingly shipping a frame wider than the
   phone it is read on is not something to inherit. */
.blog-layout > *,
.blog-layout--post > * {
  min-width: 0;
}

/* With the item free to shrink, anything genuinely wider than the column has
   to scroll on its own rather than push the page. Tables are the real case:
   the blob sets `width: 100%` on them, which does not stop a many-column
   table having a large min-content width. */
.blog-article__content.prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
}
.blog-article__content.prose pre {
  overflow-x: auto;
}

/* Long unbroken strings — a bare URL in a sources block is the usual one —
   would otherwise re-open the same overflow the min-width fix just closed. */
.blog-article__content.prose {
  overflow-wrap: break-word;
}

/* ---------- In-article CTA colour ----------
   `.blog-article__content.prose a` (specificity 0,3,1) outranks `.btn-primary`
   (0,1,0), so a restyled CTA button inside a post rendered blue text on the
   royal fill. Matched here rather than reaching for `!important`. */
.blog-article__content.prose a.btn-primary,
.blog-article__content.prose a.btn-primary:hover {
  color: var(--ch-white);
}

/* ---------- Article frame ----------
   Title, meta and byline move onto the design system's type roles and tokens.
   The article body itself is deliberately untouched: it is authored HTML in
   144 content files, carrying its own inline styles, and rewriting those is a
   separate project. */
.blog-article__title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--ch-navy);
  text-wrap: balance;
}

.blog-article__meta,
.blog-article__author,
.blog-article__date,
.blog-article__author-role {
  font-family: var(--font-body);
}

.blog-article__category {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: var(--fs-eyebrow);
  color: var(--ch-royal);
}

.blog-article__date,
.blog-article__author-role {
  color: var(--ch-gray);
}

.blog-article__author-name {
  color: var(--ch-slate);
}

.blog-article__header {
  border-bottom-color: var(--ch-beige);
}

/* ---------- Hit targets on tightly adjacent navigation ----------
   WCAG 2.5.8 excepts links inside a sentence, so ordinary body links and the
   inline CTAs that sit within a paragraph are left alone deliberately. These
   two groups are not that: they are stacked or abutting navigation controls,
   where a small target is a mis-tap into the neighbouring one.

   Breadcrumbs measured 22.4px and table-of-contents rows 39.6px at 320px.
   Padding is added and cancelled with negative margin so neither strip's
   spacing changes. */
.breadcrumbs .breadcrumb__link {
  display: inline-block;
  padding: 11px 2px;
  margin: -11px 0;
}
/* The table-of-contents row is sized by an inline `padding` in show.html.heex,
   which no stylesheet rule can outrank. Its padding was raised there instead,
   from 10px to 13px, taking the row from 39.6px to 45.6px. */


/* =========================================================
   Blog index — page styles
   =========================================================
   Moved out of a <style> block inside index.html.heex on 2026-09-09. It sat
   after the stylesheet link in document order, so at equal specificity it beat
   every rule in this file — the section labels stayed green while blog.css was
   asking for the eyebrow royal, and nothing in here could win. One file, one
   cascade: these page styles first, the design-system roles below them.

   Colours here are tokens wherever the system has an exact equivalent. A few
   literals remain (the deep cream page wash, the category tints) because no
   token matches them today; they are honest literals, not oversights. */

  [x-cloak] { display: none !important; }

  /* Colour comes from the design system now: the tokens in
     marketing-chrome.css, applied here and in blog.css. Nothing on these
     pages should carry a literal hex. Gold is the marker stroke only —
     never a text colour, never a button. */
  .blog-card__title a {
    color: var(--ch-navy);
  }
  .blog-card__title a:hover {
    color: var(--ch-navy);
    opacity: 0.8;
  }
  .blog-card__excerpt {
    color: var(--ch-slate);
  }
  .blog-card__category,
  .blog-card__read-more,
  .blog-article__category,
  .related-post__category {
    color: var(--ch-royal);
  }
  .blog-card__date {
    color: var(--ch-gray);
  }

  /* Responsive grids — can't rely on Tailwind classes in compiled CSS */
  .blog-grid-3col {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
  }
  @media (min-width: 768px) {
    .blog-grid-3col {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 1024px) {
    .blog-grid-3col {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .blog-grid-4col {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, 1fr);
  }
  @media (min-width: 768px) {
    .blog-grid-4col {
      gap: 12px;
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .blog-featured-guide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  @media (min-width: 768px) {
    .blog-featured-guide {
      flex-direction: row;
      gap: 32px;
    }
  }

  /* ═══ Blog index v2 (#1114) — ported from .prototypes/blog-v2/index.html.
     Classes are bx- prefixed so they can't collide with shared blog CSS.
     Scoped to this page: this <style> block only ships with the index. ═══ */
  .blog-main {
    /* Deep enough that white cards visibly pop (tint-perceptibility rule:
       fills need ~15% luminance separation or they read as white). */
    background: #f7f2e4;
  }

  /* Hero */
  .bx-herotitle {
    font-size: 24px;
  }
  .bx-sub-short,
  .bx-gshort {
    display: none;
  }

  /* Grade pills */
  .bx-grades {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 14px 0 4px;
    flex-wrap: wrap;
  }
  .bx-grades a {
    background: white;
    border: 1.5px solid #e4d9bc;
    color: var(--ch-navy);
    font-weight: 700;
    font-size: 13px;
    padding: 7px 14px;
    border-radius: 999px;
    text-decoration: none;
  }
  .bx-grades a:hover {
    background: var(--ch-cream);
    border-color: var(--ch-royal);
  }

  /* Two-column layout */
  .bx-layout {
    margin: 26px auto 60px;
    display: grid;
    grid-template-columns: 232px 1fr;
    gap: 30px;
    align-items: start;
  }
  @media (max-width: 900px) {
    .bx-layout {
      grid-template-columns: 1fr;
    }
    .bx-side {
      position: static;
      order: 2;
    }
  }

  /* Sidebar */
  .bx-side {
    position: sticky;
    top: 76px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .bx-catnav {
    background: white;
    border: 1px solid var(--ch-beige);
    border-radius: 12px;
    padding: 14px;
  }
  .bx-catnav h2 {
    font-family: "Montserrat", system-ui, sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ch-gray);
    margin: 0 0 8px;
  }
  .bx-catnav a {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ch-navy);
    text-decoration: none;
  }
  .bx-catnav a:hover,
  .bx-catnav a.active {
    background: #e8eefc;
  }
  .bx-catnav a span.n {
    color: var(--ch-gray);
    font-weight: 500;
  }
  .bx-shelley {
    background: white;
    border: 1px solid #e4d9bc;
    border-radius: 12px;
    padding: 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ch-slate);
  }
  .bx-shelley img {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #eae4d5;
    float: left;
    margin: 0 10px 4px 0;
  }
  .bx-shelley b {
    color: var(--ch-navy);
    display: block;
    margin-bottom: 2px;
  }
  .bx-side .blog-subscribe {
    margin: 0;
  }

  /* Section labels */
  .bx-seclabel {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: "Montserrat", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: #265632;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
  }

  /* Spotlight + trending row */
  .bx-row2 {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 22px;
    margin-bottom: 34px;
    align-items: start;
  }
  @media (max-width: 760px) {
    .bx-row2 {
      grid-template-columns: 1fr;
    }
  }
  /* Height follows content. An earlier pass stretched this card to match the
     Just Published column, which only moved the empty space from beside the
     card to inside it. The row aligns to the top instead. */
  .bx-spot {
    background: white;
    border: 1px solid var(--ch-beige);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(12, 30, 120, 0.05);
    overflow: hidden;
    display: block;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .bx-spot:hover,
  .bx-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(12, 30, 120, 0.08);
  }
  /* Formerly a 190px stage centring a Scout illustration. The illustration
     is gone; what carries meaning here is the category's tint, its border and
     the badge, so the band is sized to the badge rather than left as an empty
     box. */
  .bx-art {
    position: relative;
    height: 34px;
    display: flex;
    align-items: center;
  }
  .bx-badge {
    position: static;
    margin-left: 12px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ch-navy);
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .bx-body {
    padding: 16px 18px 18px;
  }
  .bx-spot h3 {
    font-family: "Montserrat", system-ui, sans-serif;
    color: var(--ch-slate);
    font-size: 19px;
    line-height: 1.3;
    margin: 0 0 7px;
  }
  .bx-spot p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ch-slate);
    margin: 0;
  }
  .bx-author {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--ch-gray);
  }
  .bx-author img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
  }
  .bx-trend {
    background: white;
    border: 1px solid var(--ch-beige);
    border-radius: 14px;
    padding: 8px 14px;
  }
  .bx-trend a {
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 11px 2px;
    border-bottom: 1px solid var(--ch-beige);
    text-decoration: none;
  }
  .bx-trend a:last-child {
    border-bottom: none;
  }
  .bx-trend b {
    font-size: 13.5px;
    color: var(--ch-slate);
    line-height: 1.35;
    font-weight: 700;
    display: block;
  }
  .bx-trend small {
    font-size: 11px;
    color: var(--ch-gray);
  }

  /* Latest card grid */
  .bx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px;
    margin-bottom: 40px;
  }
  .bx-card {
    background: white;
    border: 1px solid var(--ch-beige);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(12, 30, 120, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  /* Was 108px of empty colour, which read as a missing image. The band is
     now sized to the pill it carries: a category cue, not a picture frame. */
  .bx-card .bx-art {
    height: 34px;
  }
  .bx-card h3 {
    font-family: "Montserrat", system-ui, sans-serif;
    font-size: 15px;
    color: var(--ch-slate);
    line-height: 1.35;
    margin: 0 0 6px;
  }
  .bx-card p {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ch-slate);
    margin: 0;
  }
  .bx-card .bx-body {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .bx-card .bx-author {
    margin-top: auto;
    padding-top: 10px;
  }

  /* ═══ Lower zones: planning (by-grade + templates) + conversion.
     Full container width — the sidebar layout deliberately ends at Latest. ═══ */
  .bx-zone {
    margin: 0 0 36px;
  }
  .bx-panel {
    background: white;
    border: 1px solid var(--ch-beige);
    border-radius: 16px;
    padding: 26px 28px 28px;
  }
  .bx-zonetitle {
    font-family: "Montserrat", system-ui, sans-serif;
    color: var(--ch-navy);
    font-size: 21px;
    font-weight: 800;
    text-align: center;
    margin: 0 0 4px;
  }
  .bx-zonesub {
    text-align: center;
    color: var(--ch-gray);
    font-size: 13.5px;
    margin: 0 0 18px;
  }
  .bx-grades4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  @media (max-width: 760px) {
    .bx-grades4 {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .bx-grades4 a {
    background: #b8cee0;
    border: 1px solid #9db4c9;
    border-radius: 12px;
    padding: 18px 14px;
    text-align: center;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .bx-grades4 a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(12, 30, 120, 0.12);
  }
  .bx-grades4 .g {
    display: block;
    font-family: "Montserrat", system-ui, sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: var(--ch-navy);
  }
  .bx-grades4 b {
    display: block;
    font-size: 13px;
    color: var(--ch-navy);
    margin: 2px 0 4px;
  }
  .bx-grades4 small {
    display: block;
    font-size: 12px;
    color: #334155;
    line-height: 1.4;
  }

  /* Template cards — same visual language as .bx-card, text-first */
  .bx-tgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px;
  }
  .bx-tcard {
    background: white;
    border: 1px solid var(--ch-beige);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(12, 30, 120, 0.05);
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .bx-tcard:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(12, 30, 120, 0.08);
  }
  .bx-thead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .bx-tlabel {
    background: #ecdca6;
    color: #6b5416;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 9px;
    border-radius: 999px;
  }
  .bx-tcard h3 {
    font-family: "Montserrat", system-ui, sans-serif;
    font-size: 15px;
    color: var(--ch-slate);
    line-height: 1.35;
    margin: 0 0 6px;
  }
  .bx-tcard p {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ch-slate);
    margin: 0 0 12px;
  }
  .bx-tfoot {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--ch-gray);
  }
  .bx-tfoot .open {
    color: var(--ch-royal);
    font-weight: 700;
    font-size: 12.5px;
  }

  /* Conversion banner — navy anchor, soft-wheat button */
  .bx-conv {
    background: var(--ch-navy);
    border-radius: 16px;
    padding: 36px 28px;
    text-align: center;
    margin: 8px 0 56px;
  }
  .bx-conv h3 {
    font-family: "Montserrat", system-ui, sans-serif;
    color: white;
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 8px;
  }
  .bx-conv p {
    color: #cdd7f4;
    font-size: 14.5px;
    max-width: 520px;
    margin: 0 auto 20px;
    line-height: 1.6;
  }
  .bx-conv a {
    display: inline-block;
    background: #d9c17e;
    color: var(--ch-navy);
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.15s;
  }
  .bx-conv a:hover {
    opacity: 0.9;
  }

  /* Mobile hero compression: the first Spotlight card should start inside
     the initial viewport — hero works harder, not taller. */
  @media (max-width: 640px) {
    .blog-header {
      padding-top: 18px !important;
    }
    .bx-herorow {
      gap: 8px !important;
    }
    .bx-herotitle {
      font-size: 20px;
      line-height: 1.25;
    }
    .bx-herosub {
      font-size: 13px !important;
      margin-top: 2px !important;
    }
    .bx-sub-long {
      display: none;
    }
    .bx-sub-short {
      display: inline;
    }
    /* Grade pills: one compact horizontal scroll row */
    .bx-grades {
      flex-wrap: nowrap;
      overflow-x: auto;
      justify-content: flex-start;
      margin: 10px -16px 0;
      padding: 2px 16px;
      scrollbar-width: none;
    }
    .bx-grades::-webkit-scrollbar {
      display: none;
    }
    .bx-grades a {
      flex-shrink: 0;
      font-size: 12px;
      padding: 5px 12px;
    }
    .bx-glong {
      display: none;
    }
    .bx-gshort {
      display: inline;
    }
  }

/* =========================================================
   Browse pages — index, category, search, archive, templates
   =========================================================
   Type and surface roles for the browse experience, on the same tokens the
   homepage uses. Structure, URLs, metadata, schema, search behaviour and
   every CTA's copy and destination are untouched; this is presentation. */

/* ---------- Page titles ---------- */
.blog-header__title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--ch-navy);
  text-wrap: balance;
}
.bx-herotitle {
  font-size: clamp(30px, 3.4vw, 44px);
}

/* ---------- Section headings ---------- */
.bx-zonetitle,
.blog-section-heading,
.category-nav__heading {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ch-navy);
  text-wrap: balance;
}

/* ---------- Section labels ----------
   The eyebrow role: uppercase, letterspaced, royal. These used to be green or
   gold; both are reserved elsewhere in the system. */
.bx-seclabel {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ch-royal);
}

/* ---------- Body copy ---------- */
.bx-herosub,
.bx-zonesub,
.bx-body p,
.bx-card p,
.bx-spot p {
  font-family: var(--font-body);
  color: var(--ch-slate);
}
.bx-body h3,
.bx-card h3,
.bx-spot h3,
.bx-tcard h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ch-navy);
  text-wrap: balance;
}

/* ---------- Card surfaces ----------
   One border colour and one radius across every card on the browse pages,
   from the tokens rather than five near-identical greys. */
.bx-spot,
.bx-card,
.bx-tcard,
.bx-panel {
  border-color: var(--ch-beige);
  border-radius: var(--radius-card);
}

/* ---------- Links ---------- */
.blog-main a:not(.btn):not(.bx-spot):not(.bx-card):not(.bx-tcard) {
  color: var(--ch-royal);
}

/* ---------- Card scanning ----------
   Cards should read as choices, not miniature articles: a title that occupies
   a predictable band, an excerpt clamped so no card runs long, and the byline
   pinned to the bottom so every footer in a row sits on one line. */
.bx-card h3,
.bx-tcard h3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bx-card p,
.bx-tcard p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bx-card .bx-author {
  margin-top: auto;
  padding-top: 10px;
  font-size: 12px;
  color: var(--ch-gray);
}
/* The portrait and full credentials belong to the Spotlight and the author
   panel. Repeated down a grid of eighteen cards they are noise, not trust. */
.bx-card .bx-author img {
  display: none;
}

/* ---------- Interaction states ----------
   Pills and cards were reading as static labels. Every one of them is a link,
   so each gets hover, focus-visible and active. */
.bx-grades a,
.bx-catnav a,
.bx-grades4 a,
.bx-card,
.bx-spot,
.bx-tcard {
  transition: background-color 120ms ease, border-color 120ms ease,
    transform 120ms ease, box-shadow 120ms ease;
}
.bx-grades a:focus-visible,
.bx-catnav a:focus-visible,
.bx-grades4 a:focus-visible,
.bx-card:focus-visible,
.bx-spot:focus-visible,
.bx-tcard:focus-visible {
  outline: 2px solid var(--ch-royal);
  outline-offset: 3px;
}
.bx-grades a:active,
.bx-grades4 a:active,
.bx-card:active,
.bx-spot:active,
.bx-tcard:active {
  transform: translateY(0);
}
.bx-catnav a:hover {
  background: var(--ch-cream);
  color: var(--ch-royal);
}
.bx-catnav a[aria-current="page"] {
  background: var(--ch-cream-active);
  font-weight: 700;
}
.bx-tcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(12, 30, 120, 0.08);
}

/* ---------- Sidebar ----------
   Categories is the primary control. The bio and the email form were competing
   with it at equal visual weight in a narrow column, so they recede: the bio
   is clamped to a few lines and the signup drops below the fold of the
   category list rather than sitting alongside it. */
.bx-side {
  gap: 14px;
}
.bx-side .bx-catnav {
  order: 0;
}
.bx-side .bx-shelley {
  order: 1;
  font-size: 13px;
}
.bx-side .bx-shelley p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bx-side .blog-subscribe {
  order: 2;
}

/* The hero row is a shortcut into the explained grade section below, not a
   second copy of it. Saying so is cheaper than making them look different. */
.bx-gradeslabel {
  margin: 16px 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ch-gray);
}