/* Blog index, category archives, search
   Loaded on the posts page, on category/tag/author/date archives, and on
   /?s= results. Never on a WooCommerce archive.

   This is the same object as assets/css/article.css, one step back: the black
   cover band with its 3px yellow rule, mono uppercase breadcrumbs and meta,
   yellow-square separators, the section break marked with a hairline and a
   short yellow tick, and the white card with a contained image, a mono topic
   line and an Oswald title. Someone arriving on a guide from this page should
   not be able to tell where the index ended and the article began.

   One thing is new, and it is the only new thing: the department board. The
   blog is two blogs -- 50 truck buying guides and 18 outdoor pieces -- and the
   first decision a reader makes here is which half they are in. So that
   decision gets the page's one piece of signage: the count set in a yellow
   block with the department beside it, the way the aisle is marked above the
   shelf in the store.

   Every color and face is an existing theme token. No new webfont. */

.hh2-blog {
  /* The header is fixed. Same 80px every other template reserves. */
  padding-top: 80px;
}

/* Cover */

.hh2-blog-cover {
  background: var(--hh-black-deep);
  color: var(--hh-white);
  border-bottom: 3px solid var(--hh-yellow);
  padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2rem, 5vw, 3rem);
}

.hh2-blog-crumbs {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.hh2-blog-crumbs a { color: rgba(255, 255, 255, 0.72); }
.hh2-blog-crumbs a:hover { color: var(--hh-yellow); }
.hh2-blog-crumbs span[aria-hidden] { color: rgba(255, 255, 255, 0.3); }
.hh2-blog-crumbs [aria-current] {
  color: var(--hh-yellow);
  font-weight: 600;
}

.hh2-blog-cover h1 {
  color: var(--hh-white);
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  margin: 0;
}

.hh2-blog-deck {
  margin: 1rem 0 0;
  max-width: 58ch;
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.74);
}

/* Same mono fact row, same yellow-square separator, as the article header. */
.hh2-blog-meta {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.hh2-blog-meta li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.hh2-blog-meta li + li::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--hh-yellow);
  flex: none;
}

/* Department board
   The page's one bold object. Everything around it stays quiet. */

.hh2-blog-board {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.hh2-blog-board__tile {
  display: flex;
  align-items: stretch;
  /* One per row on a phone: "Truck Accessories" does not fit beside a second
     tile at 390px without setting the label small enough to stop being a
     sign. Two up from 560. */
  flex: 1 1 100%;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--hh-white);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

@media (min-width: 560px) {
  .hh2-blog-board__tile {
    flex: 1 1 15rem;
    max-width: 24rem;
  }
}

.hh2-blog-board__tile:hover {
  border-color: var(--hh-yellow);
  background: rgba(255, 255, 255, 0.05);
}

/* The count is the sign. Oswald, black on yellow, in a block the full height
   of the tile -- the same figure/ground flip the site uses for a primary
   button, doing a different job. */
.hh2-blog-board__count {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 4rem;
  padding: 0.85rem 0.6rem;
  background: var(--hh-yellow);
  color: var(--hh-black);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.65rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

.hh2-blog-board__label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.7rem 1.1rem;
  min-width: 0;
}

.hh2-blog-board__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.hh2-blog-board__unit {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* The half you are reading. Solid yellow, and the count block inverts with
   it so the tile stays two-tone rather than becoming a flat slab. */
.hh2-blog-board__tile.is-active {
  background: var(--hh-yellow);
  border-color: var(--hh-yellow);
  color: var(--hh-black);
}

.hh2-blog-board__tile.is-active:hover { background: var(--hh-yellow-hover); }

.hh2-blog-board__tile.is-active .hh2-blog-board__count {
  background: var(--hh-black);
  color: var(--hh-yellow);
}

.hh2-blog-board__tile.is-active .hh2-blog-board__unit { color: rgba(26, 26, 26, 0.62); }

/* Sections */

/* .section's own padding is sized for full-bleed marketing bands: 8rem top
   and bottom at desktop, which on a listing is a screen of nothing between
   the cover and the first card. */
.hh2-blog .section,
.hh2-blog-band { padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(3rem, 7vw, 5rem); }

/* The article body marks a section with a hairline and a short yellow tick
   above the heading. Same mark here, same measurements. */
.hh2-blog-sechead {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hh-gray-300);
}

.hh2-blog-sechead::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 52px;
  height: 3px;
  background: var(--hh-yellow);
}

.hh2-blog-sechead h2 {
  margin: 0;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
}

.hh2-blog-sechead__count {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hh-gray-700);
}

.hh2-blog-banddeck {
  margin: 0.9rem 0 0;
  max-width: 60ch;
  color: var(--hh-gray-700);
}

/* Topic chips
   Real archive links, not a script filter -- each one is a page that already
   exists and can be shared, bookmarked and indexed. */

.hh2-blog-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
}

.hh2-blog-topics__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--hh-gray-300);
  background: var(--hh-white);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hh-black);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.hh2-blog-topics__chip span {
  color: var(--hh-gray-700);
  font-weight: 500;
}

.hh2-blog-topics__chip:hover,
.hh2-blog-topics__chip.is-active {
  background: var(--hh-black);
  border-color: var(--hh-black);
  color: var(--hh-white);
}

.hh2-blog-topics__chip:hover span,
.hh2-blog-topics__chip.is-active span { color: var(--hh-yellow); }

/* Cards
   The article page's "keep reading" card with a sentence added. The sentence
   is the post's own meta description, which is the only one-line summary of
   these guides anybody has written. */

.hh2-blog-grid {
  list-style: none;
  padding: 0;
  margin: clamp(1.5rem, 3.5vw, 2.25rem) 0 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .hh2-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1040px) {
  .hh2-blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.hh2-blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--hh-white);
  border: 1px solid var(--hh-gray-200);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.hh2-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--hh-black);
}

/* Featured images run from square product cutouts on white to 7.5:1 banners,
   so the plate contains rather than crops -- a cover crop cuts the truck out
   of half of them. Same decision as the article header. */
.hh2-blog-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  /* The card is a column flex container, so this box is a flex item and its
     automatic minimum size is its content's height -- which beats the ratio
     and lets a tall image set the box. Measured across the index: plates ran
     252 to 404px in the same row, so the images sat at five different sizes
     down a grid that is supposed to read as one. */
  min-height: 0;
  padding: 0.75rem;
  border-bottom: 1px solid var(--hh-gray-200);
  background: var(--hh-white);
}

.hh2-blog-card__media img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Two of the 68 posts have no featured image. */
.hh2-blog-card__media:empty { background: var(--hh-gray-100); }

.hh2-blog-card__media:empty::after {
  content: '';
  width: 44px;
  height: 5px;
  background: var(--hh-yellow);
}

.hh2-blog-card__body {
  flex: 1;
  padding: 1rem 1.1rem 1.1rem;
}

.hh2-blog-card__topic {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hh-gray-700);
}

.hh2-blog-card__time {
  flex: none;
  font-weight: 500;
  color: var(--hh-gray-500);
}

.hh2-blog-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--hh-black);
}

/* The heading holds the only link, and its ::after covers the card, so the
   whole tile is clickable without the title losing its place in the outline
   or the card growing a second copy of the same link. */
.hh2-blog-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.hh2-blog-card__desc {
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--hh-gray-700);
  /* Three lines. The descriptions run 136-208 characters, and the longest
     unclamped adds a fourth line to one card in a row of three. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hh2-blog-card__go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 1.1rem 1.1rem;
  border: 1px solid var(--hh-gray-300);
  color: var(--hh-black);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.hh2-blog-card__go svg { width: 16px; height: 16px; }

.hh2-blog-card:hover .hh2-blog-card__go {
  background: var(--hh-yellow);
  border-color: var(--hh-yellow);
}

/* See all / pagination / empty / search note */

.hh2-blog-more { margin: clamp(1.5rem, 3vw, 2rem) 0 0; }

.hh2-blog-more a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--hh-black);
  border-bottom: 3px solid var(--hh-yellow);
  transition: gap var(--transition-fast);
}

.hh2-blog-more a:hover { gap: 1.1rem; }
.hh2-blog-more svg { width: 18px; height: 18px; }

.hh2-blog-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
}

.hh2-blog-pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 0.7rem;
  border: 1px solid var(--hh-gray-300);
  color: var(--hh-black);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.hh2-blog-pager .page-numbers:hover {
  border-color: var(--hh-black);
  background: var(--hh-yellow);
}

.hh2-blog-pager .page-numbers.current {
  background: var(--hh-black);
  border-color: var(--hh-black);
  color: var(--hh-yellow);
}

.hh2-blog-pager .page-numbers.dots {
  border-color: transparent;
  color: var(--hh-gray-500);
}

.hh2-blog-empty {
  border: 1px solid var(--hh-gray-200);
  border-left: 3px solid var(--hh-yellow);
  background: var(--hh-gray-100);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  max-width: 46rem;
}

.hh2-blog-empty h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); }
.hh2-blog-empty p { margin: 0.75rem 0 0; color: var(--hh-gray-700); }

.hh2-blog-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.hh2-blog-empty__ghost {
  color: var(--hh-black);
  border: 2px solid var(--hh-black);
}

/* Someone who typed a part name into a browser search bar landed on the wrong
   surface. Say so plainly and hand them the right one, above the results
   rather than under them. Same panel as the empty state -- it is the same
   move, made before the reader has to ask for it. */
.hh2-blog-cue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
  padding: clamp(1rem, 3vw, 1.4rem) clamp(1rem, 3vw, 1.5rem);
  background: var(--hh-gray-100);
  border: 1px solid var(--hh-gray-200);
  border-left: 3px solid var(--hh-yellow);
}

.hh2-blog-cue p {
  margin: 0;
  max-width: 52ch;
  color: var(--hh-gray-900);
}

.hh2-blog-cue .btn { padding: 0.75rem 1.4rem; }
.hh2-blog-cue svg { width: 17px; height: 17px; }

/* Focus + motion */

.hh2-blog-cover a:focus-visible {
  outline: 3px solid var(--hh-yellow);
  outline-offset: 3px;
}

/* The link's ::after is the card, so outlining it rings the whole tile. */
.hh2-blog-card__link:focus-visible { outline: none; }
.hh2-blog-card__link:focus-visible::after {
  outline: 3px solid var(--hh-black);
  outline-offset: 3px;
}

.hh2-blog-topics__chip:focus-visible,
.hh2-blog-more a:focus-visible,
.hh2-blog-pager .page-numbers:focus-visible,
.hh2-blog-cue a:focus-visible,
.hh2-blog-empty a:focus-visible {
  outline: 3px solid var(--hh-black);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .hh2-blog-board__tile,
  .hh2-blog-topics__chip,
  .hh2-blog-card,
  .hh2-blog-card__go,
  .hh2-blog-more a,
  .hh2-blog-pager .page-numbers {
    transition: none;
  }

  .hh2-blog-card:hover { transform: none; }
  .hh2-blog-more a:hover { gap: 0.6rem; }
}