/* ============================================================
   New-IA page components (What's on, news index, articles,
   support us, contact…). Loaded after styles.css + nav.css.
   Same tokens, same ticket/print language.
   ============================================================ */

/* ---------- Event cards (This month) ---------- */
.event-list {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem;
}
.event-card {
  background: var(--white); border-radius: 14px; box-shadow: var(--shadow-card);
  display: flex; align-items: stretch; overflow: hidden; position: relative;
}
.event-date {
  flex: none; width: 82px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--cream); border-right: 2px dashed var(--line); padding: 1rem .35rem;
  font-family: var(--font-display); line-height: 1;
}
.event-date .d { font-size: 1.9rem; font-weight: 800; color: var(--ink); }
.event-date .m { font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-top: .3rem; }
.event-date .wd { font-size: .72rem; font-weight: 600; color: var(--ink-soft); margin-top: .25rem; }
.event-body { padding: 1.05rem 1.2rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.event-body h3 { margin: 0; font-size: 1.2rem; }
.event-mode {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .14rem .7rem; border-radius: var(--pill); align-self: flex-start;
}
.event-mode--in-person { background: var(--blue); color: var(--white); }
.event-mode--online { background: var(--yellow); color: var(--ink); }
.event-mode--big-night { background: var(--red); color: var(--white); }
.event-meta { font-size: .95rem; color: var(--ink-soft); margin: 0; }
.event-book { font-size: .95rem; margin: .15rem 0 0; }
.event-book a { font-weight: 600; }
.event-sample {
  position: absolute; top: .6rem; right: .8rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--cream-deep); border-radius: var(--pill); padding: .14rem .6rem;
}
.event-empty {
  max-width: 640px; margin: 0 auto; padding: 0 var(--pad); text-align: center; color: var(--ink-soft);
}

/* type tiles on the hub */
.tile-grid {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
}
.tile {
  display: flex; flex-direction: column; gap: .3rem;
  background: var(--white); border-radius: var(--radius); padding: 1.5rem 1.35rem 1.35rem;
  box-shadow: var(--shadow-card); border-top: 4px solid var(--yellow);
  text-decoration: none; color: inherit;
  transition: transform .25s ease, box-shadow .25s ease;
}
.tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); color: inherit; }
.tile:nth-child(2) { border-top-color: var(--red); }
.tile:nth-child(3) { border-top-color: var(--blue); }
.tile:nth-child(4) { border-top-color: var(--ink); }
.tile h3 { margin: 0 0 .2rem; font-size: 1.16rem; }
.tile p { font-size: .95rem; color: var(--ink-soft); margin: 0 0 .5rem; }
.tile .card-more { margin-top: auto; }

/* ---------- News index ---------- */
.filter-chips {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
  max-width: var(--wrap); margin: 0 auto 2.2rem; padding: 0 var(--pad);
}
.filter-chips a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .45rem 1.15rem;
  border-radius: var(--pill); background: var(--white); border: 2px solid var(--line);
  color: var(--ink); font-weight: 600; font-size: .98rem; text-decoration: none;
  transition: border-color .18s, color .18s, transform .18s;
}
.filter-chips a:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }
.filter-chips a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }

.featured-story {
  max-width: var(--wrap); margin: 0 auto 2.6rem; padding: 0 var(--pad);
}
.featured-story a {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 0; align-items: stretch;
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .25s ease, box-shadow .25s ease;
}
.featured-story a:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); color: inherit; }

/* Partner logos + photos: never crop a logo — show the whole mark on a white
   tile. Mixed photos in the same grid also show in full (letterboxed, not cut). */
.partner-logo {
  width: 100%; height: 160px; object-fit: contain;
  background: var(--white); padding: .7rem; border-radius: 10px;
  margin-bottom: .6rem; border: 1px solid var(--line);
}
.featured-body { padding: clamp(1.4rem, 3vw, 2.6rem); display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; background: var(--white); }
.featured-body h2 { margin-bottom: .4rem; }
.featured-body .news-kind { margin-bottom: 1rem; }
.featured-body p { color: var(--ink-soft); }

.news-grid {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
}
.news-card {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.news-card > a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
/* No crop: show the WHOLE image (object-fit:contain) and fill the frame with a
   soft blurred extension of the same image, so nothing — faces or poster text —
   is ever sliced. --img is set inline per card. */
.news-card .thumb, .featured-story .thumb {
  position: relative; display: block; overflow: hidden; background: var(--cream-deep);
}
.news-card .thumb { aspect-ratio: 4 / 3; }
.featured-story .thumb { aspect-ratio: 16 / 10; }
.news-card .thumb::before, .featured-story .thumb::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--img); background-size: cover; background-position: center;
  filter: blur(22px) saturate(1.2); transform: scale(1.25); opacity: .5;
}
.news-card .thumb img, .featured-story .thumb img {
  position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain;
}
.news-card-body { padding: 1.2rem 1.3rem 1.35rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.news-card h3 { margin: 0; font-size: 1.18rem; }
.news-card .news-date { font-size: .88rem; color: var(--ink-soft); margin-top: auto; }
.news-card p { font-size: .95rem; color: var(--ink-soft); margin: 0; }
.news-kind {
  display: inline-block; align-self: flex-start; font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: .14rem .7rem; border-radius: var(--pill);
  background: var(--cream-deep); color: var(--ink-soft);
}
.news-kind--cover-story { background: var(--red); color: var(--white); }
.news-kind--spotlight { background: var(--yellow); color: var(--ink); }
.news-kind--member-blog { background: var(--blue); color: var(--white); }

.pagination {
  display: flex; justify-content: center; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: 2.6rem var(--pad) 0;
}
.pagination a, .pagination span.current {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: .4rem .8rem; border-radius: 12px;
  font-weight: 600; text-decoration: none; border: 2px solid var(--line); color: var(--ink);
  background: var(--white);
}
.pagination a:hover { border-color: var(--red); color: var(--red); }
.pagination span.current { background: var(--ink); border-color: var(--ink); color: var(--white); }
.pagination span.gap { color: var(--ink-soft); padding: 0 .2rem; }

/* ---------- Article pages ---------- */
.article-head { max-width: 760px; margin: 0 auto; padding: 3.6rem var(--pad) 1.6rem; text-align: center; }
.article-head h1 { font-size: clamp(2rem, 2.8vw + 1rem, 3.1rem); text-wrap: balance; }
.article-meta { color: var(--ink-soft); font-size: .98rem; }
.article-cover { max-width: 900px; margin: 1.4rem auto 0; padding: 0 var(--pad); }
.article-cover img { border-radius: var(--radius); box-shadow: var(--shadow-card); width: 100%; }
.article-body { max-width: 68ch; margin: 0 auto; padding: 2.2rem var(--pad) 3.4rem; font-size: 1.14rem; }
.article-body img { border-radius: 12px; margin: 1.4rem auto; box-shadow: var(--shadow-card); }
.article-body h2, .article-body h3 { margin-top: 1.5em; }
.article-body ul { list-style: disc; padding-left: 1.3em; margin: 0 0 1em; }
.article-body li { margin-bottom: .4em; }
.article-body a { font-weight: 600; word-break: break-word; }
/* Embeds and clips, sized like the images beside them.

   An <iframe> is not a replaced element, so it takes no aspect ratio from its
   width/height attributes: capping the width alone left every YouTube embed
   ~620px wide and still 1000px tall. All 27 in the archive are 16:9, so the
   ratio is set here and the height follows the column.

   A <video> IS replaced, so max-width + height:auto keeps whatever shape it
   was filmed in — which matters, because they are not all 16:9: one member's
   clip is portrait (320x576) and would be wrecked by a fixed ratio. Until
   this, the 1920x1080 ones simply ran off the side of the page. */
.article-body iframe {
  display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: 12px; margin: 1.4rem auto;
}
.article-body video {
  display: block; max-width: 100%; height: auto;
  border-radius: 12px; margin: 1.4rem auto; box-shadow: var(--shadow-card);
}
.article-body audio { display: block; width: 100%; margin: 1.4rem auto; }
.article-body figure { margin: 1.4rem 0; }
.article-body blockquote { border-left: 5px solid var(--yellow); padding-left: 1.2rem; margin: 1.4rem 0; color: var(--ink-soft); }
.more-like { background: var(--cream-deep); padding: 3.4rem 0 3.8rem; }
.more-like .section-head { margin-bottom: 1.8rem; }

/* ---------- Who-to-ask cards (contact) ---------- */
.ask-grid {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem;
}
.ask-card {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 1.5rem 1.4rem; border-top: 4px solid var(--blue);
}
.ask-card h3 { margin-bottom: .3rem; font-size: 1.16rem; }
.ask-card .person-role { margin-bottom: .6rem; }
.ask-card p { font-size: .98rem; color: var(--ink-soft); margin-bottom: .8rem; }
.big-contact {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: clamp(1.15rem, 1vw + 1rem, 1.5rem); font-weight: 700; font-family: var(--font-display);
  color: var(--blue); text-decoration: none; border-bottom: 3px solid var(--yellow);
  padding: .3rem 0; word-break: break-all;
}
.big-contact:hover { color: var(--red); }

/* ---------- Document / download cards ---------- */
.doc-grid {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
}
.doc-card {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .4rem;
  border-top: 4px solid var(--yellow); text-decoration: none; color: inherit;
  transition: transform .25s ease, box-shadow .25s ease;
}
.doc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); color: inherit; }
.doc-card h3 { margin: 0; font-size: 1.1rem; }
.doc-card .doc-type { font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.doc-card p { font-size: .93rem; color: var(--ink-soft); margin: 0; }
.doc-card .card-more { margin-top: auto; padding-top: .6rem; }

/* ---------- Vacancy cards ---------- */
.vacancy-card {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 1.6rem 1.5rem; margin-bottom: 1.2rem; border-left: 6px solid var(--red);
}
.vacancy-card h3 { margin-bottom: .35rem; }
.vacancy-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .95rem; color: var(--ink-soft); margin-bottom: .7rem; }

/* ---------- 404 ---------- */
.error-page { text-align: center; padding: 5.5rem var(--pad) 6rem; max-width: 720px; margin: 0 auto; }
.error-page .error-code {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(4.5rem, 10vw, 7rem);
  line-height: 1; color: var(--red); display: block; margin-bottom: .2em;
}
.error-actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 2rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .event-list { grid-template-columns: 1fr; }
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .doc-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-story a { grid-template-columns: 1fr; }
  .ask-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .tile-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .doc-grid { grid-template-columns: 1fr; }
}

/* ---------- Quote wall (impact) ---------- */
.quote-wall {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem;
}
.quote-card {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 1.7rem 1.6rem 1.5rem; position: relative; border-top: 4px solid var(--yellow);
}
.quote-card:nth-child(2n) { border-top-color: var(--red); }
.quote-card:nth-child(3n) { border-top-color: var(--blue); }
.quote-card .q-mark {
  font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: .5;
  color: var(--red); display: block; margin-bottom: .9rem;
}
.quote-card p { font-size: 1.02rem; color: var(--ink); margin-bottom: .6rem; }
.quote-card cite { font-style: normal; font-weight: 600; color: var(--ink-soft); font-size: .92rem; }
@media (max-width: 720px) { .quote-wall { grid-template-columns: 1fr; } }

/* ---------- Courses: three courses stacked inside one "Join us" section ---------- */
.course-stack { display: grid; gap: 2.4rem; margin-top: 2rem; }
.course-block {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(1.6rem, 3vw, 3rem); align-items: center;
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: clamp(1.4rem, 2.6vw, 2.2rem);
  border-top: 4px solid var(--yellow);
}
.course-block:nth-child(2) { border-top-color: var(--red); }
.course-block:nth-child(3) { border-top-color: var(--blue); }
.course-block--rev { grid-template-columns: .9fr 1.1fr; }
.course-block--rev .course-media { order: -1; }
.course-media { justify-self: center; max-width: 360px; margin: 0; }
.course-media img { border-radius: 14px; }
.course-media figcaption { font-size: .92rem; color: var(--ink-soft); margin-top: .5rem; }
.course-body > :last-child { margin-bottom: 0; }
.course-body h3 { font-size: clamp(1.3rem, 1vw + 1rem, 1.75rem); margin-bottom: .5rem; }
.course-body p { max-width: 58ch; }
.course-quote { margin-top: 1.1rem; border-left: 4px solid var(--red); padding-left: 1rem; }
.course-quote p { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.45; margin-bottom: .35rem; }
.course-quote cite { font-style: normal; font-weight: 600; color: var(--ink-soft); font-size: .94rem; }
@media (max-width: 820px) {
  .course-block, .course-block--rev { grid-template-columns: 1fr; }
  .course-block--rev .course-media { order: 0; }
}

/* ---------- Statement heading (a full sentence used as a section title) ---------- */
.split h2.h2-statement,
h2.h2-statement {
  font-size: clamp(1.3rem, 1.05vw + 1rem, 1.95rem);
  line-height: 1.3; font-weight: 700; max-width: 30ch;
}

/* ---------- Three-up objectives grid (get2gether's three aims) ---------- */
.obj-grid--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .obj-grid--three { grid-template-columns: 1fr; } }

/* ---------- Funder wall (impact page) ---------- */
.funder-wall {
  max-width: var(--wrap); margin: 1.6rem auto 0; padding: 0 var(--pad);
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: flex-start;
}
.funder-wall li {
  background: var(--white); border-radius: 14px; box-shadow: var(--shadow-card);
  padding: 1rem 1.4rem; display: flex; align-items: center; min-height: 92px;
}
/* Logos are normalised to one pixel height, so matching max-height lines the row
   up optically however wide each mark is. */
.funder-wall img { height: 54px; width: auto; object-fit: contain; }
@media (max-width: 560px) {
  .funder-wall li { padding: .8rem 1rem; min-height: 78px; }
  .funder-wall img { height: 42px; }
}

/* .prose turns lists into bulleted body copy — but the yellow fact chips are a
   chip row, not a list of points. Opt them back out wherever they appear inside
   prose (e.g. the Courses intro). */
.prose .fact-chips { list-style: none; padding-left: 0; }
.prose .fact-chips li { margin-bottom: 0; }

/* ---------- Survey findings list (impact page) ----------
   The illustrations are get2gether's own, lifted from the survey results sheet
   so the page reads the way the charity's own handout does. They repeat what the
   text already says, so they are hidden from screen readers and from read-aloud. */
.survey-list { display: grid; gap: .7rem; max-width: 820px; }
.survey-list li {
  display: grid; grid-template-columns: 68px 4.6rem 1fr; gap: 1rem; align-items: center;
  background: var(--white); border-radius: 14px; box-shadow: var(--shadow-card);
  border-left: 5px solid var(--yellow); padding: 1rem 1.2rem;
}
.survey-list li:nth-child(3n+2) { border-left-color: var(--red); }
.survey-list li:nth-child(3n+3) { border-left-color: var(--blue); }
/* A soft disc behind each illustration. Two of them (the "GOAL" figure, the
   smiley) are largely white in the original, and would all but disappear on a
   white card without it. It also tints with the accessibility colour themes. */
.survey-ic {
  width: 68px; height: 68px; object-fit: contain;
  background: var(--cream); border-radius: 50%; padding: 5px;
}
.survey-list b {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.4rem, 1.4vw + 1rem, 1.9rem); line-height: 1; color: var(--ink);
}
.survey-list span { color: var(--ink-soft); font-size: 1.02rem; }
/* Same illustrations used inline in the survey blog post — no card, so no disc,
   and none of the framing .article-body gives ordinary article photos. */
.article-body img.survey-inline {
  width: 76px; height: 76px; object-fit: contain;
  float: left; margin: 0 1rem .4rem 0;
  border-radius: 0; box-shadow: none;
}
.article-body p.has-icon { overflow: hidden; min-height: 76px; }

@media (max-width: 620px) {
  .survey-list li { grid-template-columns: 56px 1fr; gap: .5rem 1rem; align-items: start; }
  .survey-ic { width: 56px; height: 56px; grid-row: span 2; }
  .survey-list b { align-self: end; }
}

/* ---------- Step cards (Join page) ----------
   Three cards side by side on their own centred grid — the shared .obj-grid is
   four columns, which left three cards sitting off to one side. Sized up from
   the site default: bigger numerals, bigger headings, bigger body text, because
   this is the page members are asked to act on. */
.step-cards {
  max-width: 1080px; margin: 0 auto; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.step-cards li {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card);
  border-top: 5px solid var(--yellow);
  padding: clamp(1.6rem, 2.4vw, 2.1rem) clamp(1.3rem, 2vw, 1.8rem) clamp(1.7rem, 2.4vw, 2.1rem);
  margin: 0; transition: transform .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column;
}
.step-cards li:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.step-cards li:nth-child(2) { border-top-color: var(--red); }
.step-cards li:nth-child(3) { border-top-color: var(--blue); }

.step-badge {
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; line-height: 1;
  background: var(--yellow); color: var(--ink); margin-bottom: 1.1rem;
}
.step-cards li:nth-child(2) .step-badge { background: var(--red); color: var(--white); }
.step-cards li:nth-child(3) .step-badge { background: var(--blue); color: var(--white); }

.step-cards h3 { font-size: clamp(1.3rem, .7vw + 1rem, 1.6rem); margin: 0 0 .5rem; }
.step-cards p {
  font-size: clamp(1.08rem, .3vw + 1rem, 1.2rem); line-height: 1.55;
  margin: 0; color: var(--ink);
}

.steps-cta { text-align: center; margin: 2.6rem 0 1.6rem; }
.btn-xl { font-size: 1.25rem; padding: 1.15rem 2.6rem; }

@media (max-width: 900px) {
  .step-cards { grid-template-columns: 1fr; max-width: 620px; gap: 1.1rem; }
  .step-badge { width: 58px; height: 58px; font-size: 1.7rem; margin-bottom: .9rem; }
  .btn-xl { font-size: 1.08rem; padding: 1rem 1.7rem; }
}