/* ============================================================
   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);
  /* Both halves are left-aligned text, so the left half's content naturally
     sits away from the center VS badge while the right half's content sits
     flush against it. Extra left padding here gives the right half the same
     visual clearance from the badge that the left half gets from its own
     outer edge. */
  padding-left: clamp(5rem, 4rem + 3.6vw, 6.25rem);
}
.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);
}

/* html:not(.no-js) prefix so this strictly outranks base.css's
   `html:not(.no-js) [data-reveal].is-visible` (specificity 0,3,1) - without
   it, base's `transform: none` won the tie and the badge jumped from
   centered to offset by half its own size the moment .is-visible landed. */
html:not(.no-js) .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);
}
html:not(.no-js) .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;
}