/*
  cases.css
  Squeeze carousel for the case studies. One panel stays open; the others
  narrow beside it. Opening a panel slides the row and cross-fades the copy.
  Photographs stay in the markup so the section still reads without JavaScript
  (1.1.1, 1.3.1). Motion is removed when the reader asks for less movement (2.3.3).
*/

.squeeze {
  --sq-h: 320px;
  --sq-h: clamp(200px, 32cqi, 340px);
  --sq-gap: 16px;
  --sq-slat-gap: 8px;
  --sq-radius: 20px;
  --sq-ms: 1000ms;
  --sq-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sq-hero: calc(var(--sq-h) * 16 / 9);
  --sq-room: 30%;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.squeeze-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.squeeze-arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--on-accent);
}

.squeeze-arrow:hover {
  background: var(--orange-minus-600);
}

.squeeze-arrow:active {
  background: var(--orange-minus-700);
}

.squeeze-viewport {
  width: 100%;
  height: var(--sq-h);
  overflow: hidden;
}

.squeeze-strip {
  display: flex;
  height: 100%;
  width: max-content;
  transition: transform var(--sq-ms) var(--sq-ease);
}

.squeeze-card {
  position: relative;
  height: 100%;
  flex: none;
  overflow: hidden;
  padding: 0;
  background: var(--bg-elevated);
  cursor: pointer;
  transition:
    width var(--sq-ms) var(--sq-ease),
    margin-left var(--sq-ms) var(--sq-ease),
    border-radius var(--sq-ms) var(--sq-ease);
}

.squeeze-card img {
  position: absolute;
  inset-block: 0;
  left: 50%;
  height: 100%;
  width: var(--sq-hero);
  min-width: 100%;
  max-width: none;
  transform: translateX(-50%);
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.squeeze-card:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--accent-ink);
}

.squeeze-solo {
  display: none;
  height: 100%;
  overflow: hidden;
  border-radius: var(--sq-radius);
  background: var(--bg-elevated);
  color: inherit;
  text-decoration: none;
}

.squeeze-solo img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.squeeze.is-compact .squeeze-strip {
  display: none;
}

.squeeze.is-compact .squeeze-solo {
  display: block;
}

.squeeze.is-still .squeeze-strip,
.squeeze.is-still .squeeze-card {
  transition: none;
}

.squeeze-details {
  margin-top: 1.5rem;
}

.squeeze-copy h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.7vw, 1.85rem);
  line-height: 1.2;
  color: var(--text);
}

.squeeze-copy p {
  margin-top: 0.45rem;
  color: var(--text-muted);
  font-size: 1.02rem;
}

.squeeze-action {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.55rem;
  align-self: flex-start;
  min-height: 2.75rem;
  margin-top: 1rem;
  padding: 0.65rem 1.2rem;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
}

.squeeze-action svg {
  transition: transform 200ms ease;
}

.squeeze-action:hover {
  background: var(--orange-minus-600);
}

.squeeze-action:hover svg {
  transform: translateX(2px);
}

.squeeze-action:active {
  background: var(--orange-minus-700);
}

/* Without the script, each study is a stacked card. */
.squeeze:not(.is-ready) .squeeze-toolbar,
.squeeze:not(.is-ready) .squeeze-viewport {
  display: none;
}

.squeeze:not(.is-ready) .squeeze-details {
  display: grid;
  gap: 0.85rem;
  margin-top: 0;
}

.squeeze:not(.is-ready) .squeeze-slide {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.squeeze:not(.is-ready) .squeeze-slide > img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.squeeze:not(.is-ready) .squeeze-copy,
.squeeze:not(.is-ready) .squeeze-action {
  margin-inline: 1.2rem;
}

.squeeze:not(.is-ready) .squeeze-copy {
  margin-top: 1.15rem;
}

.squeeze:not(.is-ready) .squeeze-action {
  margin-bottom: 1.35rem;
}

.squeeze.is-ready .squeeze-details {
  display: grid;
}

.squeeze.is-ready .squeeze-slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--sq-ms) var(--sq-ease),
    visibility var(--sq-ms);
}

.squeeze.is-ready .squeeze-slide > img {
  display: none;
}

.squeeze.is-ready .squeeze-slide.is-shown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.squeeze.is-ready .squeeze-copy {
  max-width: 46rem;
}

.squeeze-note {
  margin-top: 0.85rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

@container (min-width: 800px) {
  .squeeze.is-ready .squeeze-slide {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2.5rem;
  }

  .squeeze.is-ready .squeeze-action {
    margin-top: 0.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .squeeze-strip,
  .squeeze-card,
  .squeeze-slide,
  .squeeze-action svg {
    transition: none;
  }
}