/*
 * For Prescribers (page-for-prescribers.php)
 * Section styles for template-parts/prescribers/*. Loaded after style.css,
 * which owns the tokens, base, buttons, the audience switcher, header and
 * footer.
 *
 * Lengths are the Figma values converted to the theme's fluid scale
 * (px / 1920 * 100 = vw), so the page tracks the 1920px design canvas.
 *
 * Inner measures inside .container--wide (1686px of content):
 *   hero                  — 1584px (168px page margins)
 *   resources and FAQs    — 1368px (276px page margins)
 */

/* ==========================================================================
   Shared to this page
   ========================================================================== */
.prescribers-eyebrow {
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.283;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-blue);
}
.prescribers-eyebrow--ruled {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, calc(0.57 * var(--vw)), 0.6875rem);
}
.prescribers-eyebrow__rule {
  flex: 0 0 auto;
  width: clamp(34px, calc(3.23 * var(--vw)), 62px);
  height: 2px;
  background: var(--c-orange);
}
.prescribers-hero .accent,
.prescribers-resources .accent {
  color: var(--c-orange);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.prescribers-hero {
  background: var(--c-white);
  /* Matches the For Employers hero's top/bottom padding, so the eyebrow sits
     the same distance below the header on every audience page. */
  padding-block: clamp(1.5rem, calc(3.8 * var(--vw)), 4.56rem);
}
.prescribers-hero__inner {
  max-width: var(--measure-wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
/* Spacing only — the pill rail itself is the global .audience-switcher */
.prescribers-hero__switcher {
  margin-top: clamp(1.25rem, calc(1.51 * var(--vw)), 1.8125rem);
}
.prescribers-hero__title {
  margin-top: clamp(1.25rem, calc(2.34 * var(--vw)), 2.8125rem);
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.283;
  color: var(--c-charcoal);
}
.prescribers-hero__btn {
  margin-top: clamp(1.5rem, calc(3.49 * var(--vw)), 4.1875rem);
  padding-inline: clamp(1.5rem, calc(2.5 * var(--vw)), 3rem);
  text-transform: uppercase;
  font-weight: 600;
}
/* 558 wide, offset 126 into the 792px column — as drawn, then sized down
   ~15% and nudged further right per the launch sweep: it was crowding the
   H1. A smaller --hero-art-inset shifts the art closer to the column's
   right edge, i.e. further right, away from the copy. */
.prescribers-hero__art {
  --hero-art-w: 474;
  --hero-art-inset: 75;
}
.prescribers-hero__art img {
  transition: transform 0.5s var(--ease-out);
}
.prescribers-hero__art:hover img {
  transform: scale(1.03);
}

/* ==========================================================================
   Forms, appeals and answers
   ========================================================================== */
.prescribers-resources {
  background: var(--c-cream);
  padding-block: clamp(2.5rem, calc(6.1458 * var(--vw)), 7.375rem) /* 118 */
    clamp(2.5rem, calc(6.0938 * var(--vw)), 7.3125rem); /* 117 */
}
.prescribers-resources__inner {
  max-width: var(--measure-narrow);
  margin-inline: auto;
}
.prescribers-resources__heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.28;
  color: var(--c-charcoal);
}
.prescribers-resources__intro {
  margin-top: clamp(1rem, calc(1.93 * var(--vw)), 2.3125rem);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
}

/* The three stacked blocks: prior auth, MAC appeals, forms and documents */
.prescribers-block {
  margin-top: clamp(2rem, calc(3.59 * var(--vw)), 4.3125rem);
}
/* Forms & Documents sits closer to the block above it in the design */
.prescribers-block:last-child {
  margin-top: clamp(1.5rem, calc(2.55 * var(--vw)), 3.0625rem);
}
.prescribers-block__title {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.28;
  color: var(--c-charcoal);
}
.prescribers-block__link {
  margin: clamp(0.75rem, calc(1.09 * var(--vw)), 1.3125rem) 0 0;
  font-size: var(--fs-h6);
  font-weight: 700;
  line-height: 1.28;
}
.prescribers-block__link a {
  color: var(--c-orange);
  text-decoration: underline;
  text-underline-position: from-font;
  transition: filter var(--motion-quick) ease;
}
.prescribers-block__link a:hover {
  filter: brightness(1.2);
}
.prescribers-block__lead {
  margin: clamp(1rem, calc(1.35 * var(--vw)), 1.625rem) 0 0;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
}
.prescribers-block__phone {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.28;
}
.prescribers-block__phone a {
  color: var(--c-blue);
}
.prescribers-block__note {
  margin: clamp(1rem, calc(1.51 * var(--vw)), 1.8125rem) 0 0;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.8;
}
.prescribers-block__note a {
  color: var(--c-orange);
}
.prescribers-block__note a:hover {
  text-decoration: underline;
}
.prescribers-block__eyebrow {
  margin: clamp(0.75rem, calc(1.04 * var(--vw)), 1.25rem) 0 0;
  font-size: var(--fs-ui);
  font-weight: 700;
  line-height: 1.8;
  text-transform: uppercase;
  color: var(--c-charcoal);
}
.prescribers-block__body {
  margin: clamp(0.5rem, calc(0.36 * var(--vw)), 0.4375rem) 0 0;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
}
.prescribers-block__body a {
  color: var(--c-orange);
  text-decoration: underline;
  text-underline-position: from-font;
  transition: filter var(--motion-quick) ease;
}
.prescribers-block__body a:hover {
  filter: brightness(1.2);
}
/* Forms & Documents has no eyebrow, so its body carries the wider gap */
.prescribers-block:last-child .prescribers-block__body {
  margin-top: clamp(1rem, calc(1.82 * var(--vw)), 2.1875rem);
}

/* ==========================================================================
   FAQs
   ========================================================================== */
.prescribers-faqs {
  background: var(--c-ice);
  padding-block: clamp(2rem, calc(5 * var(--vw)), 6rem) clamp(2.75rem, calc(6.98 * var(--vw)), 8.376rem);
}
.prescribers-faqs__inner {
  max-width: var(--measure-narrow);
  margin-inline: auto;
}
.prescribers-faqs__heading {
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: var(--c-charcoal);
}
/* The rows themselves are the shared .faq accordion in style.css */
.prescribers-faqs__list {
  margin-top: clamp(2rem, calc(3.28 * var(--vw)), 3.9375rem);
}

/* A visitor who has asked for reduced motion still gets the feedback, just
   not the movement — see front-page.css's reduced-motion block. */
@media (prefers-reduced-motion: reduce) {
  .prescribers-hero__art:hover img {
    transform: none;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991px) {
  .prescribers-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.5rem;
  }
  .prescribers-hero__art {
    width: min(100%, 558px);
    margin: 0 auto;
  }
}