/* Fox Run Eye Care: Prescription Glasses page. Colors only via tokens. */

/* ─── Two-column layout (image + text) ─────────────────── */
.rx-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.rx-two-col--img-right {
  direction: rtl;
}
.rx-two-col--img-right > * {
  direction: ltr;
}
.rx-two-col__img {
  border-radius: var(--radius-img);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 97, 125, 0.15);
}
.rx-two-col__img img {
  display: block;
  width: 100%;
  height: auto;
}
.rx-hero { background: var(--white); }
.rx-two-col__text h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  color: var(--teal-dark);
  line-height: var(--lh-tight);
  margin: 0 0 1rem;
  text-wrap: balance;
}
.rx-two-col__text h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--teal-dark);
  line-height: var(--lh-tight);
  margin: 0 0 1rem;
  text-wrap: balance;
}
.rx-two-col__text h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--teal-dark);
  line-height: var(--lh-tight);
  margin: 0 0 0.75rem;
  text-wrap: balance;
}
.rx-two-col__text p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text);
  line-height: var(--lh-body);
  margin: 0 0 1.5rem;
}
.rx-two-col__text p:last-child {
  margin-bottom: 0;
}
.rx-two-col__text a:not(.btn) {
  color: var(--teal);
  font-weight: 600;
  text-decoration: underline;
}
.rx-two-col__text a:not(.btn):hover { color: var(--teal-hover); }

/* ─── Section heading above a content block ─────────────── */
.rx-section-head {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--teal-dark);
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0 0 2rem;
}

/* ─── Text-only two-column (no image) ───────────────────── */
.rx-text-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.rx-text-col h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--teal-dark);
  line-height: var(--lh-tight);
  margin: 0 0 1rem;
  text-wrap: balance;
}
.rx-text-col p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text);
  line-height: var(--lh-body);
  margin: 0;
}
.rx-text-col a:not(.btn) {
  color: var(--teal);
  font-weight: 600;
  text-decoration: underline;
}
.rx-text-col a:not(.btn):hover { color: var(--teal-hover); }

/* ─── Custom eyewear intro paragraph ────────────────────── */
.rx-custom-intro {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text);
  line-height: var(--lh-body);
  max-width: 780px;
  margin: 0 0 0.5rem;
}
.rx-custom-intro a:not(.btn) {
  color: var(--teal);
  font-weight: 600;
  text-decoration: underline;
}
.rx-custom-intro a:not(.btn):hover { color: var(--teal-hover); }

/* ─── Shared cards margin helpers ───────────────────────── */
.rx-cards-mt { margin-top: 2rem; }
.rx-cards-mt-sm { margin-top: 1.5rem; }

/* ─── Card body text links ──────────────────────────────── */
.cards .card-text a:not(.btn) {
  color: var(--teal);
  font-weight: 600;
  text-decoration: underline;
}
.cards .card-text a:not(.btn):hover { color: var(--teal-hover); }

/* ─── Column image (fitting section) ───────────────────── */
.rx-col-img {
  border-radius: var(--radius-img);
  overflow: hidden;
  margin-bottom: 1rem;
  aspect-ratio: 2 / 1;
}
.rx-col-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── Fitting section (white background) ────────────────── */
.rx-fitting-band {
  background: var(--white);
  padding: calc(var(--band-pad) * 0.75) 0;
}



/* ─── Intro (centered text under hero) ─────────────────── */
.rx-intro {
  text-align: left;
  max-width: var(--content-narrow);
  margin: 0 auto;
}
.rx-intro h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--teal-dark);
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0 0 1rem;
}
.rx-intro p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text);
  line-height: var(--lh-body);
  margin: 0;
}
.rx-intro a:not(.btn) {
  color: var(--teal);
  font-weight: 600;
  text-decoration: underline;
}
.rx-intro a:not(.btn):hover { color: var(--teal-hover); }


.faq a:not(.btn) {
  color: var(--teal);
  font-weight: 600;
  text-decoration: underline;
}
.faq a:not(.btn):hover { color: var(--teal-hover); }



/* ─── Mobile ────────────────────────────────────────────── */
@media (max-width: 767px) {
  .rx-two-col,
  .rx-text-two-col {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .rx-two-col--img-right {
    direction: ltr;
  }
  .rx-two-col__img {
    aspect-ratio: auto;
  }

}