/* ============================================================
   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);
}

/* --vs-size drives the VS badge's own width/height AND the extra
   clearance reserved on both halves below, from one value, so the
   badge's footprint and its reserved space can never drift out of
   sync (previously only the lit half reserved this clearance; the
   dim half had none, so the badge overlapped its text). */
.sec-55-cond-waiting__panel {
  --vs-size: clamp(52px, 5vw + 36px, 76px);
  --vs-base-pad: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  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: var(--vs-base-pad);
}

.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);
  /* The VS circle sits centered on the shared border and overlaps into this
     half by its own radius too, so it needs the same reserved clearance
     the lit half gets below (was previously missing entirely). */
  padding-right: calc(var(--vs-base-pad) + var(--vs-size) / 2);
}
.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);
  /* The VS circle sits centered on the shared border and overlaps into this
     half by its own radius, so its content needs that much extra left
     padding to clear it by the same margin the outer edge gives it. */
  padding-left: calc(var(--vs-base-pad) + var(--vs-size) / 2);
}
.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: var(--vs-size);
  height: var(--vs-size);
  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;
    /* Stacked layout: the VS circle now sits on the horizontal seam between
       the two halves, not the vertical one, so clearance moves from
       padding-right to padding-bottom. */
    padding-right: var(--vs-base-pad);
    padding-bottom: calc(var(--vs-base-pad) + var(--vs-size) / 2);
  }
  .sec-55-cond-waiting__half--lit {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    /* Stacked layout: the VS circle sits centered over the seam, not to this
       half's left, so it doesn't need the desktop's extra clearance, but
       does need it above instead. */
    padding-left: var(--vs-base-pad);
    padding-top: calc(var(--vs-base-pad) + var(--vs-size) / 2);
  }
}

@media (max-width: 480px) {
  /* A plain padding shorthand here would reset the badge clearance the
     720px block reserves on dim's bottom / lit's top (padding shorthand
     sets all four sides). Shrink --vs-base-pad instead so the reserved
     sides shrink together with it, and set left/right (not reserved at
     this breakpoint) directly, plus the two sides that AREN'T reserved
     at this breakpoint (dim's top, lit's bottom). */
  .sec-55-cond-waiting__panel {
    --vs-base-pad: 1.35rem;
  }
  .sec-55-cond-waiting__half {
    padding-left: 1.35rem;
    padding-right: 1.35rem;
  }
  .sec-55-cond-waiting__half--dim {
    padding-top: 1.5rem;
  }
  .sec-55-cond-waiting__half--lit {
    padding-bottom: 1.5rem;
  }
}

/* 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;
}