/* components-redesign.css, Restructuring long text content with visual patterns */

/* ──────────────────────────────────────────── */
/* Step Grid, Numbered steps / actions */
/* ──────────────────────────────────────────── */

.pd-step-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pd-space-5);
  margin: var(--pd-space-6) 0;
}

@media (min-width: 768px) {
  .pd-step-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pd-step-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .pd-step-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.pd-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--pd-space-5);
  background: var(--pd-neutral-50);
  border-radius: var(--pd-radius);
  border: 1px solid var(--pd-neutral-200);
  transition: all var(--pd-dur) var(--pd-ease);
}

.pd-step:hover {
  border-color: var(--pd-primary);
  box-shadow: var(--pd-shadow);
}

.pd-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--pd-primary);
  color: var(--pd-white);
  font-size: var(--pd-fs-lg);
  font-weight: var(--pd-fw-bold);
  border-radius: var(--pd-radius);
  margin-bottom: var(--pd-space-4);
  flex-shrink: 0;
}

.pd-step__icon {
  width: 24px;
  height: 24px;
  color: var(--pd-primary);
  margin-right: var(--pd-space-3);
  flex-shrink: 0;
}

.pd-step h3 {
  margin: 0 0 var(--pd-space-3) 0;
  font-size: var(--pd-fs-md);
  font-weight: var(--pd-fw-semibold);
  color: var(--pd-neutral-900);
  line-height: var(--pd-lh-tight);
}

.pd-step p {
  margin: 0;
  font-size: var(--pd-fs-sm);
  color: var(--pd-neutral-600);
  line-height: var(--pd-lh-normal);
}

/* ──────────────────────────────────────────── */
/* Stat Band, Big numbers / KPIs */
/* ──────────────────────────────────────────── */

.pd-stat-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pd-space-5);
  padding: var(--pd-space-6);
  background: linear-gradient(135deg, var(--pd-primary-50) 0%, var(--pd-accent-50) 100%);
  border-radius: var(--pd-radius-lg);
  margin: var(--pd-space-6) 0;
  border: 1px solid rgba(11, 77, 162, 0.1);
}

@media (min-width: 768px) {
  .pd-stat-band {
    grid-template-columns: repeat(3, 1fr);
  }
  .pd-stat-band.cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.pd-stat {
  text-align: center;
}

.pd-stat__number {
  display: block;
  font-size: var(--pd-fs-3xl);
  font-weight: var(--pd-fw-bold);
  color: var(--pd-primary);
  line-height: var(--pd-lh-tight);
  margin-bottom: var(--pd-space-2);
}

.pd-stat__label {
  display: block;
  font-size: var(--pd-fs-sm);
  font-weight: var(--pd-fw-semibold);
  color: var(--pd-neutral-700);
  text-transform: uppercase;
  letter-spacing: var(--pd-tracking-tight);
}

/* ──────────────────────────────────────────── */
/* Pros/Cons, Two column comparison */
/* ──────────────────────────────────────────── */

.pd-pros-cons {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pd-space-6);
  margin: var(--pd-space-6) 0;
}

@media (min-width: 768px) {
  .pd-pros-cons {
    grid-template-columns: 1fr 1fr;
  }
}

.pd-pros,
.pd-cons {
  padding: var(--pd-space-5);
  border-radius: var(--pd-radius);
  border: 2px solid;
}

.pd-pros {
  background: rgba(31, 191, 122, 0.05);
  border-color: var(--pd-success);
}

.pd-cons {
  background: rgba(224, 49, 49, 0.05);
  border-color: var(--pd-danger);
}

.pd-pros h3,
.pd-cons h3 {
  margin: 0 0 var(--pd-space-4) 0;
  font-size: var(--pd-fs-md);
  font-weight: var(--pd-fw-bold);
  display: flex;
  align-items: center;
  gap: var(--pd-space-2);
}

.pd-pros h3 { color: var(--pd-success); }
.pd-cons h3 { color: var(--pd-danger); }

.pd-pros__item,
.pd-cons__item {
  display: flex;
  gap: var(--pd-space-3);
  margin-bottom: var(--pd-space-4);
  font-size: var(--pd-fs-sm);
  color: var(--pd-neutral-700);
  line-height: var(--pd-lh-normal);
}

.pd-pros__item:last-child,
.pd-cons__item:last-child {
  margin-bottom: 0;
}

.pd-pros__icon,
.pd-cons__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.pd-pros__icon { color: var(--pd-success); }
.pd-cons__icon { color: var(--pd-danger); }

/* ──────────────────────────────────────────── */
/* Callout, Info/warning/CTA boxes */
/* ──────────────────────────────────────────── */

.pd-callout {
  padding: var(--pd-space-5);
  border-radius: var(--pd-radius);
  border-left: 4px solid;
  margin: var(--pd-space-6) 0;
  display: flex;
  gap: var(--pd-space-3);
}

.pd-callout.info {
  background: rgba(11, 77, 162, 0.05);
  border-color: var(--pd-primary);
}

.pd-callout.warning {
  background: rgba(245, 180, 0, 0.05);
  border-color: var(--pd-warning);
}

.pd-callout.cta {
  background: var(--pd-accent-50);
  border-color: var(--pd-accent);
  flex-direction: column;
  align-items: flex-start;
}

.pd-callout__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.pd-callout.info .pd-callout__icon { color: var(--pd-primary); }
.pd-callout.warning .pd-callout__icon { color: var(--pd-warning); }
.pd-callout.cta .pd-callout__icon { color: var(--pd-accent); }

.pd-callout__content {
  flex: 1;
  font-size: var(--pd-fs-sm);
  line-height: var(--pd-lh-normal);
}

.pd-callout h3 {
  margin: 0 0 var(--pd-space-2) 0;
  font-size: var(--pd-fs-md);
  font-weight: var(--pd-fw-semibold);
  color: var(--pd-neutral-900);
}

.pd-callout p {
  margin: 0 0 var(--pd-space-3) 0;
  color: var(--pd-neutral-700);
}

.pd-callout p:last-child {
  margin-bottom: 0;
}

/* ──────────────────────────────────────────── */
/* Utility Grids */
/* ──────────────────────────────────────────── */

.pd-grid--2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pd-space-5);
  margin: var(--pd-space-6) 0;
}

@media (min-width: 768px) {
  .pd-grid--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.pd-grid--3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pd-space-5);
  margin: var(--pd-space-6) 0;
}

@media (min-width: 768px) {
  .pd-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ──────────────────────────────────────────── */
/* Generic Card */
/* ──────────────────────────────────────────── */

.pd-card {
  padding: var(--pd-space-5);
  background: var(--pd-white);
  border-radius: var(--pd-radius);
  border: 1px solid var(--pd-neutral-200);
  transition: all var(--pd-dur) var(--pd-ease);
}

.pd-card:hover {
  border-color: var(--pd-primary);
  box-shadow: var(--pd-shadow);
}

/* ──────────────────────────────────────────── */
/* Icon utilities */
/* ──────────────────────────────────────────── */

.pd-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  color: currentColor;
}