/*
 * Product Catalogue - Resources module. Every colour is a token. Each one follows the site template's own
 * Bootstrap colours (so the module takes on the template's theme,
 * light or dark, whatever the template does); the value after the
 * comma is Bootstrap 5.3's own, used only where a template sets none.
 * A site may override five of them (buttons, button text, links, lines
 * and the filter titles' background) in the module's Colours settings;
 * a page that needs other colours gets its own module. Contrast is measured on the fallbacks
 * by the build and on a module's overrides on its settings screen.
 */

:root {
  --prodcat-ink: var(--bs-body-color, #212529);
  --prodcat-canvas: var(--bs-body-bg, #FFFFFF);
  --prodcat-panel: var(--bs-tertiary-bg, #F8F9FA);
  --prodcat-muted: var(--bs-secondary-color, #6C757D);
  --prodcat-accent: var(--bs-primary, #0B5ED7);
  --prodcat-on-accent: var(--bs-white, #FFFFFF);
  --prodcat-link: var(--bs-link-color, #0A58CA);
  --prodcat-rule: var(--bs-primary, #0B5ED7);
  --prodcat-border: var(--bs-secondary-color, #6C757D);
  --prodcat-focus: var(--bs-primary, #0B5ED7);
  --prodcat-toast: var(--bs-dark, #212529);
  --prodcat-on-toast: var(--bs-white, #FFFFFF);
  --prodcat-thumb: var(--bs-secondary-bg, #E9ECEF);
}

.prodcat-resources a {
  color: var(--prodcat-link);
}

.prodcat-resources :focus-visible {
  outline: 2px solid var(--prodcat-focus);
  outline-offset: 2px;
}

.prodcat-filter-group {
  margin-bottom: 0.75rem;
}

.prodcat-filter-group > summary {
  background: var(--prodcat-panel);
  color: var(--prodcat-ink);
  border-bottom: 2px solid var(--prodcat-rule);
  padding: 0.5rem;
  font-weight: 700;
  cursor: pointer;
}

.prodcat-filter-heading {
  margin: 0.75rem 0 0.25rem;
  font-size: 1rem;
  font-weight: 700;
}

.prodcat-filter-list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0.25rem 0.5rem;
}

.prodcat-filter-list li {
  margin: 0.25rem 0;
}

.prodcat-filter-list input {
  border-color: var(--prodcat-border);
  margin-inline-end: 0.5rem;
}

.prodcat-btn {
  background: var(--prodcat-accent);
  color: var(--prodcat-on-accent);
  border: 0;
  border-radius: 0.25rem;
  padding: 0.375rem 0.75rem;
  text-decoration: none;
  display: inline-block;
}

.prodcat-btn:hover,
.prodcat-btn:focus-visible {
  color: var(--prodcat-on-accent);
  text-decoration: underline;
}

.prodcat-resources a.prodcat-btn {
  color: var(--prodcat-on-accent);
}

.prodcat-group {
  margin-bottom: 2rem;
}

.prodcat-group-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--prodcat-rule);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.prodcat-group-head img {
  max-width: 3rem;
}

.prodcat-group-head h3 {
  margin: 0;
}

.prodcat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: 1.5rem;
}

.prodcat-cards.prodcat-videos {
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
}

.prodcat-card[hidden] {
  display: none;
}

.prodcat-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--prodcat-thumb);
}

.prodcat-videos .prodcat-thumb {
  aspect-ratio: 15 / 11;
}

.prodcat-play {
  background: none;
  cursor: pointer;
}

.prodcat-card-title {
  font-size: 1rem;
  margin: 0.5rem 0 0.25rem;
}

.prodcat-card-type {
  color: var(--prodcat-muted);
  margin: 0 0 0.5rem;
}

.prodcat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.prodcat-viewall {
  margin-top: 1rem;
  text-align: center;
}

.prodcat-video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.prodcat-dialog {
  width: min(56rem, 95vw);
  border: 1px solid var(--prodcat-border);
  background: var(--prodcat-canvas);
  color: var(--prodcat-ink);
  padding: 1rem;
}

.prodcat-toast {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--prodcat-toast);
  color: var(--prodcat-on-toast);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  z-index: 1080;
}

.prodcat-busy {
  opacity: 0.6;
}