/* /counseling-for-depression (PAWC-304).
   Everything is prefixed cfd- or scoped under .cfd-page so nothing here reaches another page;
   the shared tokens, typography and buttons come from style.css, and the provider cards from
   provider-card-detailed.css. */

.cfd-page {
  --cfd-surface: #eaf0e9;
  --cfd-surface-strong: #dfe8de;
  --cfd-line: rgba(16, 57, 62, 0.12);
  --cfd-radius: 24px;
  /* The light cards (signs checklist, Why Choose features): grey fill with a hairline border. */
  --cfd-card-bg: #f1f3ef;
  --cfd-card-border: #dfe3dc;
}

.cfd-card {
  border: 1px solid var(--cfd-card-border);
  background: var(--cfd-card-bg);
}

.cfd-section {
  padding: 96px 0;
}

.cfd-page .heading-h2 {
  margin: 12px 0 20px;
}

.cfd-badge {
  margin: 0 !important;
}

.cfd-split-header {
  align-items: flex-end;
  margin-bottom: 40px;
}

.cfd-centered-header {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}

.cfd-centered-header .text-base-regular {
  font-size: 18px;
  line-height: 30px;
}

.cfd-centered-header .badge-text-green {
  margin: 0 auto !important;
}

/* Buttons: style.css sizes them; these add the trailing arrow and drop the stray margin. */
.cfd-button {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}

.cfd-button--small {
  padding: 10px 22px;
  font-size: 14px;
}

.cfd-button .cfd-icon {
  width: 16px;
  height: 16px;
}

.cfd-icon {
  flex: 0 0 auto;
  display: block;
}

.cfd-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-brand-primary-50);
  color: var(--color-white);
  flex: 0 0 auto;
}

/* ---------- Hero ---------- */
.cfd-hero {
  padding: 24px 40px 0;
}

.cfd-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1440px;
  margin: 0 auto;
  border-radius: var(--cfd-radius);
  overflow: hidden;
  background: var(--bg-base-green);
}

.cfd-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 64px;
  color: var(--color-white);
}

.cfd-hero-title {
  margin: 8px 0 24px;
  font-size: 52px !important;
  line-height: 60px !important;
}

.cfd-hero-lead {
  font-size: 20px;
  line-height: 30px;
  color: var(--color-white);
  margin-bottom: 16px;
}

.cfd-hero-body {
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 32px;
}

.cfd-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-self: stretch;
  /* Pinned to the bottom of the panel, under a hairline; the CTA's bottom margin keeps it at
     least 56px away when the panel is short. */
  margin: auto 0 0;
  padding: 28px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.cfd-hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cfd-hero-trust .cfd-icon {
  width: 16px;
  height: 16px;
}

.cfd-hero-content > .cfd-button {
  margin-bottom: 56px;
}

.cfd-hero-media {
  min-height: 100%;
}

.cfd-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The subject sits a little left of center in the landscape photo. */
  object-position: 42% center;
}

/* ---------- Providers ---------- */
.cfd-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 12px 12px 24px;
  margin-bottom: 32px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  border: 1px solid var(--cfd-line);
}

.cfd-filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.cfd-filter-label {
  font-size: 14px;
  color: var(--color-text);
}

.cfd-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cfd-chip {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--cfd-surface);
  color: var(--color-dark-green);
  font-size: 14px;
  font-weight: 500;
}

.cfd-chip--active {
  background: var(--bg-base-green);
  color: var(--color-white);
}

/* ---------- Signs ---------- */
.cfd-signs-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 440px;
  margin-top: 48px;
  border-radius: var(--cfd-radius);
  object-fit: cover;
}

.cfd-signs-intro {
  font-size: 18px;
  line-height: 32px;
}

.cfd-signs-card {
  height: 100%;
  padding: 16px 40px 36px;
  border-radius: var(--cfd-radius);
}

/* One row per sign, each closed by a hairline - the last one too, so the closing line sits
   under a rule like in the design. */
.cfd-signs-list {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.cfd-signs-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--cfd-card-border);
  font-size: 18px;
  line-height: 28px;
  color: var(--color-heading);
}

.cfd-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-brand-primary-50);
  color: var(--color-white);
  flex: 0 0 auto;
}

.cfd-check .cfd-icon {
  width: 16px;
  height: 16px;
}

.cfd-signs-closing {
  margin: 0;
  font-size: 18px;
  line-height: 30px;
  font-weight: 500;
  color: var(--color-dark-green);
}

/* ---------- Treatments ---------- */
.cfd-treatments {
  padding: 64px;
  border-radius: var(--cfd-radius);
  background: var(--bg-base-green);
  color: rgba(255, 255, 255, 0.85);
}

.cfd-treatments .heading-h2 {
  color: var(--color-white);
}

.cfd-treatments-intro {
  margin-bottom: 24px;
  color: var(--color-white);
}

/* One light card: a sage header band, then rows split by hairlines. border-collapse stays
   separate (spacing 0) so the rounded corners clip with overflow:hidden. */
.cfd-approaches {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #f6f7f4;
}

.cfd-approaches thead th {
  padding: 18px 32px;
  background: var(--cfd-surface-strong);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-dark-green);
}

.cfd-approaches tbody th,
.cfd-approaches tbody td {
  padding: 22px 32px;
  vertical-align: middle;
}

.cfd-approaches tbody tr + tr th,
.cfd-approaches tbody tr + tr td {
  border-top: 1px solid var(--cfd-card-border);
}

.cfd-approaches tbody th {
  width: 40%;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: var(--color-heading);
}

.cfd-approach-name {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cfd-approaches .cfd-icon-circle {
  width: 44px;
  height: 44px;
}

.cfd-approaches .cfd-icon-circle .cfd-icon {
  width: 20px;
  height: 20px;
}

.cfd-approaches tbody td {
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text);
}

/* ---------- Why choose ---------- */
.cfd-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0 0 48px;
  padding: 0;
  list-style: none;
}

.cfd-feature {
  padding: 36px;
  border-radius: 20px;
}

.cfd-feature .cfd-icon-circle {
  width: 48px;
  height: 48px;
}

.cfd-feature .cfd-icon-circle .cfd-icon {
  width: 22px;
  height: 22px;
}

.cfd-feature-title {
  margin: 32px 0 10px;
  font-family: var(--font-intel);
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.2px;
  color: var(--color-dark-green);
}

.cfd-feature-text {
  margin: 0;
  font-size: 17px;
  line-height: 28px;
  color: var(--color-text);
}

/* ---------- CTA ---------- */
.cfd-cta {
  padding: 80px 64px;
  border-radius: var(--cfd-radius);
}

.cfd-cta .heading-h2 {
  color: var(--color-white);
}

/* The heading block sits centered in its half, as in the design (left-aligned text). */
@media (min-width: 768px) {
  .cfd-cta-left {
    display: flex;
    justify-content: center;
  }
}

.cfd-cta-lead {
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  margin-bottom: 12px;
}

.cfd-cta-body {
  margin-bottom: 24px;
  opacity: 0.85;
}

/* ---------- FAQ ---------- */
.cfd-faq-image {
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-top: 32px;
  border-radius: var(--cfd-radius);
}

.cfd-faq .accordion-item {
  border: 0;
  border-radius: 12px !important;
  overflow: hidden;
}

/* Answers render as paragraphs; only the gap between two of them should show. */
.cfd-faq .accordion-body p {
  margin: 0 0 12px;
}

.cfd-faq .accordion-body p:last-child {
  margin-bottom: 0;
}

/* ---------- Crisis line (under the FAQ) ---------- */
.cfd-crisis {
  margin: 24px 0 0;
  padding: 20px 24px;
  border-radius: 12px;
  border-left: 4px solid var(--bg-base-green);
  background-color: var(--color-white);
  font-size: 15px;
  line-height: 24px;
  color: var(--colors-text-text-secondary-700, #344054);
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .cfd-hero-content {
    padding: 48px;
  }

  .cfd-hero-title {
    font-size: 44px !important;
    line-height: 52px !important;
  }
}

@media (max-width: 991px) {
  .cfd-section {
    padding: 64px 0;
  }

  .cfd-hero {
    padding: 16px 16px 0;
  }

  .cfd-hero-inner {
    grid-template-columns: 1fr;
  }

  .cfd-hero-media {
    max-height: 420px;
    overflow: hidden;
  }

  .cfd-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cfd-treatments,
  .cfd-cta {
    padding: 48px 32px;
  }
}

@media (max-width: 767px) {
  .cfd-hero-content {
    padding: 32px 24px;
  }

  .cfd-hero-title {
    font-size: 34px !important;
    line-height: 42px !important;
  }

  .cfd-hero-trust {
    padding-top: 32px;
  }

  .cfd-filter-bar {
    border-radius: 20px;
    padding: 16px;
  }

  .cfd-signs-card {
    padding: 8px 24px 28px;
  }

  .cfd-signs-intro,
  .cfd-signs-list li,
  .cfd-signs-closing {
    font-size: 16px;
    line-height: 26px;
  }

  .cfd-signs-list li {
    padding: 14px 0;
  }

  .cfd-feature-grid {
    grid-template-columns: 1fr;
  }

  .cfd-feature {
    padding: 28px;
  }

  .cfd-feature-title {
    margin-top: 24px;
    font-size: 20px;
  }

  .cfd-feature-text {
    font-size: 16px;
    line-height: 26px;
  }

  .cfd-treatments,
  .cfd-cta {
    padding: 40px 20px;
  }

  /* The approaches table becomes stacked rows: name over description. */
  .cfd-approaches,
  .cfd-approaches tbody,
  .cfd-approaches tr,
  .cfd-approaches th,
  .cfd-approaches td {
    display: block;
    width: 100% !important;
  }

  .cfd-approaches thead {
    display: none;
  }

  /* One block per approach: the hairline sits above the name, not between name and text. */
  .cfd-approaches tbody tr + tr td {
    border-top: 0;
  }

  .cfd-approaches tbody th {
    padding: 18px 20px 4px;
    font-size: 16px;
  }

  .cfd-approaches tbody td {
    /* 20px gutter + 44px icon + 16px gap, so the text lines up under the name. */
    padding: 0 20px 18px 80px;
    font-size: 15px;
    line-height: 24px;
  }
}