/* Home only, linked from src/pages/index.astro. Every rule is scoped to a
   home-* class.

   Below the unchanged hero and What's Blooming, Home reads in four calm steps:
   1. what the service is (one-to-one online tutoring), with Begin Your
      Journey as the main action;
   2. two balanced cards: where we can help, with the five areas, and a short
      route into the family journey on Our Approach;
   3. a deep navy pause: who we are and why we began, with routes to our
      story and the team, beside Ways We Bloom;
   4. the closing invitation to begin.
   Team profiles, news and BACK each live on their own pages. */

/* 1. One-to-one online tutoring ------------------------------------------------ */

.home-tutoring {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.home-tutoring__head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.25rem, 5vw, 4.5rem);
  align-items: end;
}

.home-tutoring__head .eyebrow {
  margin-bottom: 0.9rem;
}

.home-tutoring h2 {
  max-width: 17ch;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 4vw, 3.6rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.home-tutoring__intro > p {
  max-width: 34rem;
  color: var(--ink);
  font-size: clamp(1.05rem, 1.35vw, 1.15rem);
  line-height: 1.7;
}

.home-tutoring__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-items: center;
  margin-top: 1.5rem;
}

.home-tutoring__actions .button,
.home-tutoring__actions .text-link {
  margin-top: 0;
}

.home-tutoring__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem clamp(1.5rem, 3.5vw, 3rem);
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}

.home-tutoring__points li {
  position: relative;
  padding-top: 1.4rem;
}

/* A short coral mark sits on the rule above each point. */
.home-tutoring__points li::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 2.25rem;
  height: 3px;
  background: var(--coral);
}

.home-tutoring__points h3 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2vw, 1.7rem);
  font-weight: 600;
  line-height: 1.15;
}

.home-tutoring__points p {
  margin-top: 0.55rem;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.65;
}

/* 2. The two cards: where we can help, and before lessons begin -------------- */

.home-path-card .home-areas {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.home-areas {
  border-top: 1px solid rgba(25, 59, 70, 0.2);
}

.home-areas li {
  border-bottom: 1px solid rgba(25, 59, 70, 0.2);
}

.home-areas a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 1rem;
  padding: 0.75rem 0;
  color: var(--navy);
}

/* The arrow keeps its own column, beside both lines. */
.home-areas a::after {
  content: "\2192";
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--coral-dark);
}

.home-areas__name {
  font-weight: 700;
  line-height: 1.35;
}

.home-path-card .home-areas__cue {
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.45;
}

.home-areas a:hover .home-areas__name {
  text-decoration: underline;
  text-decoration-color: var(--coral-dark);
  text-underline-offset: 0.25em;
}

.home-areas a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 0.3rem;
}

.home-path-card p.home-path-card__note {
  margin-top: 1.1rem;
  color: var(--ink);
  font-size: 0.95rem;
}


/* On sage-pale, the coral eyebrow and muted body text fall below 4.5:1, so
   the support card uses navy and ink instead. */
.home-path-card--bloom .eyebrow {
  color: var(--navy);
}

.home-path-card--bloom p:not(.eyebrow) {
  color: var(--ink);
}

/* Before lessons begin: a short summary and the journey as four steps on one
   line down the card. Both photographs keep the same height, so the headings
   line up and the whole family stays in view; side by side, the steps spread
   along the space beside Where we can help, so both cards end together. */
.home-path-card--approach {
  display: flex;
  flex-direction: column;
}

.home-path-card--approach > .home-path-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.home-path-card--approach p.home-path-card__lead {
  max-width: 28rem;
  color: var(--ink);
}

.home-journey {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.6rem;
  max-height: 21rem;
  margin: 1.5rem 0 1.6rem;
  padding: 0;
  list-style: none;
  counter-reset: home-journey;
}

/* The line joining the steps runs through the centre of each mark. */
.home-journey::before {
  content: "";
  position: absolute;
  top: 0.875rem;
  bottom: 0.875rem;
  left: 0.875rem;
  width: 1px;
  background: linear-gradient(var(--coral), var(--sage));
}

.home-journey li {
  position: relative;
  display: flex;
  gap: 0.85rem;
  align-items: center;
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  counter-increment: home-journey;
}

.home-journey li::before {
  content: counter(home-journey);
  display: grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--paper);
  color: var(--navy);
  font-size: 0.78rem;
  line-height: 1;
}

.home-journey li:last-child::before {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

.home-path-card--approach .text-link {
  align-self: flex-start;
  margin-top: auto;
}

/* 3. A deep navy pause: who we are and why we began, and Ways We Bloom -------- */

.home-invite {
  background: var(--navy);
  color: #fff;
}

.home-invite__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}

.home-invite .eyebrow {
  margin-bottom: 0.9rem;
}

.home-invite h2 {
  max-width: 16ch;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.home-invite__team > p:not(.eyebrow) {
  max-width: 30rem;
  margin-top: 1.1rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
  line-height: 1.75;
}

.home-invite__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-items: center;
  margin-top: 1.75rem;
}

.home-invite__links .button,
.home-invite .text-link {
  margin-top: 0;
}

.home-invite__links .button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.home-invite__bloom {
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  border: 1px solid rgba(237, 183, 53, 0.45);
  border-radius: 1.5rem 1.5rem 4rem;
}

.home-invite p.home-invite__words {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.6rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  line-height: 1.15;
}

.home-invite__words span::first-letter {
  color: var(--gold);
}

.home-invite__bloom > p:not(.eyebrow):not(.home-invite__words) {
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.7;
}

.home-invite__bloom .text-link {
  margin-top: 1.4rem;
}

.home-invite a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* Narrower screens --------------------------------------------------------------- */

@media (max-width: 980px) {
  /* Side by side on tablets, the cards are taller: the steps spread further. */
  .home-journey {
    max-height: 26rem;
  }
}

@media (max-width: 860px) {
  .home-tutoring__head {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .home-tutoring__points {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-tutoring__points {
    gap: 0;
  }

  .home-tutoring__points li {
    padding-block: 1.2rem;
  }

  .home-tutoring__points li:last-child {
    padding-bottom: 0;
  }

  .home-tutoring__points li + li {
    border-top: 1px solid var(--rule);
  }

  .home-tutoring__points li + li::before {
    top: -1px;
  }
}

@media (max-width: 860px) {
  .home-invite__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}