/*
 * ProSocial Agency - Select Path
 * 06-select-path.css
 *
 *  Flex row, percentage widths,
 * and one 800ms curve shared by the panel width, the image filter and
 * the overlay so the three move together. That shared curve is what
 * makes the motion read as smooth rather than as three separate
 * animations happening at once.
 *
 * Inactive panels are frosted: blur, desaturate, dim, and scaled up
 * slightly so the blur has no visible edge. Hovering an inactive panel
 * lifts the frost part way, which is the feedback that tells you the
 * panel is live before you commit to it.
 *
 * Content is absolutely positioned so a collapsed panel contributes no
 * height. Without that a narrow panel wraps its hidden text into a
 * tall column and stretches the whole row.
 */

.paths {
  overflow: hidden;
}

/* The case study index sits directly under the panels and shares the
   background so the two read as one block. Without this the bottom
   padding of the panels and the top padding of the index stack, which
   opens a gap in the middle of what should look continuous. */
.paths + .section--alt {
  padding-top: 0;
}

.paths__header {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-pad-x);
  margin-bottom: var(--space-12);
}

/* ── Track ── */

.paths__panels {
  display: flex;
  gap: 0;
  height: 520px;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-pad-x);
}

.paths__panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  cursor: pointer;
  flex-shrink: 0;
  width: 21%;
  border: none;
  padding: 0;
  text-align: left;
  background: none;
  will-change: width;
  transition: width var(--duration-panel) var(--ease-panel);
}

.paths__panel.is-active {
  width: 58%;
  cursor: default;
}

.paths__panel + .paths__panel { margin-left: var(--space-4); }

.paths__panel:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ── Image ── */

.paths__image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.paths__image img,
.paths__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  will-change: filter, transform;
  transition:
    transform var(--duration-panel) var(--ease-panel),
    filter    var(--duration-panel) var(--ease-panel);
}

/* Shown when no image is set. Enough structure that the frost is
   visible, since blurring a flat color looks identical to not
   blurring it. */
.paths__placeholder {
  background:
    radial-gradient(ellipse at 22% 18%, rgba(196, 92, 38, 0.30) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 72%, rgba(201, 150, 62, 0.22) 0%, transparent 50%),
    linear-gradient(135deg, var(--color-band-deep) 0%, var(--color-band) 45%, #2E4670 100%);
}

.paths__panel:not(.is-active) .paths__image img,
.paths__panel:not(.is-active) .paths__placeholder {
  filter: blur(var(--panel-blur-inactive)) saturate(0.3) brightness(0.7);
  transform: scale(1.08);
}

.paths__panel:not(.is-active):hover .paths__image img,
.paths__panel:not(.is-active):hover .paths__placeholder {
  filter: blur(var(--panel-blur-hover)) saturate(0.5) brightness(0.8);
}

.paths__panel.is-active .paths__image img,
.paths__panel.is-active .paths__placeholder {
  filter: blur(0) saturate(1) brightness(1);
  transform: scale(1.02);
}

/* ── Overlay ── */

.paths__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: background var(--duration-panel) var(--ease-panel);
}

.paths__panel:not(.is-active) .paths__overlay {
  background: rgba(17, 28, 51, 0.45);
}

.paths__panel:not(.is-active):hover .paths__overlay {
  background: rgba(17, 28, 51, 0.30);
}

.paths__panel.is-active .paths__overlay {
  background: linear-gradient(
    to top,
    rgba(17, 28, 51, 0.80)  0%,
    rgba(17, 28, 51, 0.58) 25%,
    rgba(17, 28, 51, 0.32) 45%,
    rgba(17, 28, 51, 0.10) 65%,
    transparent            80%
  );
}

/* ── Collapsed label ── */

.paths__label {
  position: absolute;
  z-index: 2;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-inverse);
  white-space: nowrap;
  opacity: 1;
  transition: opacity var(--duration-slow) var(--ease-out);
}

.paths__panel.is-active .paths__label {
  opacity: 0;
  pointer-events: none;
}

/* ── Expanded content ── */

.paths__content {
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms var(--ease-out);
}

/* The delay lets the panel finish widening before the text arrives.
   Without it the copy reflows while the panel is still moving. */
.paths__panel.is-active .paths__content {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 200ms;
}

.paths__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: auto;
}

.paths__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-support);
}

.paths__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-inverse);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.paths__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: rgba(238, 243, 250, 0.78);
  line-height: var(--leading-normal);
  max-width: 50ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Pills ── */

.paths__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.paths__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-inverse);
  background: rgba(238, 243, 250, 0.16);
  border: 1px solid rgba(238, 243, 250, 0.28);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    background   var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform    var(--duration-fast) var(--ease-out);

  /* Start hidden. The stagger below brings them in. */
  opacity: 0;
  transform: translateY(6px);
}

/* Staggered entrance, 60ms apart, after the panel has settled. */
.paths__panel.is-active .paths__pill {
  animation: paths-pill-enter 350ms var(--ease-out) forwards;
  animation-delay: calc(var(--tx-index, 0) * 60ms + 250ms);
}

.paths__pill:hover {
  background: var(--color-action);
  border-color: var(--color-action);
  transform: translateY(-1px);
}

.paths__pill--go {
  background: transparent;
  border-color: rgba(238, 243, 250, 0.45);
}

.paths__pill svg {
  width: 12px;
  height: 12px;
  opacity: 0.60;
  transition: transform var(--duration-base) var(--ease-bounce);
}

.paths__pill:hover svg {
  transform: translateX(2px);
  opacity: 1;
}

@keyframes paths-pill-enter {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ── */

@media (max-width: 1024px) {
  .paths__panels { height: 480px; }
  .paths__panel { width: 22%; }
  .paths__panel.is-active { width: 56%; }
  .paths__title { font-size: var(--text-xl); }
}

@media (max-width: 768px) {
  .paths__panels {
    flex-direction: column;
    height: auto;
    gap: var(--space-3);
  }

  .paths__panel,
  .paths__panel.is-active {
    width: 100%;
    height: 132px;
    transition: height var(--duration-panel) var(--ease-panel);
  }

  .paths__panel.is-active { height: 420px; }

  .paths__panel + .paths__panel { margin-left: 0; }

  .paths__label { bottom: var(--space-6); }
  .paths__content { padding: var(--space-6); }
  .paths__desc { -webkit-line-clamp: 3; line-clamp: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .paths__panel,
  .paths__image img,
  .paths__placeholder,
  .paths__overlay,
  .paths__content,
  .paths__label { transition: none; }

  .paths__panel.is-active .paths__pill {
    animation: none;
    opacity: 1;
    transform: none;
  }
}