/* ==========================================================================
   PAGES — layout rules that belong to one page or page type
   ==========================================================================
   Anything reused on three or more pages lives in components.css instead.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Homepage hero
   --------------------------------------------------------------------------
   Full-bleed gradient band containing the header and the three-line title.
   -------------------------------------------------------------------------- */

.hero {
  background: var(--gradient-brand);
}

.hero__inner {
  padding-top: 42px;
  padding-bottom: 132px;
}

/* Each line of the hero title is its own block, so the rule can be attached
   to the last one only. That last line is also a .page-header__row, which
   needs to stay a flex row — hence the second rule. */
.hero__line {
  display: block;
}

.hero__line.page-header__row {
  display: flex;
}

.hero__text {
  margin-top: 19px;
  font-weight: var(--fw-book);
}

.hero__actions {
  margin-top: 18px;
}

/* --------------------------------------------------------------------------
   2. Inner page header (About, Get involved, Resources, Blog, Join)
   -------------------------------------------------------------------------- */

.page-header {
  padding-top: 14px;
  padding-bottom: 40px;
}

/* Sub-pages (Certifications, Awards, …) have a "Back" link and no rule.
   Spacing below comes from the following .section, so there is none here. */
.page-header--sub {
  padding-top: 15px;
  padding-bottom: 0;
}

/* The section that follows a sub-page title would otherwise inherit the full
   72px section rhythm, leaving the heading stranded above its own list. */
.page-header--sub + .section {
  padding-top: 40px;
}

.page-header__back {
  position: relative;
  display: inline-block;
  margin-bottom: 13px;
  font-size: var(--fs-sm);
}

/* The word "Back" is only about 35x20px — too small to tap reliably on a
   phone. This invisible box extends the tap target to roughly 67x44px
   without moving the text or its underline by a single pixel. */
.page-header__back::after {
  content: "";
  position: absolute;
  inset: -12px -16px;
}

.page-header--sub .page-title {
  font-size: clamp(26px, 2.9vw, var(--fs-h2));
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

/* --------------------------------------------------------------------------
   3. Intro block — lead paragraph + body copy + button
   -------------------------------------------------------------------------- */

.intro {
  max-width: 940px;
}

.intro__lead {
  margin-bottom: 22px;
}

.intro__body > p + p {
  margin-top: 22px;
}

.intro__actions {
  margin-top: 26px;
}

/* --------------------------------------------------------------------------
   3b. Callout — a heading, a line or two of copy and a button
   --------------------------------------------------------------------------
   Used for "Become an ambassador" (Get involved) and "Volunteer" (Join).
   -------------------------------------------------------------------------- */

.callout__title {
  margin-bottom: 10px;
}

.callout > p + p {
  margin-top: 22px;
}

.callout__actions {
  margin-top: 26px;
}

/* --------------------------------------------------------------------------
   3c. Rich text — long-form body copy with sub-headings and bullet lists
   --------------------------------------------------------------------------
   Used on Volunteer and Partnerships. Headings reuse .section-title (42px) and
   .card-title (24px); only the vertical rhythm is defined here, measured from
   the YBA-2 designs.
   -------------------------------------------------------------------------- */

.rich-text {
  max-width: 940px;
}

.rich-text > * + * {
  margin-top: 22px;         /* paragraph to paragraph */
}

.rich-text > .section-title + * {
  margin-top: 18px;         /* after a 42px heading */
}

.rich-text > .card-title {
  margin-top: 24px;         /* before a 24px sub-heading */
}

.rich-text > .card-title + * {
  margin-top: 16px;         /* and after one — less than the 24px above it,
                               so the sub-heading sits with its own copy */
}

.rich-text ul {
  padding-left: 28px;
  list-style: disc;
}

.rich-text li {
  margin-bottom: 8px;
}

.rich-text li:last-child {
  margin-bottom: 0;
}

.rich-text__actions {
  margin-top: 26px;
}

/* Opt-in wider gap above a block, where the design sets one. */
.rich-text > .rich-text__spaced {
  margin-top: 44px;
}

/* --------------------------------------------------------------------------
   4. Full-width feature photo
   -------------------------------------------------------------------------- */

.feature-image {
  aspect-ratio: 1320 / 548;
  overflow: hidden;
  background: var(--c-surface);
}

.feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* On phones the photo runs edge to edge: the negative margin cancels the
   container's gutter on both sides, so there is no white margin beside it.
   Tablet and desktop keep the photo inside the content column. */
@media (max-width: 600px) {
  .feature-image {
    margin-inline: calc(var(--gutter) * -1);
  }
}

/* --------------------------------------------------------------------------
   5. Section intro — heading plus a single supporting line
   -------------------------------------------------------------------------- */

.section-intro {
  margin-bottom: 34px;
}

.section-intro__title {
  margin-bottom: 10px;
}

/* Same reading measure as .intro, so lines break where the design breaks. */
.section-intro__text {
  max-width: 940px;
  margin: 0;
}

/* Partnerships sets "Our partners" further from its standfirst than the
   homepage section intros do — measured from the YBA-2 design. */
.section-intro--roomy {
  margin-bottom: 32px;
}

.section-intro--roomy .section-intro__title {
  margin-bottom: 20px;
}

/* A section heading with no supporting line beneath it (the homepage's
   "Blog: A to B" strip). Measured at 49px in the YBA-2 design. */
.section-heading {
  margin-bottom: 49px;
}

/* The blog listing drops straight from the page title into the grid, and sits
   a little lower than a page that opens with a paragraph. */
.post-grid {
  padding-top: 16px;
}

/* Resources: the standfirst sits between the page title and the card grid.
   The narrower measure makes it break after "…certifications and", as designed. */
.resources-lead {
  max-width: 760px;
  margin-bottom: 42px;
}

/* --------------------------------------------------------------------------
   6. About — "Meet the team" grid
   --------------------------------------------------------------------------
   Four columns of person cards: an 80x80 portrait beside a name and role.
   -------------------------------------------------------------------------- */

/* The grid sits further below its standfirst than a normal section intro
   does. This margin collapses with .section-intro's, so it simply wins. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 28px;
  margin-top: 74px;
}

/* Name and role sit optically centred against the 80px portrait. */
/* The whole card is the link to that person's LinkedIn, so the anchor
   carries the grid and gives up the browser's link styling. */
.team-member {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 17px;
  align-items: center;
  color: inherit;
  text-decoration: none;
  transition: opacity 150ms ease;
}

.team-member:hover {
  opacity: 0.6;
}

.team-member:focus-visible {
  outline: 2px solid var(--c-black);
  outline-offset: 4px;
}

.team-member__photo {
  width: 80px;
  height: 80px;
  overflow: hidden;
  background: var(--c-surface);
}

.team-member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-member__name {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

.team-member__role {
  margin: 0;
}

.team-outro {
  margin-top: 76px;
}

.team-outro__actions {
  margin-top: 20px;
}

@media (max-width: 1080px) {
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 840px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  /* Two members per row rather than one full-width tile. At this width the
     portrait sits above the name instead of beside it, so both fit a
     half-width column comfortably. Desktop is unaffected. */
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
  }

  .team-member {
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
    /* Cards in a row stretch to match the tallest. Without this, the spare
       height is shared between the photo and text rows, so a one-line role
       sits lower than a two-line one and the names stop lining up. */
    align-content: start;
  }
}

/* --------------------------------------------------------------------------
   7. Blog article
   --------------------------------------------------------------------------
   A narrower reading column (934px, as designed) rather than the full grid.
   -------------------------------------------------------------------------- */

/* The article column is 934px wide, but only the figure uses all of it —
   the reading copy is set to a narrower 740px measure, as in the design. */
.article {
  max-width: 934px;
  padding-top: 15px;
}

.article > * {
  max-width: 740px;
}

.article__figure {
  max-width: none;
}

.article__date {
  margin-bottom: 20px;
  font-size: var(--fs-body);
}

.article__standfirst {
  margin-bottom: 26px;
}

/* Where the author is a YBA member this is an <a> to their LinkedIn; where
   it is not, the same rules apply harmlessly to a <div>. */
.article__author {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 32px;
  color: inherit;
  text-decoration: none;
}

a.article__author {
  transition: opacity 150ms ease;
}

a.article__author:hover {
  opacity: 0.6;
}

a.article__author:focus-visible {
  outline: 2px solid var(--c-black);
  outline-offset: 4px;
}

.article__author-photo {
  width: 80px;
  height: 80px;
  overflow: hidden;
  background: var(--c-surface);
}

.article__author-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Posts with no named author are bylined to YBA and use the wordmark rather
   than a headshot. It is far wider than the square box, so it is fitted
   inside rather than cropped to fill. */
.article__author-photo--mark img {
  object-fit: contain;
  padding: 10px;
}


.article__author-name {
  margin: 0;
  font-weight: var(--fw-medium);
}

.article__author-role {
  margin: 0;
}

.article__figure {
  margin: 0 0 44px;
}

.article__figure img {
  width: 100%;
  height: auto;
}

/* Captions drop to the small size and step up to medium weight so they read
   as a label adding context to the image rather than as another line of
   body copy. */
.article__figure figcaption {
  margin-top: 9px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

/* --------------------------------------------------------------------------
   Pull quotes inside an article
   --------------------------------------------------------------------------
   No quotation-mark graphic and no italic — this brand states things rather
   than decorating them. A 2px rule at the same weight as the link underlines
   marks the quote, the words sit at lead size, and the attribution drops back
   to body size.
   -------------------------------------------------------------------------- */

.article__quote {
  /* Drops the browser's default 40px blockquote indent — the rule and the
     padding below do that job instead. */
  margin: 0;
  padding-left: 22px;
  border-left: var(--underline-weight) solid var(--c-black);
}

/* That margin reset also cancels .rich-text's paragraph rhythm, which is why
   the spacing is restated here. Quotes carry more weight than a paragraph and
   two of them in a row must not touch, so they get the same 34px the figures
   use rather than the 22px between paragraphs. */
.rich-text > .article__quote {
  margin-top: 34px;
}

.article__quote p {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  /* The quote carries the emphasis; the attribution below stays Book. */
  font-weight: var(--fw-medium);
}

.article__quote-by {
  margin-top: 12px;
  font-size: var(--fs-body);
}

/* A figure inside .rich-text is a child of that block, not of .article, so it
   needs its own rhythm — and it runs the full width of the text column rather
   than being capped like a paragraph. */
.rich-text > .article__figure {
  margin-top: 34px;
  max-width: none;
}

.rich-text > .article__figure + * {
  margin-top: 34px;
}

.article__actions {
  margin-top: 34px;
}

/* Topic tags beneath the article. */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}

.tag-list a {
  font-size: var(--fs-body);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.tag-list a:hover {
  border-bottom-color: currentColor;
}

.article-share {
  margin-top: 46px;
}

.article-share__title {
  margin-bottom: 18px;
}

.read-more {
  margin-top: 46px;
}

.read-more__title {
  margin-bottom: 28px;
}

/* --------------------------------------------------------------------------
   7b. 404 page
   -------------------------------------------------------------------------- */

.notfound-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   8. Privacy / long-form legal copy
   -------------------------------------------------------------------------- */

.legal {
  max-width: 940px;
  padding-top: 26px;
}

.legal h2 {
  margin: 28px 0 14px;
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: var(--fw-book);
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}

.legal h3 {
  margin: 24px 0 12px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  letter-spacing: 0;
  text-transform: none;
}

.legal p {
  margin: 0 0 22px;
}

.legal ul {
  margin: 0 0 22px;
  padding-left: 22px;
  list-style: disc;
}

/* The YBA-2 privacy design sets 8px between list items (the earlier design
   ran them together). Same rhythm as .rich-text. */
.legal li {
  margin-bottom: 8px;
}

.legal li:last-child {
  margin-bottom: 0;
}

.legal__meta {
  margin-bottom: 22px;
}