/* ===================================================================
   COUNSELORS — /counselors/
   A referral list. Someone reading it is looking for help, so the
   two things that matter on every card are the name and the number.
   =================================================================== */

/* The hero is two type styles now: the h1, then body copy. The church's
   "Emotional and spiritual wholeness is possible." opens this paragraph
   rather than sitting above it in a third weight.

   SPACING. Site-wide, a hero h1 is fitted to one line across the whole
   container (see the --h1-chars rule in style.css), so a 39-character
   headline like this one runs very wide while everything under it sits on a
   44rem measure. That width jump reads as crowding unless the vertical gaps
   are generous enough to separate the two, which is what the larger margins
   below are for — the headline gets air rather than a narrower column. */
.couns-intro {
  max-width: 44rem; margin: clamp(2.25rem, 4.5vw, 3.5rem) auto 0;
  text-align: left;
}
.couns-intro p { margin: 0; font-size: 1.05rem; line-height: 1.8; }
.couns-cta { margin: clamp(2.25rem, 4vw, 3rem) 0 0; }

/* The hero's own bottom padding plus the band below it were landing the
   crisis card almost against the button. */
.couns-hero { padding-bottom: clamp(3rem, 6vw, 4.5rem); }

/* Three up on a wide screen, two at tablet, one on a phone. Cards stretch
   so a row ends level whatever the blurb length. */
.couns-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.couns-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: var(--card-pad);
}

.couns-name {
  margin: 0 0 0.9rem; padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem); font-weight: 800;
  line-height: 1.25; letter-spacing: 0.01em; color: var(--royal);
  text-transform: uppercase;
}
.couns-name a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.couns-name a:hover { border-bottom-color: currentColor; }

.couns-blurb { margin: 0 0 0.9rem; font-size: 0.95rem; line-height: 1.65; }

/* The number is the action on most of these cards, so it sits at the bottom
   and every card's sits on the same line. Tap target is the whole number. */
.couns-phone { margin: auto 0 0; padding-top: 0.9rem; }
.couns-phone a {
  display: inline-block;
  font-weight: 700; font-size: 1.02rem; color: var(--navy);
  text-decoration: none; border-bottom: 2px solid var(--royal);
  padding: 0.15rem 0;
}
.couns-phone a:hover { color: var(--royal); }

.couns-action { margin: auto 0 0; padding-top: 0.9rem; }

@media (max-width: 62rem) { .couns-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .couns-grid { grid-template-columns: 1fr; } }

/* ===================================================================
   CRISIS BLOCK
   Sits above the list. Deliberately quiet rather than alarming — a
   red siren panel is easy to dismiss as an ad, and someone in a bad
   moment does not need to be shouted at. The red rule carries the
   weight instead.
   =================================================================== */
/* Sits inside the hero, directly under the button, with the same gap the
   button has above it. As its own <section> it carried the hero's bottom
   padding plus its own top padding — two sections' worth of air for what
   reads as one block.

   No coloured left rule: a card with a red bar down one side is the house
   style of every generated callout on the internet. The heading and the
   numbers carry it. */
.couns-crisis {
  max-width: 52rem;
  margin: clamp(2.25rem, 4vw, 3rem) auto 0;
  text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: var(--card-pad);
}
.couns-crisis-title {
  margin: 0 0 0.75rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--royal);
}
.couns-crisis-copy { margin: 0; line-height: 1.75; }
.couns-crisis-copy--small {
  margin-top: 0.75rem; font-size: 0.92rem; color: var(--slate);
}
/* The numbers are the point: heavier than body text and clearly tappable. */
.couns-crisis-copy a { font-weight: 700; color: var(--navy); text-decoration: none;
  border-bottom: 2px solid var(--royal); }
.couns-crisis-copy a:hover { color: var(--royal); }