/* ============================================================
   BLOG INDEX — masthead, tab strip, hero, post grid
   (mockup: appended to a copy of site.css for preview only)
   ============================================================ */

.bx-masthead {
  border-bottom: 1px solid var(--grid);
  padding: 30px 0 0;
}
.bx-masthead-inner {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 22px;
}
.bx-wordmark h1 {
  font-size: clamp(30px, 4.6vw, 46px); line-height: 1.04;
  letter-spacing: -0.02em; margin: 0 0 6px;
}
.bx-wordmark h1 em { font-style: normal; color: var(--orange); }
.bx-wordmark p { color: var(--ink-3); font-size: 15px; margin: 0; }

/* Search sits with the masthead, not in the tab strip: it searches the whole
   blog, so pairing it with a per-category control would misread. */
.bx-search { display: flex; gap: 8px; align-items: center; }
.bx-search input {
  width: min(280px, 60vw); font-family: inherit; font-size: 14.5px;
  padding: 11px 15px; border: 1px solid var(--grid); border-radius: 999px;
  background: #fff; color: var(--ink);
}
.bx-search input:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent; }
.bx-search button {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 600; color: #fff;
  background: var(--orange); border: 0; border-radius: 999px; padding: 11px 20px;
}
.bx-search button:hover { background: var(--orange-deep); }
.bx-search svg { width: 15px; height: 15px; }

/* Tab strip. Scrolls horizontally on narrow screens rather than wrapping into
   a second row that pushes the hero down. */
.bx-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.bx-tabs::-webkit-scrollbar { display: none; }
.bx-tab {
  flex: 0 0 auto; cursor: pointer; font-family: inherit; font-size: 14.5px;
  font-weight: 500; color: var(--charcoal); background: none; border: 0;
  border-bottom: 3px solid transparent; padding: 12px 16px 11px;
  white-space: nowrap; transition: color .15s ease, border-color .15s ease;
}
.bx-tab:hover { color: var(--ink); }
.bx-tab[aria-selected="true"] { color: var(--orange-deep); border-bottom-color: var(--orange); font-weight: 600; }
.bx-tab .bx-tab-n { color: var(--ink-3); font-weight: 500; font-size: 12.5px; margin-left: 5px; }

/* Featured hero with an overlay card, as on the reference. The card sits on
   the image on desktop and drops below it on mobile, where an overlay would
   cover most of the photo. */
.bx-hero { position: relative; margin: 26px 0 0; }
.bx-hero-img {
  display: block; width: 100%; height: clamp(260px, 42vw, 460px);
  object-fit: cover; border-radius: 22px; background: var(--linen);
}
.bx-hero-card {
  background: #fff; border-radius: 18px; padding: clamp(20px, 2.6vw, 28px);
  box-shadow: 0 20px 50px -28px rgba(0,0,0,.45);
}
@media (min-width: 860px) {
  .bx-hero-card { position: absolute; left: 34px; bottom: 34px; width: min(560px, 58%); }
}
@media (max-width: 859px) {
  .bx-hero-card { margin: -34px 14px 0; position: relative; }
}
.bx-hero-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.bx-chip {
  display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--orange-deep); background: var(--orange-soft);
  border-radius: 999px; padding: 5px 11px;
}
.bx-dot { color: var(--ink-3); font-size: 13px; }
.bx-hero-card h2 { font-size: clamp(20px, 2.6vw, 28px); line-height: 1.22; margin: 0 0 10px; }
.bx-hero-card h2 a { color: var(--ink); text-decoration: none; }
.bx-hero-card h2 a:hover { color: var(--orange-deep); }
.bx-hero-card p { color: var(--charcoal); font-size: 15px; line-height: 1.6; margin: 0 0 16px; }

.bx-btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-size: 14.5px; font-weight: 600; color: #fff; background: var(--ink);
  border-radius: 999px; padding: 11px 22px; border: 0; cursor: pointer; font-family: inherit;
}
.bx-btn:hover { background: var(--orange-deep); }
/* display:flex beats the [hidden] attribute at equal specificity (same trap
   as .pdp-mort-tweaks in site.css) — without this, js/blog-index.js setting
   more.hidden = true left "Read more posts" visibly showing, dead, whenever
   nothing remained to load. */
.bx-btn[hidden] { display: none; }
.bx-btn--ghost { background: none; color: var(--ink); border: 1px solid var(--grid); }
.bx-btn--ghost:hover { background: var(--orange-soft); border-color: var(--orange); color: var(--orange-deep); }

/* Post grid */
.bx-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 44px 0 18px; }
.bx-sec-head h2 { font-size: clamp(20px, 2.4vw, 26px); margin: 0; }
.bx-count { color: var(--ink-3); font-size: 14px; }

.bx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 26px; }
.bx-card { display: flex; flex-direction: column; text-decoration: none; }
.bx-card-img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 16px; background: var(--linen); margin-bottom: 13px;
}
.bx-card h3 { font-size: 17px; line-height: 1.34; margin: 7px 0 7px; color: var(--ink); }
.bx-card:hover h3 { color: var(--orange-deep); }
.bx-card p { color: var(--charcoal); font-size: 14px; line-height: 1.55; margin: 0; }
.bx-card-meta { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-3); }

.bx-more { display: flex; justify-content: center; margin: 34px 0 8px; }
/* The back-to-top state of that slot. Quieter than "Read more posts": it is a
   way out rather than an invitation, so it should not compete with the cards
   above it for attention. */
.bx-top { gap: 8px; }
.bx-top span { font-size: 15px; line-height: 1; }
.bx-empty { padding: 46px 0; text-align: center; color: var(--ink-3); }
.bx-empty strong { display: block; color: var(--ink); font-size: 17px; margin-bottom: 6px; }

@media (max-width: 560px) {
  /* The chip takes a full line at this width, which left the separator that
     follows it stranded at the end of the row on its own. */
  .bx-hero-meta { gap: 7px; }
  .bx-hero-meta .bx-chip { flex-basis: 100%; }
  .bx-hero-meta .bx-chip + .bx-dot { display: none; }
}

/* Cards past the first ten, and anything filtered out. A class rather than
   an inline style so the no-JS view can still show every card: without the
   script nothing ever gets this class removed, so the page ships the first
   ten visible and the rest revealed by the button — see the note in
   build_blog_index.py about why the markup is server-rendered. */
.bx-card.is-hidden { display: none; }
.bx-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.bx-masthead .crumbs { margin-bottom: 14px; }