/* ============================================================
   Dr. Z Answers — layout and rhythm corrections
   Loaded after answers.css on /answers/ and /answers/{slug}.
   Overrides only. answers.css is untouched.
   ============================================================ */

/* ---------------------------------------------------------------
   1. ONE COLUMN EDGE ON THE ANSWER PAGE

   Before: the H1 block was 820px, the short answer 1124px and the
   body 848px, each starting at a different x. Three left edges on
   one page reads as broken even when nothing is technically wrong.

   After: head, short answer and body all share the body column.
   The table of contents lives in the left margin, which is the
   documentation-site pattern and the correct one for a reference page.
   --------------------------------------------------------------- */
.answer { max-width: 1120px; }

@media (min-width: 981px) {
  .answer-head,
  .ans-short,
  .ans-preview-banner {
    margin-left: 276px;          /* 230px rail + 46px gap */
    max-width: 800px;
  }
  .answer-layout { grid-template-columns: 230px minmax(0, 800px); }
}

/* Headline sized for a question, not a magazine cover. */
.answer-head h1 { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -.035em; line-height: 1.1; }

/* ---------------------------------------------------------------
   2. THE SHORT ANSWER

   It is the most valuable 60 words on the page and the block an AI
   answer engine lifts. Quieter box, louder text.
   --------------------------------------------------------------- */
.ans-short {
  background: linear-gradient(160deg, #eef4fa 0%, #fdfefe 70%);
  box-shadow: none;
  border: 1px solid rgba(28, 71, 121, .13);
  border-left: 3px solid var(--navy);
  border-radius: 6px 20px 20px 6px;
  padding: 26px 32px;
}
.ans-short-text { font-size: 18.5px; line-height: 1.62; color: #22334c; }

/* ---------------------------------------------------------------
   3. CTA PLACEMENT

   Before: a full navy slab fired between the short answer and the
   first line of content. On a medical page that reads as a sales
   interruption before the reader has been helped.

   After: the first CTA sits below the body, quiet and bordered.
   The solid navy one stays at the end, after the sources, where a
   reader who has finished is a reader worth asking.
   --------------------------------------------------------------- */
.ans-cta--soft {
  background: var(--paper, #FFFDF9);
  color: var(--ink, #192D4D);
  border: 1px solid rgba(25, 45, 77, .14);
  box-shadow: none;
  border-radius: 18px;
  padding: 22px 26px;
  margin: 30px 0 6px;
}
.ans-cta--soft .ans-cta-blurb { color: #4a5a70; font-size: 14.5px; }
.ans-cta--soft .ans-btn,
.ans-cta--soft .button {
  background: transparent;
  color: var(--navy, #1C4779);
  border: 1.5px solid var(--navy, #1C4779);
  box-shadow: none;
}
.ans-cta--soft .ans-btn:hover { background: var(--navy, #1C4779); color: #fff; }

/* ---------------------------------------------------------------
   4. INDEX CARDS

   PHP was cutting the text mid-word and appending an ellipsis, so
   cards ended on things like "which is made b...". The full text is
   now in the DOM and CSS clamps it on a line boundary.
   --------------------------------------------------------------- */
.ans-pa p,
.ans-hero-card p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ans-pa p { -webkit-line-clamp: 3; }
.ans-hero-card p { -webkit-line-clamp: 3; }
/* Line clamp cuts on the line, so a long clamp lands mid-word.
   Three lines lets the question carry the card and keeps the cut clean. */
.ans-hero-card h3 { font-size: 21px; line-height: 1.24; }

/* Popular grid: four columns squeezes a question into three lines.
   Three columns lets each card breathe. */
@media (min-width: 1100px) {
  .ans-popular-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------------
   5. SMALL RHYTHM CORRECTIONS
   --------------------------------------------------------------- */
.ans-review { font-size: 12.5px; }
.ans-review-dates { color: var(--navy, #1C4779); font-weight: 600; }

/* The sources block is a trust signal. Let it read as a list, not as cards. */
.ans-sources h2, .ans-related h2 {
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--navy, #1C4779); font-weight: 700;
}

/* Feedback sits closer to the end of the reading, not floating. */
.ans-feedback { margin-top: 30px; }

@media (max-width: 980px) {
  .answer-head, .ans-short, .ans-preview-banner { margin-left: 0; max-width: none; }
}