/*
 * LPVI — Condition Page v4
 * 11-page-condition.css
 */

/* ══════════════════════════════════════
   STATS BAR
══════════════════════════════════════ */

.cond-stats-bar {
  background: var(--color-navy);
  padding-block: var(--space-10);
  border: none;
}

.cond-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.cond-stat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: rgba(255,255,255,0.90);
  white-space: nowrap;
}

.cond-stat__value {
  color: var(--color-action);
  font-weight: var(--weight-black);
}

.cond-stat__label {
  color: rgba(255,255,255,0.70);
  font-weight: var(--weight-medium);
}

.cond-stat__sep {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-action);
  flex-shrink: 0;
  opacity: 0.60;
}

/* ══════════════════════════════════════
   EXPLAIN SECTION — 2-col, no image
══════════════════════════════════════ */

.cond-explain__grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-16);
  align-items: start;
}

.cond-explain__body {
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: var(--leading-normal);
  margin-top: var(--space-4);
  margin-bottom: var(--space-5);
}

.cond-recovery-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: rgba(107,191,154,0.06);
  border: 0.5px solid rgba(107,191,154,0.30);
  border-left: 3px solid var(--color-action);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

.cond-approach-box {
  background: var(--color-bg-alt);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}

.cond-trust-box {
  background: var(--color-bg-white);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cond-trust-box__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

/* ══════════════════════════════════════
   CANDIDACY CARDS — 4-col image grid
══════════════════════════════════════ */

.cond-candidacy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.cond-candidacy-card {
  background: var(--color-bg-white);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-align: left;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  transition:
    box-shadow  var(--duration-slow) var(--ease-out),
    transform   var(--duration-slow) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.cond-candidacy-card:hover {
  box-shadow: 0 12px 40px rgba(26,43,60,0.12);
  transform: translateY(-4px);
  border-color: rgba(107,191,154,0.40);
}

/* Image — inset hover (mirrors conditions grid) */
.cond-candidacy-card__image {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--color-bg-alt);
  flex-shrink: 0;
  padding: 8px 8px 0 8px;
  transition: padding 0.5s var(--ease-out);
}

.cond-candidacy-card:hover .cond-candidacy-card__image {
  padding: 0;
}

.cond-candidacy-card__image-inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(26,43,60,0.12);
  transition:
    border-radius 0.5s var(--ease-out),
    box-shadow    0.5s var(--ease-out);
}

.cond-candidacy-card:hover .cond-candidacy-card__image-inner {
  border-radius: 0;
  box-shadow: none;
}

.cond-candidacy-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.7s var(--ease-out);
}

.cond-candidacy-card:hover .cond-candidacy-card__image img {
  transform: scale(1.04);
}

/* Card gradient fade */
.cond-candidacy-card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 50%,
    rgba(255,255,255,0.20) 70%,
    rgba(255,255,255,0.75) 88%,
    var(--color-bg-white) 100%
  );
  pointer-events: none;
}

.cond-candidacy-card__body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.cond-candidacy-card__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-action-text);
  display: block;
}

.cond-candidacy-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

.cond-candidacy-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: var(--leading-normal);
  flex: 1;
}

.cond-candidacy-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-action-text);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-top: var(--space-2);
  transition: gap var(--duration-base) var(--ease-out);
}

.cond-candidacy-card__more:hover { gap: var(--space-3); }

/* ══════════════════════════════════════
   MODAL OVERLAY
══════════════════════════════════════ */

.cond-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.cond-modal[hidden] { display: none; }

.cond-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 18, 28, 0.75);
  backdrop-filter: blur(4px);
  animation: modal-fade-in 0.25s var(--ease-out) both;
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cond-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--color-navy);
  border-radius: var(--radius-xl);
  max-width: 860px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: modal-slide-up 0.3s var(--ease-out) both;
  box-shadow: 0 40px 100px rgba(0,0,0,0.40);
}

@keyframes modal-slide-up {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cond-modal__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 0.5px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  transition:
    background var(--duration-fast) var(--ease-out);
}

.cond-modal__close:hover { background: rgba(255,255,255,0.20); }

.cond-modal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 440px;
}

.cond-modal__image-wrap {
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  overflow: hidden;
}

.cond-modal__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.cond-modal__content {
  padding: var(--space-12) var(--space-10);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
}

/* Text-only modal variant — no image grid */
.cond-modal__panel--text {
  max-width: 680px;
}

.cond-modal__content--full {
  padding: var(--space-12) var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cond-modal__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  color: white;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.cond-modal__text {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.75);
  line-height: var(--leading-normal);
}

/* ══════════════════════════════════════
   SYMPTOMS GRID
══════════════════════════════════════ */

.cond-symptoms-section { }

.cond-symptoms-header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.cond-symptom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  max-width: 840px;
  margin-inline: auto;
}

.cond-symptom-chip {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-white);
  border: 0.5px solid var(--color-border);
  border-left: 3px solid var(--color-action);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    transform    var(--duration-base) var(--ease-out);
}

.cond-symptom-chip:hover {
  border-color: rgba(107,191,154,0.55);
  transform: translateX(4px);
}

.cond-symptom-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-action);
  flex-shrink: 0;
}

.cond-symptom-chip__text {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

.cond-symptoms-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-10);
  flex-wrap: wrap;
}

/* ══════════════════════════════════════
   PROCESS STEPS
══════════════════════════════════════ */

.cond-process-section { }

.cond-process-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.cond-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  position: relative;
  max-width: 960px;
  margin-inline: auto;
}

.cond-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  position: relative;
  padding: 0 var(--space-4);
}

.cond-step__number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-action);
  color: white;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: var(--space-4);
  box-shadow: 0 4px 16px rgba(107,191,154,0.35);
  position: relative;
  z-index: 1;
}

.cond-step__connector {
  position: absolute;
  top: 24px;
  left: calc(50% + 24px);
  right: calc(-50% + 24px);
  height: 1.5px;
  background: linear-gradient(to right, var(--color-action), rgba(107,191,154,0.25));
}

.cond-step__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-body);
  line-height: var(--leading-normal);
  max-width: 18ch;
}

/* ══════════════════════════════════════
   VS CONVENTIONAL
══════════════════════════════════════ */

.cond-vs-section { }

.cond-vs-header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.cond-vs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  max-width: 900px;
  margin-inline: auto;
}

.cond-vs-card {
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cond-vs-card--conventional {
  background: rgba(26,43,60,0.04);
  border: 0.5px solid rgba(26,43,60,0.10);
}

.cond-vs-card--lpvi {
  background: rgba(107,191,154,0.05);
  border: 1.5px solid rgba(107,191,154,0.40);
  box-shadow: 0 8px 32px rgba(107,191,154,0.12);
}

.cond-vs-card__label-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.cond-vs-card__label {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}

.cond-vs-card--lpvi .cond-vs-card__label { color: var(--color-action-text); }

.cond-vs-card__icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cond-vs-card__icon--x {
  background: rgba(220,53,69,0.10);
  color: #dc3545;
}

.cond-vs-card__icon--check {
  background: rgba(107,191,154,0.15);
  color: var(--color-action-text);
}

.cond-vs-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: var(--leading-normal);
}

.cond-vs-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cond-vs-list li {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  line-height: 1.3;
}

.cond-vs-list--bad li {
  color: var(--color-text-muted);
  background: rgba(26,43,60,0.03);
}

.cond-vs-list--bad li::before {
  content: '✕';
  color: #dc3545;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}

.cond-vs-list--good li {
  color: var(--color-text-primary);
  background: rgba(107,191,154,0.06);
}

.cond-vs-list--good li::before {
  content: '✓';
  color: var(--color-action-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}

/* ══════════════════════════════════════
   DOCTOR QUOTE
══════════════════════════════════════ */

.cond-doctor-section {
  background: var(--color-navy);
  position: relative;
  overflow: hidden;
  padding-block: var(--space-16);
}

.cond-doctor-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 10% 50%, rgba(107,191,154,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 50%, rgba(120,161,187,0.09) 0%, transparent 50%);
  pointer-events: none;
}

.cond-doctor-card {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.cond-doctor-card__quote-mark {
  font-family: Georgia, serif;
  font-size: 80px;
  line-height: 0.6;
  color: var(--color-action);
  opacity: 0.35;
  margin-bottom: var(--space-4);
  display: block;
}

.cond-doctor-card__quote {
  font-size: var(--text-md);
  color: rgba(255,255,255,0.85);
  line-height: var(--leading-loose);
  font-style: italic;
  margin: 0 0 var(--space-8);
}

.cond-doctor-card__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.cond-doctor-card__avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(107,191,154,0.40);
}

.cond-doctor-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: white;
  margin-bottom: 2px;
  text-align: left;
}

.cond-doctor-card__creds {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.50);
  letter-spacing: var(--tracking-wide);
  text-align: left;
}

/* ══════════════════════════════════════
   RELATED CONDITIONS
══════════════════════════════════════ */

.cond-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.cond-related-card {
  background: var(--color-bg-white);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition:
    box-shadow  var(--duration-slow) var(--ease-out),
    transform   var(--duration-slow) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.cond-related-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
  border-color: rgba(107,191,154,0.40);
}

.cond-related-card__image {
  height: 160px;
  overflow: hidden;
}

.cond-related-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s var(--ease-out);
}

.cond-related-card:hover .cond-related-card__image img { transform: scale(1.05); }

.cond-related-card__body {
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.cond-related-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

.cond-related-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: var(--leading-normal);
  flex: 1;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

@media (max-width: 1024px) {
  .cond-candidacy-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .cond-explain__grid   { grid-template-columns: 1fr; gap: var(--space-8); }
  .cond-symptom-grid    { grid-template-columns: 1fr; }
  .cond-vs-grid         { grid-template-columns: 1fr; }
  .cond-related-grid    { grid-template-columns: 1fr; gap: var(--space-4); }
  .cond-modal__grid     { grid-template-columns: 1fr; }
  .cond-modal__image-wrap { height: 240px; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .cond-modal__image-wrap img { height: 240px; }
  .cond-modal__content  { padding: var(--space-8) var(--space-6); }
}

@media (max-width: 768px) {
  .cond-stats           { gap: var(--space-6); }
  .cond-stat__sep       { display: none; }
  .cond-stat            { font-size: var(--text-sm); }
  .cond-candidacy-grid  { grid-template-columns: 1fr; }
  .cond-steps           { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .cond-step            { flex-direction: row; text-align: left; padding: 0; align-items: flex-start; }
  .cond-step__number    { margin-bottom: 0; margin-right: var(--space-4); flex-shrink: 0; }
  .cond-step__connector { display: none; }
  .cond-step__label     { max-width: 100%; padding-top: var(--space-3); }
  .cond-doctor-card__footer { flex-direction: column; text-align: center; }
  .cond-doctor-card__name,
  .cond-doctor-card__creds  { text-align: center; }
  .cond-related-grid    { grid-template-columns: 1fr; }
}