/* Bowen Island Judo Club — page-About-Us.css
   Page-only rules for About-Us.html, linked after site.css. Scoped to <main class="page-about-us">.
   Owned by the About-Us page builder; shared rules live in site.css (read-only, see STYLEGUIDE.md). */

/* Hero: the sun rises behind "T US"; its rim stays clear of the kicker */
.page-about-us .page-hero__sun { --sun-x: 40%; --sun-size: clamp(240px, 31vw, 440px); }
@media (min-width: 900px) {
  /* "ABOUT US" (~3.5em wide) fills ~90% of its column, as "CLASSES" does, instead of floating in empty paper.
     The column is ~58vw up to 1320px and ~730px above that. A user's extra letter-spacing wraps it at the space. */
  .page-about-us .page-hero__title--m { font-size: min(14.8vw, 11.75rem); }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .page-about-us .page-hero__lead { font-size: 1.125rem; }   /* five lines at 20px in the narrow side column */
}
@media (min-width: 600px) and (max-width: 899px) {
  .page-about-us .page-hero__sun { right: auto; left: 56vw; }   /* behind "US", as on Classes and Contact */
}

/* Instructor bios: portrait (5) + long-form text (7) */
.page-about-us .bio__media {
  --bio-pt: 0px;          /* room above the photo (Dave: the sun rises there) */
  overflow: visible; isolation: isolate;
  padding-top: var(--bio-pt);
}
.page-about-us .bio__media img { border: 3px solid var(--ink); } /* light studio walls need an edge on white */
.page-about-us .bio--cohen .bio__media { --bio-ratio: .7498; }
.page-about-us .bio--dave .bio__media { --bio-ratio: .6983; --bio-pt: clamp(60px, 7vw, 100px); }
/* the one extra sun on the page: rising behind Dave's portrait (the frame's top edge is its horizon),
   set a little toward the outer edge so it reads as a rising sun, not a halo */
.page-about-us .bio__sun {
  position: absolute; z-index: -1;
  top: 0; left: 60%;
  width: 64%; aspect-ratio: 1;
  transform: translateX(-50%);
}
.page-about-us .bio { scroll-margin-top: calc(16px - var(--sec)); } /* jump links land on the portrait, not the section's top padding */
/* name then role in the DOM (CONTENT.md order; heading navigation lands on the group), role kicker shown above */
.page-about-us .bio__head { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
.page-about-us .bio__prose { margin-top: clamp(22px, 2.4vw, 34px); max-width: 31em; } /* ~65-70 characters a line */
.page-about-us .bio__prose .lead { font-size: clamp(1.1875rem, 1.05rem + .35vw, 1.375rem); line-height: 1.55; }
.page-about-us .bio__prose hr { margin-block: 1.9em 1.6em; }
@media (min-width: 900px) {
  .page-about-us .bio .split__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .page-about-us .bio.split--flip .split__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  /* the sticky portrait never grows taller than the space under the header */
  .page-about-us .bio__media {
    width: 100%;
    max-width: calc((100vh - var(--header-h) - 56px - var(--bio-pt)) * var(--bio-ratio));
  }
  .page-about-us .bio--dave .bio__media { justify-self: end; }
}
@media (max-width: 899px) {
  .page-about-us .bio__media { max-width: 440px; } /* phones: full width; tablets: a portrait, not a poster wall */
}

/* Closing call to action: a black "ticket" on the paper band (class list = .jump.jump--on-dark) */
.page-about-us .about-cta { padding-block: calc(var(--sec) * .75); }
.page-about-us .about-cta__panel {
  display: grid; gap: 32px;
  background: var(--ink); color: var(--white);
  padding: clamp(28px, 4vw, 56px);
}
.page-about-us .about-cta__main { display: grid; gap: 24px; justify-items: start; align-content: space-between; }
.page-about-us .about-cta .jump { align-self: end; }
@media (min-width: 900px) {
  /* side by side: the kicker top-aligns with the list's top rule, Register Now sits on its bottom rule.
     (The footer's "Contact us" follows straight after, so the panel carries only the primary action.) */
  .page-about-us .about-cta__panel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); }
}
@media (max-width: 599px) {
  .page-about-us .about-cta__panel { padding-inline: 20px; }
  .page-about-us .about-cta .btn-row .btn { padding-inline: 20px; }
}