/* =================================================================
   CONTROLS STRIP
   Hero-region UI region containing interactive widgets (toggles +
   sample grids) that swap which layer set is displayed in the
   layer-animation container below.

   Used by: rains-of-terror, breach-dogs, postosuchus, indiglow,
   colorup. See src/_includes/controls-strip.njk for the dispatcher
   and front-matter contract.

   Theming hooks (CSS custom properties, set in page pageStyles):
     --controls-accent          fg/text color of checked state (default: #022662)
     --controls-toggle-bg       background of checked label (default: #ffffff)
     --controls-toggle-fg       text color of checked label (default: var(--controls-accent))
     --controls-toggle-shadow   shadow on checked label (default: subtle drop shadow)
     --controls-grid-accent     border + label-bg color for active grid item (default: var(--controls-accent))
     --controls-grid-shadow     drop shadow color for active grid item (default: rgb(246, 139, 31, 0.5))
   ================================================================= */

/* =================================================================
   OUTER WRAPPER
   ================================================================= */

.hero-demo__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

@media (max-width: 768px) {
  .hero-demo__controls {
    flex-direction: column;
    gap: 15px;
  }
}

/* =================================================================
   BINARY TOGGLE (paper / side / process)
   Shared chrome; per-kind variants use BEM modifiers + CSS
   custom properties for theming.
   ================================================================= */

.controls-strip__toggle {
  display: flex;
  gap: 0;
  padding: 3px;
  background: rgb(255, 255, 255, 0.15);
  border-radius: 6px;
}

.controls-strip__toggle-option {
  position: relative;
}

.controls-strip__toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.controls-strip__toggle-label {
  display: block;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: rgb(255, 255, 255, 0.7);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.controls-strip__toggle-label:hover {
  color: #fff;
}

.controls-strip__toggle-input:checked + .controls-strip__toggle-label {
  color: var(--controls-toggle-fg, var(--controls-accent, #022662));
  background: var(--controls-toggle-bg, #fff);
  box-shadow: var(--controls-toggle-shadow, 0 2px 6px rgb(0, 0, 0, 0.15));
}

.controls-strip__toggle-input:checked + .controls-strip__toggle-label:hover {
  color: var(--controls-toggle-fg, var(--controls-accent, #022662));
}

/* Per-kind modifier classes are semantic anchors; default styling
   above applies to all. Pages can override variant-specific
   behavior via the custom properties or by selecting the modifier. */

/* =================================================================
   SAMPLE GRID
   N-item clickable thumbnail grid (used inside combo controls for
   indiglow and colorup). Children stack as block elements; the
   outer container clips them via overflow:hidden so the rounded
   border crops the image and label cleanly.
   ================================================================= */

.controls-strip__grid {
  display: flex;
  gap: 12px;
}

.controls-strip__grid-item {
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgb(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.controls-strip__grid-item:hover {
  box-shadow: 0 4px 12px rgb(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.controls-strip__grid-item.active {
  border-color: var(--controls-grid-accent, var(--controls-accent, #f68b1f));
  box-shadow: 0 4px 16px var(--controls-grid-shadow, rgb(246, 139, 31, 0.5));
}

.controls-strip__grid-item img {
  display: block;
  width: 80px;
  height: auto;
}

.controls-strip__grid-label {
  padding: 6px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  color: #333;
  background: rgb(255, 255, 255, 0.95);
}

.controls-strip__grid-item.active .controls-strip__grid-label {
  color: #fff;
  background: var(--controls-grid-accent, var(--controls-accent, #f68b1f));
}

@media (max-width: 768px) {
  .controls-strip__grid-item img {
    width: 60px;
  }
}

/* =================================================================
   DEMO CONTAINER SWITCHING
   Generic show/hide mechanism for layer-set variants. Each page
   wraps its alternate layer stacks in .demo-container elements;
   inline JS toggles the .active class as the user selects.
   ================================================================= */

.demo-container {
  display: none;
  width: 100%;
  height: 100%;
}

.demo-container.active {
  display: flex;
}