/* Vanilla port of reactbits.dev's "Accordion Gallery" CSS — copied close to verbatim (colors,
   spacing, shadows, the 3D perspective/tilt setup, the mobile stacked-accordion breakpoint) since
   none of that depends on GSAP at all. See js/accordion-gallery.js for the one deliberate change:
   --ag-gray/--ag-dim default here on .ag-panel (a shared ancestor of both .ag-panel__media and
   .ag-panel__overlay), not .ag-panel__media alone — upstream declares them there, but
   .ag-panel__overlay (a *sibling* of media, which is what actually reads --ag-dim) can't inherit
   a custom property from a sibling, only from an ancestor. */
.accordion-gallery {
  --ag-accent: #ffffff;
  --ag-overlay: #060010;
  --ag-text: #ffffff;
  --ag-gap: 10px;
  --ag-radius: 16px;
  --ag-media-size: 320px;

  display: flex;
  flex-direction: row;
  gap: var(--ag-gap);
  width: 100%;
  max-width: 100%;
  perspective: 1400px;
  perspective-origin: 50% 50%;
}

.accordion-gallery--vertical {
  flex-direction: column;
}

.ag-panel {
  --ag-gray: 1;
  --ag-dim: 0.35;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--ag-radius);
  cursor: pointer;
  display: block;
  text-decoration: none;
  outline: none;
  transform-style: preserve-3d;
  transform-origin: center center;
  background: #0a0713;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.8);
  will-change: flex-grow, transform;
  -webkit-tap-highlight-color: transparent;
}

.ag-panel:focus-visible {
  box-shadow:
    0 0 0 2px var(--ag-accent),
    0 10px 30px -18px rgba(0, 0, 0, 0.8);
}

.ag-panel__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.ag-panel__media {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--ag-media-size);
  height: 100%;
  filter: grayscale(var(--ag-gray));
  will-change: transform, filter;
}

.accordion-gallery--vertical .ag-panel__media {
  width: 100%;
  height: var(--ag-media-size);
}

.ag-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.ag-panel__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--ag-overlay) 78%, transparent) 100%),
    color-mix(in srgb, var(--ag-overlay) calc(var(--ag-dim, 0.35) * 100%), transparent);
}

.ag-panel__label {
  position: absolute;
  left: 20px;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  z-index: 2;
}

.ag-panel__bar {
  flex: 0 0 auto;
  width: 3px;
  height: 26px;
  border-radius: 3px;
  background: var(--ag-accent);
  opacity: 0;
  box-shadow: 0 0 12px color-mix(in srgb, var(--ag-accent) 60%, transparent);
}

.ag-panel__text {
  color: var(--ag-text);
  font-family: inherit;
  font-weight: 600;
  font-size: clamp(1.1rem, 1.6vw, 1.6rem);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

/* Touch-only, horizontal orientation (js/accordion-gallery.js's .ag-panel--vertical-label, now
   added to every tile including the active one for visual consistency — the vertical/stacked
   breakpoint below already gives every tile full width, so this never applies there, and would
   be redundant if it did): a tile's now-permanently-visible label would otherwise get clipped by
   .ag-panel__text's own nowrap+ellipsis once the tile shrinks to a sliver. Rotates the whole
   label (bar + text) as one rigid block rather than switching to CSS writing-mode — the text is
   already a single nowrap line, so there's no wrapping/bidi behaviour writing-mode would actually
   be needed for, just simpler to reason about as a plain transform.
   Bottom-anchored, per request — a vertically-centred version was tried first specifically to
   avoid a long label's own full height running past the tile's top edge, but centring read as
   inconsistent with the site's own sitewide "labels sit at the bottom" convention. Anchored a bit
   further from the edge than the original 12px too — the accent bar was reading as flush against
   the tile's own rounded border. The rotation pivot (transform-origin) is the label's own
   *left-bottom* corner, not its true centre, so every tile's label still lines up at the same
   horizontal inset and vertical baseline regardless of how long its own text is, rather than
   drifting based on each label's own unrotated width the way a true-centre pivot would. */
@media (hover: none) and (min-width: 521px) {
  .ag-panel--vertical-label .ag-panel__label {
    left: 40px;
    top: auto;
    bottom: 20px;
    right: auto;
    width: auto;
    transform-origin: 0% 100%;
    transform: rotate(-90deg);
  }
}

@media (max-width: 520px) {
  .accordion-gallery {
    flex-direction: column;
    perspective: none;
    height: auto !important;
  }
  .ag-panel {
    min-height: 84px;
    transform: none !important;
  }
  .accordion-gallery .ag-panel__media {
    width: 100%;
    height: var(--ag-media-size);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ag-panel,
  .ag-panel__media {
    will-change: auto;
  }
}