/* ============================================================
   Erigo Core — layout options (2026-09-24)
   ============================================================
   1. News category filter  — Templates/Category/List.html (EXT:news override)
   2. Footer column count   — Partials/Page/Footer.html, pages.footer_columns
   3. Page thumbnails menu  — Partials/ContentElements/Menu/ThumbnailList.html,
                              tt_content.menu_thumbnail
   4. Sidebar page layouts  — Templates/Page/Subnavigation*.html, 2cols*.html,
                              3cols*.html (plain-CSS port of
                              Scss/v2/layout/_content-sidebar.scss for sites
                              whose compiled main.css predates it)
   5. Thumbnail menu tiles without an image — menu_thumbnail_dir/_list,
                              .erigo-thumbnail-menu-item--no-image
   Plain CSS on purpose: it ships with the package and works on every site
   without recompiling the theme's main.css. Every value is a --erigo-* token
   with a fallback. Selectors are wrapped in :where() (zero specificity), so a
   client theme restyles them with any plain class selector.
   Breakpoints mirror $erigo-bp-sm / $erigo-bp-lg (576px / 992px).
   ============================================================ */

/* 1. News category filter ----------------------------------- */

/* Real specificity: themes indent and bullet every list inside a frame. */
.news-category-filter .news-category-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--erigo-space-2xs, 0.5rem);
  margin: 0 0 var(--erigo-space-md, 1.5rem);
  padding: 0;
  list-style: none;
}

:where(.news-category-filter__link) {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.45em 1em;
  border: 1px solid var(--erigo-color-border, #d8dee1);
  border-radius: 999px;
  color: var(--erigo-color-text, inherit);
  background: var(--erigo-color-bg, #fff);
  font-size: var(--erigo-text-sm, 0.9rem);
  line-height: 1.2;
  text-decoration: none;
  transition:
    background-color var(--erigo-motion-fast, 120ms) var(--erigo-motion-easing, ease),
    border-color var(--erigo-motion-fast, 120ms) var(--erigo-motion-easing, ease),
    color var(--erigo-motion-fast, 120ms) var(--erigo-motion-easing, ease);
}

:where(.news-category-filter__link:hover, .news-category-filter__link:focus-visible) {
  border-color: var(--erigo-color-primary, currentColor);
  color: var(--erigo-color-primary, inherit);
}

/* Active state keeps real specificity: themes colour every `a`, which would
   otherwise paint the label in the same colour as the pill background. */
.news-category-filter .news-category-filter__link.is-active,
.news-category-filter .news-category-filter__link.is-active:hover {
  border-color: var(--erigo-color-primary, #333);
  background: var(--erigo-color-primary, #333);
  color: var(--erigo-color-primary-contrast, #fff);
}

:where(.news-category-filter__count) {
  opacity: 0.7;
}

/* 2. Footer column count ------------------------------------ */
/* main.css sets 2 columns from sm and 4 from lg. Only the counts that differ
   from that are overridden here, so a 4-column footer is untouched. These
   rules keep real specificity (no :where()) — a count the editor picked must
   beat main.css and a theme's own `.page-footer .footer-columns` rule. */

.page-footer .footer-columns[data-footer-columns="1"] {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 992px) {
  .page-footer .footer-columns[data-footer-columns="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-footer .footer-columns[data-footer-columns="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-footer .footer-columns[data-footer-columns="5"] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .page-footer .footer-columns[data-footer-columns="6"] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* 3. "Pages" menu with thumbnails ------------------------------ */

/* Real specificity on the list itself: main.css makes every .erigo-menu a
   flex column, which :where() alone would lose to. */
.erigo-menu.erigo-menu--thumbnails {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--erigo-menu-thumb-min, 15rem)), 1fr));
  gap: var(--erigo-space-md, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.erigo-menu--thumbnails .erigo-menu__link) {
  display: flex;
  flex-direction: column;
  gap: var(--erigo-space-2xs, 0.5rem);
  height: 100%;
  color: inherit;
  text-decoration: none;
}

:where(.erigo-menu--thumbnails .erigo-menu__thumb) {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--erigo-color-surface, #f4f6f7);
}

:where(.erigo-menu--thumbnails .erigo-menu__thumb img) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--erigo-motion-slow, 320ms) var(--erigo-motion-easing, ease);
}

:where(.erigo-menu--thumbnails .erigo-menu__link:hover .erigo-menu__thumb img) {
  transform: scale(1.03);
}

:where(.erigo-menu--thumbnails .erigo-menu__title) {
  font-weight: 600;
}

:where(.erigo-menu--thumbnails .erigo-menu__link:hover .erigo-menu__title, .erigo-menu--thumbnails .erigo-menu__link:focus-visible .erigo-menu__title) {
  color: var(--erigo-color-link-hover, var(--erigo-color-primary, inherit));
}

/* 4. Sidebar page layouts ------------------------------------ */
/* Same rules as Scss/v2/layout/_content-sidebar.scss, zero specificity, so a
   main.css compiled from the current SCSS (or a theme) always wins. */

:where(.section-row) {
  display: flex;
  flex-direction: column;
  gap: var(--erigo-space-lg, 2rem);
  align-items: flex-start;
}

:where(.section-column) {
  min-width: 0;
  width: 100%;
}

:where(.maincontent-wrap) {
  flex: 1 1 auto;
}

:where(.subcontent-above-menu:empty, .subcontent-below-menu:empty) {
  display: none;
}

:where(.subcontent-above-menu:not(:empty)) {
  margin-block-end: var(--erigo-space-md, 1.5rem);
}

:where(.subcontent-below-menu:not(:empty)) {
  margin-block-start: var(--erigo-space-md, 1.5rem);
}

:where(.frame-type-subnavigation) {
  padding: var(--erigo-space-2xs, 0.5rem) 0;
  border: 1px solid var(--erigo-hairline, rgba(28, 34, 38, 0.06));
  border-radius: var(--erigo-radius, 0);
  background-color: var(--erigo-color-surface, #f4f6f7);
}

:where(.subnav-item + .subnav-item) {
  border-block-start: 1px solid var(--erigo-color-border, #d8dee1);
}

:where(.subnav-link) {
  display: flex;
  align-items: center;
  gap: var(--erigo-space-2xs, 0.5rem);
  padding: var(--erigo-space-2xs, 0.5rem) var(--erigo-space-sm, 1rem);
  border-inline-start: 3px solid transparent;
  color: var(--erigo-color-text, inherit);
  text-decoration: none;
}

:where(.subnav-link:hover, .subnav-link:focus-visible, .subnav-item.active > .subnav-link) {
  background-color: var(--erigo-color-surface-strong, #e6eaec);
  color: var(--erigo-color-primary, inherit);
}

:where(.subnav-item.active > .subnav-link) {
  border-inline-start-color: var(--erigo-color-primary, currentColor);
  font-weight: 700;
}

:where(.subnav-nav.level-2) {
  padding-inline-start: var(--erigo-space-md, 1.5rem);
}

@media (min-width: 992px) {
  :where(.section-row) {
    flex-direction: row;
  }

  :where(.subnav-wrap, .subcontent-wrap) {
    flex: 0 0 20rem;
    width: 20rem;
  }

  /* Sidebars follow the main column in the source (main content first for
     screen readers); the left ones are moved visually. */
  :where(.subnav-wrap-left, .section-row > .subcontent-left) {
    order: -1;
  }

  :where(.frame-type-subnavigation) {
    position: sticky;
    top: var(--erigo-space-md, 1.5rem);
  }
}

/* 5. Thumbnail menu: pages without a thumbnail ------------------ */
/* Templates/ContentElements/MenuThumbnail{Dir,List}.html render them as a
   caption-only tile (grey surface, link-coloured title, vertically centred)
   instead of skipping the page. Card surface/hover come from main.css; the
   caption rule keeps real specificity so it beats main.css caption padding. */

:where(.erigo-thumbnail-menu-item--no-image .erigo-thumbnail-menu-link) {
  justify-content: center;
  min-height: var(--erigo-thumbnail-menu-tile-min-height, 6.25rem);
  background-color: var(--erigo-color-surface, #f4f6f7);
}

.erigo-thumbnail-menu-item--no-image .erigo-thumbnail-menu-caption {
  flex: 0 0 auto;
  align-items: center;
  padding: var(--erigo-space-md, 1.5rem) var(--erigo-space-lg, 2rem);
}

:where(.erigo-thumbnail-menu-item--no-image .erigo-thumbnail-menu-caption-title) {
  color: var(--erigo-color-link, inherit);
  font-weight: 600;
}

:where(.erigo-thumbnail-menu-item--no-image .erigo-thumbnail-menu-link:hover .erigo-thumbnail-menu-caption-title) {
  color: var(--erigo-color-link-hover, var(--erigo-color-link, inherit));
}

@media (prefers-reduced-motion: reduce) {
  :where(.news-category-filter__link, .erigo-menu--thumbnails .erigo-menu__thumb img) {
    transition: none;
  }
}