/* ==========================================================================
   All articles  —  the filtered, paged list under the featured grid

   The card is blog-hero.css's block at its smaller size; only the frame
   around it lives here. Held to the same 182 gutter and 1556 content width
   the blog frame uses.
   ========================================================================== */

/* Mono/Dark, the same ground as the hero. The dots band between the two is
   what separates them now -- a colour step as well would be saying it twice. */
.blog-list {
  padding: calc(120 * var(--s)) calc(182 * var(--s)) calc(140 * var(--s));
  background: var(--c-mono-dark);
  overflow: clip;
}

.blog-list__eyebrow { margin: 0; letter-spacing: 0.06em; }

/* --- filters ------------------------------------------------------------- */

.blog-list__filters { margin-top: calc(28 * var(--s)); }
.blog-list__filters-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(12 * var(--s));
}

/* The Book-a-demo sheet's business-type chips, to the value: square, 48 tall
   on a Mono/Light-Dark plate with a transparent 1px border that turns
   Accent/Yellow when chosen. The outline is the selected state there and it
   is the selected state here -- a yellow fill would be a different control
   wearing the same name. */
.blog-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(48 * var(--s));
  min-height: 38px;
  padding: 0 calc(26 * var(--s));
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--c-light-dark);
  font-family: var(--f-sans);
  font-size: max(11px, calc(16 * var(--s)));
  line-height: 1.2;
  color: var(--c-mono-light);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 200ms var(--ui-ease), background-color 200ms var(--ui-ease);
}
.blog-chip:hover { background: #1F2A3A; }
.blog-chip.is-on { border-color: var(--c-accent-yellow); }
.blog-chip:focus-visible { outline: 2px solid var(--c-accent-yellow); outline-offset: 2px; }

/* Half the height of the chips either side of it -- they are 48, so it is
   24 -- and centred on them by the row's own align-items. */
.blog-list__rule {
  flex: none;
  width: 1px;
  height: calc(24 * var(--s));
  min-height: 19px;
  margin: 0 calc(8 * var(--s));
  background: var(--c-hairline);
}

/* --- the grid ------------------------------------------------------------ */

/* Three across at 1556 with the frame's own 32 gutter: (1556 - 64) / 3. */
.blog-list__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(72 * var(--s)) calc(32 * var(--s));
  margin-top: calc(56 * var(--s));
}
.blog-list__grid .blog-card[hidden] { display: none; }

/* The smaller card's type steps down once there are three across rather than
   the featured grid's one. */
.blog-list__grid .blog-card__title { font-size: calc(24 * var(--s)); letter-spacing: calc(-0.72 * var(--s)); }
.blog-list__grid .blog-card__plate { height: calc(280 * var(--s)); }
.blog-list__grid .blog-card__kicker,
.blog-list__grid .blog-card__when { margin-top: calc(28 * var(--s)); font-size: max(11px, calc(14 * var(--s))); }
.blog-list__grid .blog-card__title { margin-top: calc(16 * var(--s)); }

.blog-list__empty {
  margin: calc(56 * var(--s)) 0 0;
  font-size: max(11px, calc(16 * var(--s)));
  color: var(--c-light-grey-02);
}

/* --- pager ---------------------------------------------------------------
   The testimonial carousel's controls, which the reader has already met on
   the contact page: the same 80 circle, the same hairline, the same label
   inside. Centred under the grid with the count between them. */

.blog-list__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(28 * var(--s));
  margin-top: calc(80 * var(--s));
}

.blog-list__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 68, down from the testimonial carousel's 80 -- 15% smaller. The label
     inside is unchanged; it was the circle that was heavy. */
  width: calc(68 * var(--s));
  height: calc(68 * var(--s));
  min-width: 46px;
  min-height: 46px;
  padding: 0;
  border: 1px solid var(--c-mono-light);
  border-radius: 50%;
  background: transparent;
  color: var(--c-mono-light);
  font-family: var(--f-sans);
  font-size: max(11px, calc(16 * var(--s)));
  font-weight: 300;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 240ms var(--ui-ease), opacity 240ms var(--ui-ease);
}
.blog-list__nav:hover,
.blog-list__nav:focus-visible { background: rgba(236, 247, 255, 0.08); }
/* Disabled rather than wrapping: with a count on screen, a Next that stops at
   the end is clearer than one that silently returns to the first page. */
.blog-list__nav[disabled] { opacity: 0.35; cursor: default; }
.blog-list__nav[disabled]:hover { background: transparent; }

.blog-list__count {
  margin: 0;
  min-width: calc(88 * var(--s));
  text-align: center;
  font-size: max(11px, calc(16 * var(--s)));
  letter-spacing: 0.08em;
  color: var(--c-mono-light);
}
.blog-list__count-sep { color: var(--c-light-grey-02); }

/* ==========================================================================
   Reflow
   ========================================================================== */

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  .blog-list { padding: 56px 20px 64px; }
  .blog-list__filters { margin-top: 20px; }
  .blog-list__filters-inner { gap: 8px; }
  .blog-chip { height: 40px; min-height: 40px; padding: 0 16px; font-size: 13px; }
  .blog-list__rule { height: 20px; min-height: 20px; margin: 0 4px; }
  .blog-list__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; margin-top: 32px; }
  .blog-list__grid .blog-card__plate { height: auto; aspect-ratio: 16 / 9; }
  .blog-list__grid .blog-card__kicker,
  .blog-list__grid .blog-card__when { margin-top: 14px; font-size: 12px; }
  .blog-list__grid .blog-card__title { margin-top: 10px; font-size: clamp(18px, 3.6vw, 24px); }
  .blog-list__pager { margin-top: 44px; gap: 18px; }
  .blog-list__count { min-width: 76px; font-size: 14px; }
}

@media (max-width: 767px), (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
  .blog-list__grid { grid-template-columns: 1fr; gap: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-chip, .blog-list__nav { transition: none; }
}

/* --- the band between the two sections -----------------------------------
   The front page's dots band is a 600 box whose rows sit from 217 to 568, so
   it carries 217 of empty above them and 32 below. Dropped in here unchanged
   that put roughly twice as much air between the featured three and the dots
   as between the dots and this list.

   Pulled up 160 and cut to 465, the rows sit 57 from each edge, so with the
   120 either section already has the gap is 177 on both sides. Scoped to the
   band on THIS page: the same partial is the separator on the front page and
   on About, both of which want their own spacing. */
.o-page--resources .dots {
  height: calc(465 * var(--s));
}
.o-page--resources .dots .dots__grid {
  top: calc(-160 * var(--s));
  bottom: auto;
  height: calc(600 * var(--s));
}

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  .o-page--resources .dots { height: 220px; }
  .o-page--resources .dots .dots__grid { top: 0; height: auto; bottom: 0; }
}