/* ============================================================
   READING SKILLS PAGE (reading-skills.html)
   ------------------------------------------------------------
   Loaded after styles.css, on this page only.

   The home banner uses the shared .banner-only-section / .hero-*
   rules from styles.css unchanged, so it is exactly the same size
   as every other banner. Only its colours and the missing product
   logo are handled here.

   Reused components (restyled to this page's design):
     - .rs-compare     the comparison grid from "The Vijnata
                       Advantage" (vijnata-higher-ed .advantage-grid)
     - .rs-gain-card   the stat card from sambhutilearning.com
                       (.sl-stat-card: icon, underlined title,
                       coloured bottom border)
     - .rs-gray-card   the grey card from Vijnata's "Two-Pronged
                       Approach" (.gray-card)
     - the contact form from the VidyaBuddhi home page
   ============================================================ */

.rs-page,
.rs-contact {
  --rs-navy: #0e1d75;
  --rs-indigo: #2e3083;
  --rs-orange: #d95801;
  --rs-ink: #222222;
  --rs-line: #e6e6ee;
  font-family: 'PT Sans', sans-serif;
  color: var(--rs-ink);
}

/* ---- Home banner ----
   Title and description keep the shared banner colour (#0E1D75, from
   styles.css), the same as every other banner. The orange words use
   the same orange as sambhutilearning.com's banners (.hero-highlight,
   #D95801). */
.rs-hero-accent {
  color: #D95801;
}

.rs-hero .hero-description p {
  margin-bottom: 0.9em;
}

.rs-hero .hero-description p:last-child {
  margin-bottom: 0;
}

/* The other banners lift the text by half the product-logo block so
   the title lands where it would with no logo. This banner has no
   logo, so there is nothing to lift. */
@media (min-width: 992px) {
  .rs-hero .hero-text-wrap {
    transform: none;
  }
}

/* "Learn More" in the banner jumps to "What Is Reading Fluency?". The
   offset keeps the heading clear of the fixed navbar. */
#what-is-it,
#what-is-reading-fluency {
  scroll-margin-top: 100px;
}

/* ---- Page layout ---- */
.rs-container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

.rs-section {
  padding-top: 72px;
}

.rs-title {
  font-family: 'PT Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, calc(14px + 2.2vw), 46px);
  line-height: 1.2;
  color: var(--rs-indigo, #2e3083);
  text-align: center;
  margin-bottom: 40px;
}

.rs-heading {
  font-family: 'PT Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(21px, calc(10px + 1.4vw), 30px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--rs-ink);
  margin: 48px 0 20px;
}

.rs-title + .rs-heading {
  margin-top: 0;
}

.rs-step {
  color: var(--rs-orange);
}

.rs-text,
.rs-list {
  font-size: clamp(16px, calc(10px + 0.6vw), 19px);
  line-height: 1.5;
  margin-bottom: 1.1em;
}

.rs-list {
  padding-left: 1.6em;
}

.rs-list li + li {
  margin-top: 2px;
}

.rs-list-bold li {
  font-weight: 700;
}

/* ---- Text + image side by side ---- */
.rs-media {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.rs-photo {
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--rs-line);
}

.rs-media--diagram {
  justify-content: center;
}

.rs-media--diagram img {
  width: 100%;
  max-width: 340px;
  height: auto;
}

/* ============================================================
   COMPARISON GRID (from "The Vijnata Advantage")
   Three columns: row label, then two white cards. The cards are
   two background boxes behind the cells, so every row lines up
   across both cards. Set --rows on the grid to the number of grid
   rows (header + data rows).
   ============================================================ */
.rs-compare {
  display: grid;
  grid-template-columns: 0.58fr 1fr 1fr;
  column-gap: 8px;
  margin-top: 24px;
}

.rs-c1 { grid-column: 1; }
.rs-c2 { grid-column: 2; }
.rs-c3 { grid-column: 3; }
.rs-r1 { grid-row: 1; }
.rs-r2 { grid-row: 2; }
.rs-r3 { grid-row: 3; }
.rs-r4 { grid-row: 4; }

.rs-compare-bg {
  grid-row: 1 / span var(--rows);
  background: #ffffff;
  border: 1px solid #ececf3;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.rs-compare-head {
  position: relative;
  font-size: clamp(17px, calc(6px + 1vw), 20px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--rs-indigo);
  padding: 22px 20px 14px;
}

.rs-compare-head.rs-c3 {
  color: var(--rs-orange);
}

.rs-compare-label {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  margin: 0 0 0 19px;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--rs-indigo);
}

.rs-compare-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 14px 20px;
}

/* the last row (the grid's last two cells) gets the card's bottom padding */
.rs-compare > .rs-compare-item:nth-last-child(-n + 2) {
  padding-bottom: 22px;
}

/* separators between rows, inset from the card edges */
.rs-sep::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: var(--rs-line);
}

.rs-compare-label.rs-sep::before {
  left: 0;
  right: 0;
}

.rs-point {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rs-point i {
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--rs-navy);
}

.rs-compare-item.rs-c3 .rs-point i {
  color: var(--rs-orange);
}

.rs-point p {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #333333;
}

.rs-compare-tag {
  display: none;
}

/* ============================================================
   GAIN CARDS (from sambhutilearning.com's stat cards)
   ============================================================ */
.rs-gain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.rs-gain-card {
  --tone: var(--rs-navy);
  --tint: #f0f1f8;
  background: #ffffff;
  border-radius: 16px;
  border-bottom: 4px solid var(--tone);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  padding: 22px 16px 20px;
  text-align: center;
}

.rs-gain--orange {
  --tone: var(--rs-orange);
  --tint: #fdf3ec;
}

.rs-gain--indigo {
  --tone: var(--rs-indigo);
}

.rs-gain-icon {
  width: 92px;
  height: 92px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--tint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tone);
  box-shadow: 0 0 0 5px #ffffff, 0 0 0 6px #ececf3, 0 4px 12px 6px rgba(0, 0, 0, 0.04);
}

.rs-gain-icon svg {
  width: 46px;
  height: 46px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rs-gain-title {
  position: relative;
  display: inline-block;
  font-size: 24px;
  font-weight: 700;
  color: var(--tone);
  padding-bottom: 6px;
  margin-bottom: 14px;
}

.rs-gain--indigo .rs-gain-title {
  color: var(--rs-navy);
}

.rs-gain-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
}

.rs-gain--indigo .rs-gain-title::after {
  background: var(--rs-indigo);
}

.rs-gain-text {
  font-size: 15px;
  line-height: 1.45;
  color: #333333;
  margin: 0;
}

/* ---- Reading fluency list: one ruled line under each part ---- */
.rs-fluency-list {
  font-size: clamp(16px, calc(10px + 0.6vw), 19px);
  line-height: 1.5;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-fluency-list li {
  position: relative;
  padding: 12px 0 12px 38px;
  border-bottom: 1px solid var(--rs-line);
}

.rs-fluency-list li:first-child {
  padding-top: 0;
}

.rs-fluency-list li::before {
  content: "";
  position: absolute;
  left: 17px;
  top: calc(12px + 0.75em - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.rs-fluency-list li:first-child::before {
  top: calc(0.75em - 3px);
}

/* ============================================================
   GREY CARDS (from Vijnata's "Two-Pronged Approach")
   ============================================================ */
.rs-gray-card {
  background-color: #f8f8f9;
  border: 1px solid var(--rs-line);
  border-radius: 16px;
  padding: 20px 20px 24px;
}

.rs-gray-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 24px;
  font-weight: 700;
  color: var(--rs-orange);
  margin-bottom: 14px;
}

.rs-gray-card-title i {
  font-size: 28px;
  line-height: 1;
}

.rs-gray-card-lead {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--rs-ink);
  margin-bottom: 14px;
}

.rs-gray-card-list {
  font-size: 18px;
  line-height: 1.55;
  padding-left: 30px;
  margin: 0;
}

/* ---- See it in action ---- */
.rs-gallery {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}

.rs-gallery img {
  width: 100%;
  height: auto;
  border-radius: 24px;
}

/* ---- Contact ----
   styles.css styles every .contact-section h2 (35px, black, Plus
   Jakarta Sans), so the heading here is matched more specifically. */
.rs-contact {
  padding: 96px 20px 48px;
}

.rs-contact h2.rs-title {
  font-family: 'PT Sans', sans-serif;
  font-size: clamp(26px, calc(14px + 2.2vw), 46px);
  line-height: 1.2;
  color: var(--rs-indigo);
  margin-bottom: 8px;
}

.rs-contact-subtitle {
  font-size: clamp(17px, calc(10px + 0.7vw), 21px);
  color: #666666;
  margin-bottom: 40px;
}

/* ============================================================
   TABLET (below 992px): text and images stack
   ============================================================ */
@media (max-width: 991.98px) {
  .rs-section {
    padding-top: 56px;
  }

  /* same side gutter as the banner above (60px on tablets) */
  .rs-container {
    padding: 0 60px;
  }

  .rs-title {
    margin-bottom: 28px;
  }

  .rs-heading {
    margin: 36px 0 16px;
  }

  .rs-media {
    justify-content: flex-start;
  }

  /* the source photos are small, so they stay near their own size */
  .rs-photo {
    max-width: 520px;
  }

  .rs-photo--portrait {
    max-width: 400px;
  }

  .rs-media--diagram {
    justify-content: center;
  }

  .rs-compare-head {
    padding: 18px 16px 12px;
  }

  .rs-compare-label {
    margin-left: 14px;
    font-size: 14px;
  }

  .rs-compare-item {
    padding: 12px 16px;
  }

  .rs-sep::before {
    left: 16px;
    right: 16px;
  }

  .rs-point i {
    font-size: 19px;
  }

  .rs-point p {
    font-size: 15px;
  }

  .rs-gain-grid {
    gap: 12px;
  }

  .rs-gain-icon {
    width: 76px;
    height: 76px;
  }

  .rs-gain-icon svg {
    width: 38px;
    height: 38px;
  }

  .rs-gain-title {
    font-size: 21px;
  }

  .rs-gray-card-title {
    font-size: 21px;
  }

  .rs-gray-card-list {
    font-size: 16px;
  }

  .rs-contact {
    padding-top: 72px;
  }
}

/* ============================================================
   PHONE (below 768px)
   ============================================================ */
@media (max-width: 767.98px) {
  .rs-section {
    padding-top: 48px;
  }

  .rs-container {
    padding: 0 20px;
  }

  .rs-hero .hero-description p {
    margin-bottom: 0.7em;
  }

  /* comparison grid: stacked row by row, one small card per cell
     (the same phone layout as "The Vijnata Advantage") */
  .rs-compare {
    display: block;
    margin-top: 8px;
  }

  .rs-compare-bg,
  .rs-compare-head {
    display: none;
  }

  .rs-compare-label {
    display: block;
    margin: 22px 0 10px;
    padding: 0;
    font-size: 14px;
  }

  .rs-compare-item,
  .rs-compare > .rs-compare-item:nth-last-child(-n + 2) {
    display: block;
    padding: 14px 16px;
    margin-bottom: 10px;
    background: #ffffff;
    border: 1px solid #ececf3;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  }

  .rs-sep::before {
    display: none;
  }

  .rs-compare-tag {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--rs-indigo);
  }

  .rs-compare-item.rs-c3 .rs-compare-tag {
    color: var(--rs-orange);
  }

  .rs-point {
    align-items: flex-start;
  }

  .rs-point i {
    margin-top: 2px;
  }

  /* gain cards: one per row */
  .rs-gain-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .rs-gray-card {
    padding: 18px 16px 20px;
  }

  .rs-gray-card-title {
    font-size: 20px;
  }

  .rs-gray-card-title i {
    font-size: 24px;
  }

  .rs-gray-card-lead {
    font-size: 16px;
  }

  .rs-gray-card-list {
    font-size: 16px;
    padding-left: 22px;
  }

  .rs-gallery {
    gap: 16px;
  }

  .rs-gallery img {
    border-radius: 16px;
  }

  .rs-contact {
    padding: 56px 20px 40px;
  }

  .rs-contact-subtitle {
    margin-bottom: 8px;
  }
}