/* Article cards (MB-10; contract umbraco/blocks/articleCardsBlock.md; generalised from Boyd caseStudyTeasers).
   Mobile first. Cards are the shared card (css/shared/pageCard.css, MB-1); this file lays them out (Grid or the MB-3
   carousel) and adds the card styles (MB-37: Plain, no box). Colours come from the band (css/shared/themes.css) and tokens only. A site
   restyles through the --article-cards-* properties below or its own CSS. */

.article-cards {
  --article-cards-gap: var(--grid-gap);
  --article-cards-head-space: var(--space-10);
  --article-cards-tag-bg: var(--theme-plain-bg);   /* category over a photo: a solid ground, never the photo */
  --article-cards-tag-fg: var(--theme-plain-text);
  --article-cards-tag-inset: var(--space-4);
  --article-cards-full-gap: 0px;                   /* MB-141 full width: space between the photo and the text */
  padding-block: var(--section-space);
}

.article-cards__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* Heading group */
.article-cards__head { max-width: var(--container-text, 42rem); margin-bottom: var(--article-cards-head-space); }
.article-cards__eyebrow { margin: 0 0 var(--space-4); }
.article-cards__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-heading);
  overflow-wrap: break-word;
}
/* MB-25: optional intro line and View all link under the heading. */
.article-cards__intro { margin: var(--space-4) 0 0; color: var(--color-text); overflow-wrap: break-word; }
.article-cards__all { margin: var(--space-6) 0 0; }

/* Lists */
.article-cards__list { margin: 0; padding: 0; list-style: none; }
.article-cards__item { min-width: 0; }
.article-cards .page-card__title,
.article-cards .page-card__text { overflow-wrap: anywhere; }

/* Grid: 1 column, 2 from 768 px, 3 from 1024 px (photo beside the text: 1, then 2 from 1024 px). A row that isn't full
   leaves its space on the right. Plain lays out as Photo on top. */
.article-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--article-cards-gap);
}
@media (min-width: 768px) {
  :is(.article-cards--photo-top, .article-cards--plain) .article-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  :is(.article-cards--photo-top, .article-cards--plain) .article-cards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .article-cards--photo-beside .article-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* MB-37 Card width "Always a third": three columns from the left whatever the card style or count, and stronger
     (three classes) than a site's own one- or two-card widths, so a lone card stays a third wide on the left. */
  .article-cards.article-cards--thirds .article-cards__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    margin-inline: 0;
  }
}

/* Slider (MB-3 carousel): cards in view. Photo on top 1 / 2 from 768 px / 3 from 1280 px; beside 1 / 2 from 1024 px. */
.article-cards__carousel { --carousel-gap: var(--article-cards-gap); margin: 0; }
@media (min-width: 768px) {
  :is(.article-cards--photo-top, .article-cards--plain) .article-cards__carousel { --carousel-per-view: 2; }
}
@media (min-width: 1024px) {
  .article-cards--photo-beside .article-cards__carousel { --carousel-per-view: 2; }
}
@media (min-width: 1280px) {
  :is(.article-cards--photo-top, .article-cards--plain) .article-cards__carousel { --carousel-per-view: 3; }
}
/* MB-107 Cards in view "Three from 1200 pixels wide": photo on top shows 3 from 1200 px (Standard: from 1280 px). */
@media (min-width: 1200px) {
  :is(.article-cards--photo-top, .article-cards--plain) .article-cards__carousel--three-from-1200 { --carousel-per-view: 3; }
}
.article-cards__carousel .page-card { height: 100%; }

/* Photo on top: the category sits over the photo's top-left corner, on its own solid ground. */
.article-cards .article-card--tag-on-photo .page-card__eyebrow {
  position: absolute;
  top: var(--article-cards-tag-inset);
  left: var(--article-cards-tag-inset);
  max-width: calc(100% - 2 * var(--article-cards-tag-inset));
  padding: var(--eyebrow-pill-padding, 0.3em 0.9em);
  border-radius: var(--eyebrow-radius);
  background: var(--article-cards-tag-bg);
  color: var(--article-cards-tag-fg);
}

/* MB-37 Plain: the light card. No box (border and ground drop away), the photo's corners all rounded, the title and
   text straight under it. In the grid the focus ring sits just outside the card, on the band, not over the photo. */
.article-cards .article-card--plain { border-color: transparent; background: transparent; }
.article-cards .article-card--plain .page-card__media { border-radius: var(--card-radius); }
.article-cards .article-card--plain .page-card__body { padding: var(--space-4) 0 0; }
.article-cards .article-cards__grid .article-card--plain .page-card__link:focus-visible::after { outline-offset: 3px; }

/* Photo beside the text (from 768 px): the photo fills the card's height on the left, half the card's width.
   Selectors start with .article-cards so they win over css/shared/pageCard.css, which the page loads after this file. */
@media (min-width: 768px) {
  .article-cards .article-card--photo-beside { flex-direction: row; }
  .article-cards .article-card--photo-beside .page-card__media {
    flex: 0 0 50%;
    border-radius: var(--card-radius) 0 0 var(--card-radius);
  }
  .article-cards .article-card--photo-beside .page-card__media :where(picture, img) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* MB-141 Card width "The full width, photo beside the text" (FuelChief's featured case study, measured from its saved CSS):
   one card a row at every width. From 992 px (the source's breakpoint) the photo and the text share the card half and half
   (gap --article-cards-full-gap), the photo filling the card's height (at least its 7 : 3 crop); below 992 px the photo is on
   top at 7 : 3. Three classes on the grid, so it wins over the card styles' columns and a site's one- or two-card widths. */
.article-cards.article-cards--full .article-cards__grid {
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
  margin-inline: 0;
}
@media (min-width: 992px) {
  /* Two equal columns, as the source's grid (a flex row would give the body's padding to the body's half). A card
     without a photo: the text takes both columns. */
  .article-cards .article-card--full {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--article-cards-full-gap);
  }
  .article-cards .article-card--full .page-card__media { border-radius: var(--card-radius) 0 0 var(--card-radius); }
  .article-cards .article-card--full .page-card__body:only-child { grid-column: 1 / -1; }
  .article-cards .article-card--full .page-card__media :where(picture, img) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.article-cards--empty { padding-block: var(--space-6); }

/* MB-115: filter and page numbers (Grid with Show a filter and/or Cards per page; Views/Partials/shared/articleList.cshtml).
   The filter: its label, then All + the categories as a row of buttons; under 768 px, with script (.is-ready), one
   button showing the current choice that opens the list below it at once. Page numbers above and below the cards.
   The current choice and page use the primary button's colours. A site restyles through the --article-filter-* and
   --article-pager-* properties. Cards not shown carry `hidden`. */
.article-cards__listing {
  --article-filter-current-bg: var(--btn-1-bg, var(--color-heading));
  --article-filter-current-fg: var(--btn-1-fg, var(--color-page));
  --article-filter-radius: var(--radius-pill);
  --article-pager-radius: var(--radius-sm);
  scroll-margin-top: calc(var(--site-sticky-header-height, 0px) + 1rem);
}
.article-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin: 0 0 var(--space-6);
}
.article-filter__label { margin: 0; font-size: var(--fs-label); font-weight: var(--fw-bold); color: var(--color-heading); }
.article-filter__choices { position: relative; min-width: 0; }
.article-cards .article-cards__listing .article-filter__options { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.article-cards .article-cards__listing .article-filter__option,
.article-cards .article-cards__listing .article-filter__toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: var(--border-width, 1px) solid var(--color-border);
  border-radius: var(--article-filter-radius);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-weight: var(--fw-bold);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.article-cards .article-cards__listing .article-filter__option:hover { border-color: currentColor; }
.article-cards .article-cards__listing .article-filter__option[aria-current] {
  border-color: var(--article-filter-current-bg);
  background: var(--article-filter-current-bg);
  color: var(--article-filter-current-fg);
}
.article-cards .article-cards__listing .article-filter__toggle { display: none; cursor: pointer; }
.article-filter__chevron { flex: none; margin-inline-start: auto; }
.article-cards .article-cards__listing .article-filter__option:focus-visible,
.article-cards .article-cards__listing .article-filter__toggle:focus-visible,
.article-cards .article-cards__listing .article-pager__link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 767.98px) {
  .article-filter { display: block; }
  .article-filter__label { margin-bottom: var(--space-3); }
  .article-cards .article-cards__listing.is-ready .article-filter__toggle { display: flex; width: 100%; gap: var(--space-3); text-align: start; }
  .article-cards .article-cards__listing.is-ready .article-filter__options {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: calc(100% + var(--space-1));
    z-index: 5;
    flex-direction: column;
    gap: 0;
    padding: var(--space-1) 0;
    border: var(--border-width, 1px) solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--band-bg, var(--color-page));
  }
  .article-cards .article-cards__listing.is-filter-open.is-ready .article-filter__options { display: flex; }
  .article-cards .article-cards__listing.is-ready .article-filter__option { display: flex; width: 100%; border: 0; border-radius: 0; }
  .article-cards .article-cards__listing.is-ready .article-filter__option:focus-visible { outline-offset: -3px; }
}
.article-pager__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.article-pager--top { margin-bottom: var(--space-6); }
.article-pager--bottom { margin-top: var(--space-8); }
.article-cards .article-cards__listing .article-pager__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-2);
  border: var(--border-width, 1px) solid var(--color-border);
  border-radius: var(--article-pager-radius);
  color: var(--color-text);
  font-weight: var(--fw-bold);
  text-decoration: none;
}
.article-cards .article-cards__listing .article-pager__link:hover { border-color: currentColor; }
.article-cards .article-cards__listing .article-pager__link[aria-current] {
  border-color: var(--article-filter-current-bg);
  background: var(--article-filter-current-bg);
  color: var(--article-filter-current-fg);
}
.article-cards__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* MB-152 (FuelChief import, M-FIX-15): "Previous and next buttons on phones" (article-pager--steps). Under 768 px « Previous and
   Next » share the row in two halves instead of the page numbers; from 768 px the numbers show and the steps don't. A
   step at the first or last page is shown dimmed (aria-disabled). With "Filter above the heading" the head sits between
   the top page numbers and the cards. */
.article-pager--steps { display: flex; gap: var(--space-2); }
.article-pager--steps[hidden] { display: none; }
.article-pager--steps .article-pager__list { display: none; }
.article-cards .article-cards__listing .article-pager__step { flex: 1 1 50%; justify-content: center; }
.article-cards .article-cards__listing .article-pager__step[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.article-cards__listing > .article-cards__head { margin-top: var(--space-6); }
@media (min-width: 768px) {
  .article-pager--steps .article-pager__list { display: flex; }
  .article-cards .article-cards__listing .article-pager__step { display: none; }
}

/* CASE-STAFF-2 (#194, draft 6-listing.png): the Our work filters (Which pages "Case studies"; shared/caseStudyList.cshtml).
   Sector buttons as the MB-115 filter (a row that wraps, also on phones: no script); under it "I am a" with its list and a
   Show button, and "Showing X of Y" at the end of the row; a hairline under the filters. Tokens only. */
.case-filter {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: var(--border-width) solid var(--color-hairline);
}
.case-filter .case-filter__row { margin: 0; }
.case-filter__label { min-width: 4.5rem; }
.case-filter__person { margin: 0; }
.case-filter__person a { margin-inline-start: var(--space-2); }
.case-filter__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); }
.case-filter__form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); }
.case-filter__form .case-filter__label { margin: 0; }
.case-filter__select {
  min-height: 44px;
  min-width: 12rem;
  max-width: 100%;
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-page);
  color: var(--color-text);
  font: inherit;
}
.case-filter__select:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.case-filter__count { margin: 0; font-size: var(--fs-body-sm); }
.case-list__empty { padding: var(--space-8) 0; }
.case-list__empty p { margin: 0 0 var(--space-3); }
.case-list__empty-text { font-size: var(--fs-body-lg); color: var(--color-heading); }