/* ==========================================================================
   Page: All Case Studies (/cases/) — carousel hero + cases grid
   Responsive per Figma 3190:6663 (mobile).
   ========================================================================== */

/* ── Filter ("Filter +" → tag panel → filters the grid, cases-filter.js) ───── */
.cases-filter { margin-bottom: 40px; }

.cases-filter__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--body-md);
  color: var(--text-title);
}
.cases-filter__toggle:hover { color: var(--dragster-blue); }
/* "+" rotates to × (turns blue) when open — same idiom as the case page toggle. */
.cases-filter__plus {
  display: inline-block;
  font-size: 1.3em;
  line-height: 0;
  transition: transform 0.3s ease-out, color 0.15s;
}
.cases-filter.is-open .cases-filter__plus { transform: rotate(45deg); }

/* Panel = a collapsible height. cases-filter.js sets max-height to the measured
   content height on open (0 on close), so it animates smoothly and the cases
   grid below slides DOWN. The inner fades in. */
.cases-filter__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-out;
}
.cases-filter__panel-inner {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.cases-filter.is-open .cases-filter__panel-inner { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cases-filter__panel,
  .cases-filter__panel-inner,
  .cases-filter__plus { transition: none; }
}

.cases-filter__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;   /* space below the toggle — inside the clipped inner, so it collapses too */
}
.cases-filter__tag {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border: 1px solid rgba(28, 27, 31, 0.2);
  border-radius: 100px;
  background: transparent;
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--body-sm);
  color: var(--text-title);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.cases-filter__tag:hover { border-color: var(--text-title); }
.cases-filter__tag.is-active {
  background: var(--btn-dark);
  border-color: var(--btn-dark);
  color: #fff;
}

/* Control content — desktop per Figma: two plain right-aligned Body/Small lines,
   "View" over the case name, no dot/arrow. Mobile (glass control, further down)
   swaps to the name in Body/Medium plus the "View case" small-link. JS fills
   the case name + sets the link's href. */
.page-hero__view-case {
  font-size: var(--body-sm);
  font-weight: 400;
  line-height: 24px;
  color: #fff;
}
.page-hero__view-label { display: block; }
.page-hero__view-cta { display: none; }

/* The hero control is a liquid-glass card on MOBILE only (see the mobile query).
   On desktop it's the plain View + play/pause cluster, so drop the .glass-card
   shadow, clip and sheen ring there — the mobile query turns them back on. */
@media (min-width: 768px) {
  .page-hero--carousel .page-hero__control {
    box-shadow: none;
    overflow: visible;
  }
  .page-hero--carousel .page-hero__control::before { content: none; }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .page-hero--carousel{
    height: 100svh;
  }
  /* Hero: stack the title above the View/Pause control (Figma 3190:6663). */
  .page-hero--carousel .page-hero__bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding-bottom: 16px;
  }
  /* .page-hero--carousel .page-hero__title {
    font-size: var(--title-md);
    line-height: var(--title-md-lh);
    max-width: 100%;
  } */
  /* Control = a REAL liquid-glass card (same recipe as the hero title card).
     The .glass-card class supplies the radius, sheen ring and shadow; glassfilter.js
     reads --fx-filter and injects the refraction/blur fx-container. */
  .page-hero--carousel .page-hero__control {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 20px;
    --fx-filter: blur(5px) liquid-glass(2, 10, 1) saturate(1.25);
  }
  /* Left: case name heading above the "View case" small-link, left-aligned. */
  .page-hero--carousel .page-hero__view {
    align-items: flex-start;
    text-align: left;
    gap: 4px;
  }
  .page-hero--carousel .page-hero__view-label { display: none; }
  .page-hero--carousel .page-hero__view-cta { display: inline-flex; }
  .page-hero--carousel .page-hero__view-case { font-size: var(--body-md); font-weight: 500; line-height: var(--body-md-lh); }
  /* Play/pause becomes an inline "icon + label" (Pause / Play), not a circle. */
  .page-hero--carousel .carousel-control {
    width: auto;
    height: auto;
    bottom: auto;
    right: auto;
    border: none;
    border-radius: 0;
    background: transparent;
    gap: 8px;
    color: #fff;
    flex-shrink: 0;
  }
  .page-hero--carousel .carousel-control:hover { background: transparent; }
  .page-hero--carousel .carousel-control__icon svg { width: 18px; height: 18px; }
  .page-hero--carousel .carousel-control__ring { display: none; }
  .page-hero--carousel .carousel-control__label {
    display: inline-block;
    font-size: var(--body-sm);
    line-height: 1;
    color: #fff;
  }
  /* Paused → play triangle sits BEFORE the "Play" label. */
  .page-hero--carousel .carousel-control.paused::after { order: -1; }

  /* Cases grid: single column, tighter vertical rhythm (Figma gap-y 32px) */
  .cases__grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 32px;
    padding-bottom: 0;
  }

  /* Card title sits a touch smaller on the narrow grid */
  .cases__grid .large-link__title { font-size: var(--title-sm); line-height: var(--title-sm-lh); }
}