:root{
  --gap: 1rem;
  --collapsed-flex: 1;
  --expanded-flex: 4;

  --card-height-desktop: 30rem;

  --card-height-mobile: 7.5rem;
  --card-height-mobile-expanded: 20rem;

  /* animation tuning (feel like your primary/secondary) */
  --ease: cubic-bezier(.22,.9,.31,1);
  --dur: 460ms;
  --fade: 260ms;
}

/* Layout */
.cards{
  display:flex;
  gap:var(--gap);
  width:100%;
  height: var(--card-height-desktop);
  box-sizing:border-box;
}

.card{
  flex: var(--collapsed-flex);
  border-radius:4rem;
  overflow:hidden;
  position:relative;
  transition: flex var(--dur) var(--ease);
  cursor:pointer;
  display:flex;
  align-items:flex-end;
  min-width:0; /* prevents text overflow flex weirdness */
}


/* Text container */
.highlights--desktop .text-layer {
  background: rgba(0,0,0,0.6);
}
.gradient-layer {
  z-index: 50;
  pointer-events: none;
}

/* Two-state content blocks */
.title-only,
.details{
  will-change: opacity, transform;
}

/* Collapsed: show title only */
.title-only{
  opacity:1;
  transform: translateY(0);
  transition:
    opacity var(--fade) var(--ease),
    transform var(--fade) var(--ease);
}

.title-only h2{
  margin:0;
  font-size: 1.5rem;
}

/* Details hidden by default (and not clickable) */
.details{
  position:absolute;
  padding: 2rem;
  opacity:0;
  transform: translateY(12px);
  pointer-events:none;

  transition:
    opacity var(--fade) var(--ease),
    transform var(--fade) var(--ease);
}

.details h2 {
  margin-bottom: 1rem;
}

/* Expanded state */
.card.active{
  flex: var(--expanded-flex);
}

/* Title makes way (fade + lift slightly) */
.card.active .title-only{
  opacity:0;
  transform: translateY(10px);
  pointer-events:none;
}

/* Details fade in (after title begins leaving) */
.card.active .details{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
  transition-delay: 90ms; /* gives “make way” feel */
}
/* Default: desktop on, mobile off */
.highlights--mobile { display: none; }

/* Mobile breakpoint */
@media (max-width: 1024px) {
  .highlights--desktop { display: none; }
  .highlights--mobile { display: block; }
}