/* ===================================================================
   THE 5 HABITS — /5-habits/
   Loaded only by src/5-habits.njk. Everything here extends components
   that already live in style.css rather than restating them.

   THE SOURCE PAGE used a zigzag: a big ghost numeral behind each habit,
   artwork on alternating sides, body copy opposite. We keep the numeral
   and the alternation — they carry the "1 of 5" progression — but not
   the artwork, because the five icons were never supplied as files.
   =================================================================== */

/* --- start the process: three numbered steps --------------------- */
.habit-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.habit-step {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: var(--card-pad);
}
.habit-step-label {
  margin: 0 0 0.6rem;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--royal);
}
.habit-step-copy { margin: 0; line-height: 1.65; }

@media (max-width: 62rem) {
  .habit-steps { grid-template-columns: 1fr; }
}

/* The Form button under the three steps. */
.habit-form-cta { margin: clamp(2rem, 4vw, 2.75rem) 0 0; text-align: center; }

/* --- the five habits --------------------------------------------- */
/* Cards, two up, matching the Start The Process cards above and the campus
   ministry cards on /locations/<campus>/ — same shell, same radius, same
   border. Five into two leaves one over, so the fifth spans the full width
   rather than sitting alone in a half-width column; its copy is capped so the
   measure stays readable across the wider card. */
.habit-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.habit {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: var(--card-pad);
  /* Old /arrowsout-style links land on a habit by id; keep the sticky header
     from covering the card it jumps to. */
  scroll-margin-top: 6rem;
}
.habit:last-child { grid-column: 1 / -1; }
.habit:last-child .habit-copy { max-width: 52rem; }

/* The numeral is decoration — the <h3> carries the heading, and aria-hidden
   keeps "1" from being announced before every habit name. */
.habit-numeral {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; margin: 0 0 1.25rem;
  border-radius: 50%; background: var(--royal);
  color: #fff; font-size: 1.05rem; font-weight: 800; line-height: 1;
  user-select: none;
}

.habit-name {
  margin: 0 0 1.1rem;
  font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--navy);
}
.habit-why {
  margin: 0 0 0.75rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--slate);
}
/* Bottom margin is the gap above the Develop button — see the note there. */
.habit-copy { margin: 0 0 1.75rem; line-height: 1.7; }

@media (max-width: 62rem) {
  .habit-list { grid-template-columns: 1fr; }
  .habit:last-child .habit-copy { max-width: none; }
}

/* ===================================================================
   DEVELOP THE HABIT — the sub-pages (/5-habits/<habit>/)
   Named habit-detail-* rather than anything about Scripture, so the
   other four habits use these same rules when their copy arrives.
   =================================================================== */

/* The church's opening paragraph, sitting under the headline inside the hero.
   44rem keeps the measure readable; text-align left because a justified-centre
   block of eight lines is harder to read than a left-aligned one. */
.habit-detail-intro {
  max-width: 44rem; margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  text-align: left;
}
.habit-detail-intro p { margin: 0; font-size: 1.05rem; line-height: 1.75; }

/* 16:9 player. Self-contained on purpose: the near-identical .sermon-player
   lives in sermons.css, which this page does not load, and borrowing it
   rendered the iframe at its unstyled 300x150 default. */
.habit-detail-player {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 52rem; margin-inline: auto;
  border-radius: 10px; overflow: hidden;
  background: var(--navy);
}
.habit-detail-player iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}

/* Books / Reading Plans / Podcasts / Videos sit two up; Practice is
   prose and takes the full width underneath. Same card shell as the
   habit cards on /5-habits/. */
.habit-detail-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.habit-detail-card {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: var(--card-pad);
}
.habit-detail-card--wide { grid-column: 1 / -1; }

.habit-detail-title {
  margin: 0 0 1.1rem; padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
  font-size: 1.05rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--navy);
}

.habit-detail-list { list-style: none; margin: 0; padding: 0; }
.habit-detail-list li + li {
  margin-top: 0.9rem; padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
/* These are links and have to look like links standing still, not on hover.
   A list of book titles in body colour is indistinguishable from a list of
   book titles — the red and the rule under it are what say "tap this".
   The unlinked entries below stay navy and unruled, so the difference
   between a resource you can open and one we have no URL for is visible
   rather than discovered. */
.habit-detail-list a {
  display: inline; font-weight: 700; color: var(--royal);
  text-decoration: none;
  border-bottom: 2px solid rgba(178, 48, 53, 0.35);
}
.habit-detail-list a:hover,
.habit-detail-list a:focus-visible {
  color: var(--royal-ink); border-bottom-color: currentColor;
}
/* Author sits under the title rather than inside the link, so the link
   text is the book and nothing else. */
.habit-detail-by {
  display: block; margin-top: 0.2rem;
  font-size: 0.9rem; color: var(--slate);
}

.habit-detail-copy { margin: 0 0 1rem; line-height: 1.75; }
.habit-detail-copy:last-child { margin-bottom: 0; }

.habit-detail-steps {
  list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.habit-detail-steps > li {
  padding-top: 1.25rem; border-top: 1px solid var(--line);
}
.habit-detail-step-title {
  margin: 0 0 0.6rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--navy);
}
.habit-detail-step-title span { color: var(--royal); }

.habit-detail-back { margin: clamp(2rem, 4vw, 2.75rem) 0 0; text-align: center; }

@media (max-width: 62rem) {
  .habit-detail-grid { grid-template-columns: 1fr; }
}

/* Develop-the-habit link, pinned to the bottom of the card so every card in a
   row ends on the same line however long its copy runs.
   .habit is the flex column, but the link is a child of .habit-body, so
   `margin-top: auto` had nothing to push against until .habit-body became a
   column of its own that grows to fill the card. */
.habit-body { display: flex; flex-direction: column; flex: 1; }
/* margin-top:auto pins the button to the bottom of the card so every card in
   a row ends level. It cannot also carry the gap above it — auto and a length
   are the same property, and the length would win and break the pinning — so
   the copy above owns that space instead — see .habit-copy. */
.habit-develop { margin-top: auto; align-self: flex-start; }

/* A resource with no URL yet. Same weight as its linked siblings so the list
   reads evenly, but no hover and no pointer — it is text, not a link. */
.habit-detail-unlinked { display: block; font-weight: 600; color: var(--navy); }

/* A list that follows its own intro paragraph rather than a rule. */
.habit-detail-list--tight { margin-top: 1.1rem; }