/* Bloom With Us only, linked from src/pages/bloom-with-us.astro. Every rule is
   scoped to a bwu- class. A new file name each time it changes (the 20261011
   sheet had the embedded form's styles; 20261012 adds the Organizational roles
   landing for the openings panel's second link), so no visitor keeps the
   earlier rules cached.

   Bloom With Us is the careers page: after the opening, it asks whether we
   could be the right fit for each other and says what is open today, then
   sets out what tutoring and organizational work involve. Tutors apply with
   the button in the Tutoring section, which opens the published tutor form
   (Tally, tally.so/r/2EMGDj) in the same tab. */

.bwu-fit {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--rule);
  background: var(--sage-pale);
}

.bwu-fit__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 2.5rem clamp(2rem, 6vw, 5rem);
  align-items: start;
}

/* On sage-pale the coral eyebrow falls below 4.5:1, so the label is navy. */
.bwu-fit .eyebrow {
  color: var(--navy);
}

.bwu-fit h2 {
  max-width: 15ch;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.6vw, 3.1rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.bwu-fit__copy > p:not(.eyebrow) {
  max-width: 36rem;
  margin-top: 1rem;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.7;
}

.bwu-traits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 2.5rem);
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.bwu-traits li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.6rem;
  border-top: 1px solid rgba(25, 59, 70, 0.16);
  color: var(--ink);
  line-height: 1.55;
}

.bwu-traits li::before {
  content: "";
  position: absolute;
  top: 1.35rem;
  left: 0.15rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--coral);
}

/* The openings panel: what is open today, and a link down to the Tutoring section. */
.bwu-openings {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--coral);
  border-radius: 0.5rem 0.5rem 1.5rem 1.5rem;
  background: var(--paper);
}

.bwu-openings__label {
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
}

.bwu-openings p {
  margin-top: 0.75rem;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.65;
}

.bwu-openings p.bwu-openings__state {
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.65rem);
  line-height: 1.25;
}

.bwu-openings p.bwu-openings__families {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.98rem;
}

.bwu-openings__families a {
  display: inline-block;
  margin-top: 0.3rem;
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--coral-dark);
  text-underline-offset: 0.3em;
}

.bwu-openings__families a:hover {
  color: var(--coral-dark);
}

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

.bwu-openings p.bwu-openings__form-link a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--coral-dark);
  text-underline-offset: 0.3em;
}

.bwu-openings p.bwu-openings__form-link a:hover {
  color: var(--coral-dark);
}

.bwu-openings p.bwu-openings__form-link a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 0.3rem;
}

/* The Tutoring and Organizational roles sections are where the openings
   panel's links land; the margin keeps their top clear of the sticky site
   header. */
.bwu-tutoring,
.bwu-organizational {
  scroll-margin-top: 6rem;
}

/* The application button beneath the tutor description and list, and View
   open roles beneath the organizational roles list, in the site's
   primary-button style (.button.button-primary). */
.bwu-apply {
  margin-top: 1.75rem;
}

.bwu-work {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.bwu-work li {
  position: relative;
  padding: 0.65rem 0 0.65rem 1.6rem;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  line-height: 1.55;
}

.bwu-work li::before {
  content: "";
  position: absolute;
  top: 1.15rem;
  left: 0.15rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--coral);
}

@media (max-width: 900px) {
  .bwu-fit__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .bwu-openings {
    max-width: 36rem;
  }
}

@media (max-width: 600px) {
  .bwu-traits {
    grid-template-columns: minmax(0, 1fr);
  }
}