/* ============================================================
   55-cond-waiting — condensed 3-row dim/lit split, echoes
   css/sections/20-waiting.css's visual language (own class
   names/root, own root here). Scoped under .sec-55-cond-waiting.
   ============================================================ */

.sec-55-cond-waiting {
  position: relative;
  background: var(--bone-2);
}

.sec-55-cond-waiting__panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: var(--shadow-lift);
  border-radius: var(--radius-lg);
}

.sec-55-cond-waiting__half {
  position: relative;
  padding: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
}

.sec-55-cond-waiting__half-title {
  font-size: var(--fs-h4);
  margin-bottom: 1.2rem;
}

.sec-55-cond-waiting__list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.sec-55-cond-waiting__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  line-height: 1.45;
}

.sec-55-cond-waiting__ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-top: 0.15em;
}

.sec-55-cond-waiting__half--dim {
  background: var(--white);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  filter: saturate(0.55);
}
.sec-55-cond-waiting__half--dim .sec-55-cond-waiting__half-title {
  color: hsl(30 6% 42%);
}
.sec-55-cond-waiting__half--dim .sec-55-cond-waiting__item {
  color: hsl(30 6% 46%);
}
.sec-55-cond-waiting__ico--x {
  color: hsl(30 6% 52%);
  background: hsl(30 10% 82%);
}

.sec-55-cond-waiting__half--lit {
  background: var(--white);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: inset 0 0 0 1.5px hsl(var(--accent-h) 70% 55% / 0.32), 0 0 46px var(--accent-glow);
}
.sec-55-cond-waiting__half--lit .sec-55-cond-waiting__half-title,
.sec-55-cond-waiting__half--lit .sec-55-cond-waiting__item {
  color: var(--text-on-bone);
}
.sec-55-cond-waiting__ico--check {
  color: var(--accent-on);
  background: var(--accent);
}

.sec-55-cond-waiting__vs {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: clamp(52px, 5vw + 36px, 76px);
  height: clamp(52px, 5vw + 36px, 76px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px var(--bone-2), var(--shadow-glow);
}
.sec-55-cond-waiting__vs-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.85rem, 0.4rem + 1vw, 1.05rem);
  letter-spacing: 0.03em;
  color: var(--accent-on);
}

.sec-55-cond-waiting__vs[data-reveal] {
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.sec-55-cond-waiting__vs[data-reveal].is-visible {
  opacity: 1;
  transform: translate(-50%, -50%);
  animation: sec-55-cond-waiting-spin 1000ms var(--ease-out) 1;
  animation-delay: var(--reveal-delay, 0ms);
}
@keyframes sec-55-cond-waiting-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
html.reduced-motion .sec-55-cond-waiting__vs[data-reveal] {
  opacity: 1;
  transform: translate(-50%, -50%);
  animation: none;
  transition: none;
}

@media (max-width: 720px) {
  .sec-55-cond-waiting__panel {
    grid-template-columns: 1fr;
  }
  .sec-55-cond-waiting__half--dim {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .sec-55-cond-waiting__half--lit {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
}

@media (max-width: 480px) {
  .sec-55-cond-waiting__half {
    padding: 1.5rem 1.35rem;
  }
}

/* Closer line (money copy) below the split panel */
.sec-55-cond-waiting .sec-55-cond-waiting__closer {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  color: var(--text-on-bone);
  max-width: 44ch;
  margin-inline: auto;
}

/* Propel: same badge clearance as home 20-waiting. The VS badge straddles the divide, so
   each half's inner edge gets its outer padding plus half the badge and its 6px ring. */
@media (min-width: 721px) {
  .sec-55-cond-waiting__half--dim {
    padding-right: calc(clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem) + clamp(52px, 5vw + 36px, 76px) / 2 + 6px);
  }
  .sec-55-cond-waiting__half--lit {
    padding-left: calc(clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem) + clamp(52px, 5vw + 36px, 76px) / 2 + 6px);
  }
}

/* Propel: stacked (mobile) layout. The badge was absolutely centred on the whole panel,
   which is only the seam when both halves are the same height, so it landed on list text.
   Here it sits in the flow on the seam itself (negative margins pull it half into each
   half), and each half gets the same badge clearance at its inner edge. */
@media (max-width: 720px) {
  .sec-55-cond-waiting__vs[data-reveal],
  .sec-55-cond-waiting__vs[data-reveal].is-visible,
  html.reduced-motion .sec-55-cond-waiting__vs[data-reveal] {
    position: relative;
    left: auto;
    top: auto;
    justify-self: center;
    margin: calc(clamp(52px, 5vw + 36px, 76px) / -2) 0;
    transform: none;
    animation: none;
  }
  .sec-55-cond-waiting__half--dim { padding-bottom: calc(clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem) + clamp(52px, 5vw + 36px, 76px) / 2 + 6px); }
  .sec-55-cond-waiting__half--lit { padding-top: calc(clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem) + clamp(52px, 5vw + 36px, 76px) / 2 + 6px); }
}
@media (max-width: 480px) {
  .sec-55-cond-waiting__half--dim { padding-bottom: calc(1.5rem + clamp(52px, 5vw + 36px, 76px) / 2 + 6px); }
  .sec-55-cond-waiting__half--lit { padding-top: calc(1.5rem + clamp(52px, 5vw + 36px, 76px) / 2 + 6px); }
}