.resources-page,
.resource-page {
  background: var(--paper-50);
  color: var(--ink-900);
}

.resources-canvas,
.resource-canvas {
  margin: 0;
  overflow: hidden;
}

.page-hero--events .page-hero__bg {
  background-image: url('../../assets/images/jbwo-slatmill.webp');
  background-position: 45% 15%;
}

.page-hero--adventures .page-hero__bg {
  background-image: url('../../assets/images/unity32-trial-outdoor.webp');
  background-position: 34% 45%;
}

.page-hero--resources .page-hero__bg {
  background-image: url('../../assets/images/caroline-ralph-kiss.webp');
  background-position: 60% 8%;
}

/* A compact title strip for the detail page, not a full hero takeover — shorter min-height than
   the base .page-hero's full-viewport one, but still real height (not padding alone) so the
   inherited flex centering actually centers the title within the band, and so a solid dark
   background sits behind the header from first paint (rather than the section being hidden
   until data loads) — otherwise the header's light nav text (.has-dark-hero) has nothing dark
   behind it yet and reads as invisible against the plain page background.
   .page-hero__bg's background-image is set inline via JS per-resource (its own cover image, or
   a fallback), not a fixed per-page image like the other .page-hero variants above. */
.page-hero--resource {
  margin: 0;
  min-height: clamp(20rem, 44svh, 28rem);
  padding-block: clamp(2rem, 5svh, 3rem);
  background: var(--teal-900);
}

.page-hero--resource h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
}

/* Stronger, more consistent scrim than the base .page-hero's — this band is short enough that
   the header sits over it for its entire visible height (not just briefly before scrolling
   past), so nav text needs reliable contrast regardless of what's directly behind it in the
   source photo (a bright doorway, pale wall, etc.). */
.page-hero--resource .page-hero__bg::after {
  background: linear-gradient(180deg, rgba(11, 31, 75, 0.94) 0%, rgba(11, 31, 75, 0.88) 18%, rgba(11, 31, 75, 0.65) 50%, rgba(11, 31, 75, 0.74) 100%);
}

.page-hero--resource .page-hero__inner {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.page-hero--resource .page-hero__inner.is-revealed {
  opacity: 1;
}

/* Catalogue */

.resources-grid {
  padding-block: clamp(3rem, 7svh, 5rem);
}

.resources-grid__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.8vw, 1.4rem);
}

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

@media (max-width: 620px) {
  .resources-grid__list {
    grid-template-columns: 1fr;
  }
}

.resource-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Events / Adventures pages — the poster-led listing cards. */

.event-posters {
  padding-block: clamp(3rem, 8svh, 5.5rem) clamp(2rem, 5svh, 3rem);
}

.event-posters__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-bottom: clamp(2rem, 5svh, 3.5rem);
}

.event-posters__club {
  width: clamp(6rem, 11vw, 9.5rem);
  height: auto;
}

.event-posters__head h2 {
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0.15em 0 0.35em;
}

.event-posters__intro {
  max-width: 60ch;
  margin: 0;
  color: #45505e;
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.6;
}

.event-posters__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 2rem);
}

.event-poster {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(19, 128, 154, 0.18);
}

.event-poster__media {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--ink-900);
}

.event-poster__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.event-poster__media:hover img,
.event-poster__media:focus-visible img {
  transform: scale(1.03);
}

.event-poster__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.6rem;
  padding: clamp(1.1rem, 1.8vw, 1.6rem);
}

.event-poster__body > p {
  margin: 0;
  color: #45505e;
  line-height: 1.55;
}

.event-poster__date {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  color: var(--teal-500) !important;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.event-poster__status {
  padding: 0.25em 0.7em;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.72rem;
}

.event-poster h3 {
  font-size: clamp(1.9rem, 2.4vw, 2.5rem);
  line-height: 1;
  text-transform: uppercase;
  margin: 0;
}

.event-poster .event-poster__host {
  color: var(--ink-900);
  font-weight: 700;
}

.event-poster__prices {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  border-top: 1px solid rgba(19, 128, 154, 0.18);
}

.event-poster__prices li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(19, 128, 154, 0.18);
}

.event-poster__prices strong {
  font-size: 1.15rem;
}

.event-poster .btn {
  align-self: flex-start;
  margin-top: auto;
}

.event-poster__prices + .btn {
  margin-top: 0.9rem;
}

.event-poster--sold-out .event-poster__prices {
  opacity: 0.6;
}

.event-poster h3 a {
  color: inherit;
  text-decoration: none;
}

.event-poster h3 a:hover {
  color: var(--teal-700);
}

.event-poster__status--limited {
  background: #b7791f;
}

.event-poster__status--coming_soon {
  background: var(--teal-900);
}

.event-poster__brand {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink-900) !important;
  font-size: 0.82rem;
  font-weight: 700;
}

.event-poster__brand img {
  width: 1.6rem;
  height: 1.6rem;
}

.event-poster__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: auto;
  padding-top: 0.9rem;
}

.event-poster__actions .btn {
  margin-top: 0;
}

.event-posters .form-status:not(:empty) {
  margin: 0 0 1.5rem;
  color: #45505e;
  font-size: 1.05rem;
}

/* Event detail page — description beside a sticky facts/booking panel. */
.resource-article.event-article {
  max-width: 1100px;
}

.event-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.event-info {
  position: sticky;
  top: 6rem;
  display: grid;
  gap: 0.9rem;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(19, 128, 154, 0.18);
}

.event-info__poster {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.event-info__facts {
  display: grid;
  gap: 0.6rem;
  margin: 0;
}

.event-info__facts dt {
  color: var(--teal-500);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.event-info__facts dd {
  margin: 0.1rem 0 0;
  font-weight: 600;
}

.event-info .event-poster__status {
  justify-self: start;
  margin: 0;
}

.event-info .event-poster__prices {
  margin: 0;
}

.event-cta--block {
  justify-content: center;
  width: 100%;
}

@media (max-width: 860px) {
  .event-article__layout {
    grid-template-columns: 1fr;
  }

  .event-info {
    position: static;
    order: -1;
  }
}

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

@media (max-width: 640px) {
  .event-posters__head {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .event-posters__grid {
    grid-template-columns: 1fr;
  }
}

/* Detail / reading page */

/* Deliberately NOT given the header-clearance padding other loading-state banners use — the
   .page-hero right after it (always rendered, real min-height + dark background) already
   provides that. Giving this its OWN clearance too would double up, pushing the hero down past
   where the header actually floats and leaving the header with the plain page background
   behind it instead — exactly the bug that caused the (visible-but-unreadable) invisible navbar. */
.resource-status {
  padding-block: var(--space-2);
  text-align: center;
}

.resource-status:empty {
  margin: 0;
  padding: 0;
}

/* Header clearance is handled by .page-hero above this (same as every other hero page) — this
   only needs its own normal block padding, not the header-clearance hack .resource-status uses
   for its loading state, which has no hero above it yet. */
.resource-article {
  max-width: 46rem;
  padding-block: clamp(3rem, 8svh, 5rem);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.resource-article.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.resource-article__back {
  display: inline-block;
  margin-bottom: var(--space-3);
  color: var(--teal-700);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.resource-article__back:hover {
  color: var(--ink-900);
}

.resource-article__body {
  font-size: clamp(1.2rem, 1.5vw, 1.45rem);
  line-height: 1.8;
  color: #333d4b;
}

.resource-article__body h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  letter-spacing: 0.02em;
  margin: 1.6em 0 0.6em;
}

.resource-article__body h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: 0.02em;
  margin: 1.4em 0 0.5em;
}

@media (max-width: 720px) {
  .resource-article__body h2 {
    font-size: clamp(2.2rem, 8vw, 2.6rem);
  }

  .resource-article__body h3 {
    font-size: clamp(1.8rem, 7vw, 2.1rem);
  }
}

.resource-article__body p {
  margin: 0 0 1.2em;
}

.resource-article__body ul,
.resource-article__body ol {
  margin: 0 0 1.2em;
  padding-left: 1.4em;
}

.resource-article__body li {
  margin-bottom: 0.4em;
}

.resource-article__body a {
  color: var(--teal-700);
  text-decoration: underline;
}

.resource-article__body img {
  max-width: 100%;
  height: auto;
  margin: 1.5em 0;
}

.resource-article__body blockquote {
  margin: 1.5em 0;
  padding-left: 1.2em;
  border-left: 3px solid var(--teal-300);
  color: #45505e;
}

.resource-article__body code {
  background: rgba(19, 128, 154, 0.08);
  padding: 0.15em 0.4em;
  font-size: 0.9em;
}

@media (max-width: 640px) {
  .page-hero--resource {
    min-height: clamp(15rem, 40svh, 20rem);
    padding-block: clamp(1.5rem, 4svh, 2rem);
  }

  .page-hero--resource h1 {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }

  .resource-article {
    padding-block: clamp(2rem, 6svh, 3rem);
  }

  .resource-article__body {
    font-size: 1.05rem;
  }

  .resources-grid {
    padding-block: clamp(2rem, 5svh, 3rem);
  }
}

/* Oct 2026: pay-in-full / deposit / spectator buttons */
.event-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  width: 100%;
}
.event-cta-group--block {
  flex-direction: column;
}
.event-cta-group .btn {
  margin-top: 0;
}

/* Oct 2026: events page booking options */
.event-booking-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 2.5rem;
  padding: 1.5rem;
  border: 1px solid var(--teal-300);
  background: rgba(19, 128, 154, 0.05);
}
.event-booking-options__item h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.05;
  margin: 0.35rem 0 0.5rem;
  color: var(--ink-900);
}
.event-booking-options__item p {
  margin: 0;
  color: #45505e;
  line-height: 1.55;
}
.event-booking-options__num {
  color: var(--teal-700);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}
.event-booking-options__small {
  grid-column: 1 / -1;
  margin: 0.25rem 0 0;
  font-size: 0.95rem;
  color: #45505e;
}
.event-booking-options__small a { color: var(--teal-700); text-decoration: underline; }
@media (max-width: 860px) {
  .event-booking-options { grid-template-columns: 1fr; }
}

.event-booking-options__note { color: var(--ink-900); font-size: 1rem; }