/* ============================================================
   04-conditions — body model + always-visible condition cards
   Every selector scoped under .sec-04-conditions.
   ============================================================ */

.sec-04-conditions {
  background: radial-gradient(120% 85% at 50% 0%, #fbf9f3 0%, var(--bone) 50%, #eee8db 100%);
}

/* --- Layout: mobile-first single column, model → left cards → right cards --- */
.sec-04-conditions .bm-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "model" "left" "right";
  gap: clamp(2rem, 5vw, 3rem);
  align-items: start;
}

@media (min-width: 900px) {
  .sec-04-conditions .bm-layout {
    grid-template-columns: 1fr minmax(260px, 330px) 1fr;
    grid-template-areas: "left model right";
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
  }
}

/* --- Body model + dots --- */
.sec-04-conditions .bm-model {
  grid-area: model;
  position: relative;
  width: 100%;
  max-width: 260px;
  margin-inline: auto;
}

@media (min-width: 900px) {
  .sec-04-conditions .bm-model {
    max-width: 330px;
  }
}

.sec-04-conditions .bm-model__glow {
  position: absolute;
  inset: -14%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, var(--accent-soft), transparent 68%);
  filter: blur(28px);
  pointer-events: none;
}

.sec-04-conditions .bm-model img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto; /* the img carries width/height attrs — without this it renders stretched */
  display: block;
  border-radius: 20px;
  box-shadow: var(--shadow-lift);
  filter: grayscale(1) contrast(1.04);
}

/* Accent-duotone tint over the model — tracks --accent so the render
   re-skins with the client's brand instead of shipping the raw asset look */
.sec-04-conditions .bm-model__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 20px;
  background: linear-gradient(170deg, hsl(var(--accent-h) 55% 62% / 0.5), hsl(var(--accent-h) 65% 30% / 0.55));
  mix-blend-mode: color;
  pointer-events: none;
}

/* --- Tap hint chip (dismisses permanently on first interaction) --- */
.sec-04-conditions .bm-hint {
  position: absolute;
  z-index: 4;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--white);
  color: var(--accent-strong);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  pointer-events: none;
  animation: bm-hint-bob 2.5s ease-in-out infinite;
  transition: opacity 300ms var(--ease-out);
}

.sec-04-conditions .bm-hint.is-dismissed {
  opacity: 0;
}

@keyframes bm-hint-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}

html.reduced-motion .sec-04-conditions .bm-hint {
  animation: none;
}

/* --- Active region glow: soft accent halo behind the active dot --- */
.sec-04-conditions .bm-active-glow {
  position: absolute;
  z-index: 1;
  width: 90px;
  height: 90px;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease-out);
}

.sec-04-conditions .bm-active-glow.is-visible {
  opacity: 1;
}

html.reduced-motion .sec-04-conditions .bm-active-glow {
  transition: none;
}

html.reduced-motion .sec-04-conditions .bm-active-glow.is-visible {
  opacity: 0.55;
}

.sec-04-conditions .bm-dot {
  position: absolute;
  z-index: 2;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--accent-strong);
  background: var(--white);
  color: var(--accent-strong);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.7rem;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background 250ms var(--ease-out), color 250ms var(--ease-out),
    border-color 250ms var(--ease-out), transform 250ms var(--ease-spring);
}

/* 44px invisible tap target around the visible dot */
.sec-04-conditions .bm-dot::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}

.sec-04-conditions .bm-dot__ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-strong);
  opacity: 0;
}

.sec-04-conditions .bm-dot:hover,
.sec-04-conditions .bm-dot:focus-visible {
  transform: translate(-50%, -50%) scale(1.08);
}

.sec-04-conditions .bm-dot:focus-visible {
  outline: 3px solid var(--accent-strong);
  outline-offset: 3px;
}

.sec-04-conditions .bm-dot.is-active {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--accent-on);
  transform: translate(-50%, -50%) scale(1.18);
}

/* --- Idle breathing loop: attention cue on one dot at a time, pre-interaction only --- */
.sec-04-conditions .bm-dot.is-breathing {
  animation: bm-breathe 1.6s ease-in-out;
}

@keyframes bm-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: var(--shadow-soft); }
  50% { transform: translate(-50%, -50%) scale(1.12); box-shadow: var(--shadow-soft), 0 0 0 8px var(--accent-glow); }
}

html.reduced-motion .sec-04-conditions .bm-dot.is-breathing {
  animation: none;
}

.sec-04-conditions .bm-dot.is-active .bm-dot__ring {
  opacity: 1;
  animation: bm-pulse 1.8s ease-out infinite;
}

@keyframes bm-pulse {
  from { transform: scale(0.55); opacity: 0.8; }
  to { transform: scale(1.9); opacity: 0; }
}

html.reduced-motion .sec-04-conditions .bm-dot.is-active .bm-dot__ring {
  animation: none;
  opacity: 0.45;
  transform: scale(1);
}

/* --- Condition cards (always visible, both columns) --- */
.sec-04-conditions .bm-cards {
  display: grid;
  gap: clamp(0.9rem, 1.8vw, 1.15rem);
  align-content: center;
}

.sec-04-conditions .bm-cards--left { grid-area: left; }
.sec-04-conditions .bm-cards--right { grid-area: right; }

.sec-04-conditions .bm-card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  border: 1.5px solid transparent;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  transition: border-color 250ms var(--ease-out), box-shadow 250ms var(--ease-out),
    transform 300ms var(--ease-spring);
}

.sec-04-conditions .bm-card.is-active {
  border-color: var(--accent-strong);
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

.sec-04-conditions .bm-card__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.sec-04-conditions .bm-card__num {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 250ms var(--ease-out), color 250ms var(--ease-out);
}

.sec-04-conditions .bm-card.is-active .bm-card__num {
  background: var(--accent-strong);
  color: var(--accent-on);
}

.sec-04-conditions .bm-card h3 {
  font-size: 1.05rem;
  margin: 0;
}

.sec-04-conditions .bm-card p {
  margin-top: 0.5rem;
  color: var(--text-on-bone-dim);
  font-size: 0.92rem;
  line-height: 1.55;
}

.sec-04-conditions .bm-card__link {
  margin-top: 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent-strong);
  text-decoration: none;
  transition: gap 200ms var(--ease-spring), color 200ms var(--ease-out);
}

.sec-04-conditions .bm-card__link:hover {
  gap: 0.65rem;
  color: var(--accent-strong);
}

/* --- Bottom CTA --- */
.sec-04-conditions .bm-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

html.reduced-motion .sec-04-conditions .bm-dot,
html.reduced-motion .sec-04-conditions .bm-card {
  transition: none;
}