/* ============================================================
   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
   6. Floating helpers yield on phones — Partials/Page/Structure/ScrollTop.html
                              (.erigo-scroll-top) + Rigo FE guide launcher/hint
   7. Gallery equal image height — Partials/ContentElements/Media/Gallery.html
                              (.gallery-row--equal-height, .gallery-item--fit)
   8. "Nahoru" stacks above Rigo — .erigo-scroll-top over the Rigo FE launcher
   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;
  }
}


/* ------------------------------------------------------------
   6. Floating helpers yield on phones (2026-10-21, card 62775c0253)
   Below 48rem the "Nahoru" button (.erigo-scroll-top) and the Rigo FE guide
   (launcher + hint) sit over the right edge of full-width form fields and,
   with the on-screen keyboard open, over the field being typed in. While a
   text field, select or textarea outside the Rigo panel has focus, they fade
   out and cannot be tapped; they return on blur.
   Desktop (>= 48rem) unchanged; browsers without :has() unchanged.
   Exception to the :where() rule above: this one must win over the core
   .erigo-scroll-top.visible / Rigo launcher rules, so it keeps its specificity
   (no !important).
   ------------------------------------------------------------ */
@media (max-width: 47.99rem) {
  body:has(:is(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="hidden"], [type="range"], [type="color"], [type="file"]), select, textarea):not(.erigo-rigo-fe *):focus) :is(.erigo-scroll-top, .erigo-rigo-fe__launcher, .erigo-rigo-fe__hint) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}


/* ------------------------------------------------------------
   7. Gallery – equal image height (2026-10-21, mail 744)
   Partials/ContentElements/Media/Gallery.html adds
   .gallery-row--equal-height + .gallery-row--ratio-<key> to galleries with
   2+ columns and 2+ images of different proportions, and .gallery-item--fit
   to every raster image without its own crop
   (Classes/ViewHelpers/Data/GalleryEqualHeightViewHelper.php).
   Fitted images share one aspect ratio and are cropped to the centre
   (object-fit: cover); the lightbox still opens the whole image.
   Off: TS constant plugin.bootstrap_package_contentelements.gallery.equalHeight = 0
   (whole site) or "Původní výšky obrázků" on the element. Editor crop and
   image width/height keep winning (no classes are emitted for them).
   Tokens: --erigo-gallery-ratio, --erigo-gallery-object-position.
   ------------------------------------------------------------ */
.gallery-row--equal-height { --erigo-gallery-ratio: 4 / 3; }
.gallery-row--ratio-2x3 { --erigo-gallery-ratio: 2 / 3; }
.gallery-row--ratio-3x4 { --erigo-gallery-ratio: 3 / 4; }
.gallery-row--ratio-4x5 { --erigo-gallery-ratio: 4 / 5; }
.gallery-row--ratio-1x1 { --erigo-gallery-ratio: 1 / 1; }
.gallery-row--ratio-5x4 { --erigo-gallery-ratio: 5 / 4; }
.gallery-row--ratio-4x3 { --erigo-gallery-ratio: 4 / 3; }
.gallery-row--ratio-3x2 { --erigo-gallery-ratio: 3 / 2; }
.gallery-row--ratio-5x3 { --erigo-gallery-ratio: 5 / 3; }
.gallery-row--ratio-16x9 { --erigo-gallery-ratio: 16 / 9; }
.gallery-row--ratio-2x1 { --erigo-gallery-ratio: 2 / 1; }

.gallery-row--equal-height .gallery-item--fit picture,
.gallery-row--equal-height .gallery-item--fit img {
  display: block;
  width: 100%;
}

.gallery-row--equal-height .gallery-item--fit img {
  height: auto;
  aspect-ratio: var(--erigo-gallery-ratio);
  object-fit: cover;
  object-position: var(--erigo-gallery-object-position, 50% 40%);
}


/* ------------------------------------------------------------
   8. "Nahoru" stacks above Rigo (2026-10-21, owner)
   When the Rigo FE guide is shown in the right corner (default position),
   the scroll-to-top button sits centred directly ABOVE the Rigo launcher
   instead of overlapping it. Rigo on the left: scroll-top stays in its own
   corner (rigo-guide.js no longer moves Rigo away from it; both shift up
   together by --erigo-rigo-offset when the cookie bar is open). Sizes mirror rigo-guide.css (--rigo-gap / --rigo-size per
   data-avatar-size and the 40rem phone step); scroll-top is 2.75rem wide
   (Scss/v2/layout/_page.scss). Without Rigo, or without :has(), nothing
   changes. Rigo deferred on phones (.is-deferred, kit erigo-rigo-relevance-c-1021) = no Rigo.
   Specificity beats the compiled `.erigo-scroll-top` rule, no
   !important.
   ------------------------------------------------------------ */
:root:has(.erigo-rigo-fe:not([hidden]):not(.is-deferred)) {
  --erigo-rigo-stack-gap: 1.25rem;
  --erigo-rigo-stack-size: 6.5rem;
}
:root:has(.erigo-rigo-fe:not([hidden]):not(.is-deferred)[data-avatar-size="s"]) { --erigo-rigo-stack-size: 5rem; }
:root:has(.erigo-rigo-fe:not([hidden]):not(.is-deferred)[data-avatar-size="l"]) { --erigo-rigo-stack-size: 8rem; }
@media (max-width: 40rem) {
  :root:has(.erigo-rigo-fe:not([hidden]):not(.is-deferred)) {
    --erigo-rigo-stack-gap: 0.75rem;
    --erigo-rigo-stack-size: 4.75rem;
  }
  :root:has(.erigo-rigo-fe:not([hidden]):not(.is-deferred)[data-avatar-size="s"]) { --erigo-rigo-stack-size: 3.75rem; }
  :root:has(.erigo-rigo-fe:not([hidden]):not(.is-deferred)[data-avatar-size="l"]) { --erigo-rigo-stack-size: 6rem; }
}
:root:has(.erigo-rigo-fe:not([hidden]):not(.is-deferred):not([data-position="left"])) .erigo-scroll-top {
  inset-inline-end: calc(var(--erigo-rigo-stack-gap) + (var(--erigo-rigo-stack-size) - 2.75rem) / 2 + env(safe-area-inset-right, 0px));
  inset-block-end: calc(var(--erigo-rigo-stack-gap) + var(--erigo-rigo-stack-size) + 0.75rem + var(--erigo-rigo-offset, 0px) + env(safe-area-inset-bottom, 0px));
}