/* Soulful Steppers — photographic hiking theme
   Loaded after the existing page styles so functionality and layout remain intact. */

:root {
  --trail-paper: #fffdf8;
  --trail-cream: #f4efe3;
  --trail-forest: #0b4f38;
  --trail-forest-dark: #072f24;
  --trail-sage: #9eb59f;
  --trail-orange: #d87842;
  --trail-gold: #efb85b;
  --trail-ink: #17231d;
  --trail-shadow: 0 24px 70px rgba(7, 47, 36, 0.16);
  --hiking-home: url("./hiking/home-hero.webp");
  --hiking-events: url("./hiking/events-hero.webp");
  --hiking-woodland: url("./hiking/woodland-banner.webp");
  --hiking-social: url("./hiking/social-walk.webp");
  --hiking-day: url("./hiking/day-hike.webp");
  --hiking-residential: url("./hiking/residential-escape.webp");
}

body {
  background:
    radial-gradient(circle at 10% 12%, rgba(158, 181, 159, 0.17), transparent 28rem),
    var(--trail-cream);
}

.site-shell { background: transparent; }

/* Header */

.site-header {
  background: rgba(7, 47, 36, 0.94);
  box-shadow: 0 8px 30px rgba(5, 28, 21, 0.18);
}

.brand-mark {
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(239, 184, 91, 0.13);
}

.nav-link { letter-spacing: 0.01em; }

.nav-link:hover,
.nav-link:focus-visible,
.nav-link[aria-current="page"] {
  background: rgba(255, 255, 255, 0.13);
}

/* Homepage hero */

.hero {
  min-height: 760px;
  overflow: hidden;
  background-image:
    linear-gradient(90deg, rgba(4, 34, 25, 0.91) 0%, rgba(6, 48, 35, 0.73) 41%, rgba(6, 48, 35, 0.2) 72%, rgba(4, 26, 20, 0.2) 100%),
    linear-gradient(0deg, rgba(4, 29, 22, 0.48), transparent 42%),
    var(--hiking-home);
  background-position: center;
  background-size: cover;
}

.hero::before {
  z-index: 0;
  inset: auto 0 0;
  width: auto;
  height: 11rem;
  border: 0;
  border-radius: 0;
  background: linear-gradient(to top, rgba(5, 38, 28, 0.54), transparent);
  box-shadow: none;
}

.hero::after {
  z-index: 0;
  right: auto;
  bottom: -1px;
  left: 7%;
  width: 86%;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, transparent, var(--trail-gold), transparent);
  box-shadow: none;
  opacity: 0.7;
}

.hero-grid {
  position: relative;
  z-index: 1;
  min-height: 684px;
}

.hero h1 {
  text-wrap: balance;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.26);
}

.hero-lead {
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.32);
}

.hero-note {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(6, 44, 32, 0.66);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(18px) saturate(120%);
}

.hero-note.home-slideshow.has-event-image {
  background-color: rgba(4, 34, 25, 0.94);
  background-image:
    linear-gradient(180deg, rgba(3, 27, 20, 0.5), rgba(3, 31, 23, 0.78) 48%, rgba(3, 27, 20, 0.96)),
    var(--home-event-image);
  background-position: center;
  background-size: cover;
  backdrop-filter: none;
}

.home-slideshow.has-event-image .home-slideshow-header,
.home-slideshow.has-event-image .home-slideshow-controls {
  background: rgba(3, 27, 20, 0.24);
}

/* Homepage image cards */

.experience-card {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 390px;
  padding: 1.6rem;
  overflow: hidden;
  flex-direction: column;
  justify-content: flex-end;
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  background-position: center;
  background-size: cover;
  box-shadow: var(--trail-shadow);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.experience-card:nth-child(1) { background-image: var(--hiking-social); }
.experience-card:nth-child(2) { background-image: var(--hiking-day); }
.experience-card:nth-child(3) { background-image: var(--hiking-residential); }

.experience-card::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(to top, rgba(4, 35, 26, 0.96) 0%, rgba(6, 43, 32, 0.62) 44%, rgba(4, 31, 23, 0.06) 78%);
}

.experience-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 76px rgba(7, 47, 36, 0.24);
}

.experience-card .card-number { position: absolute; top: 1.25rem; left: 1.25rem; }
.experience-card h3 { margin: 8rem 0 0.75rem; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3); }
.experience-card p,
.experience-card:nth-child(2) p { color: rgba(255, 255, 255, 0.83); }

.section-heading .eyebrow::before,
.hikes-section-heading .eyebrow::before,
.suggestions-list-heading .eyebrow::before,
.suggestions-intro > .eyebrow::before,
.contact-copy > .eyebrow::before {
  display: inline-block;
  width: 2rem;
  height: 2px;
  margin-right: 0.65rem;
  vertical-align: middle;
  background: var(--trail-orange);
  content: "";
}

.statement {
  position: relative;
  background-image:
    linear-gradient(90deg, rgba(151, 68, 31, 0.92), rgba(11, 79, 56, 0.77)),
    var(--hiking-events);
  background-position: center 58%;
  background-size: cover;
}

.statement blockquote { text-shadow: 0 3px 24px rgba(0, 0, 0, 0.18); }

/* Photographic page banners */

.page-hero,
.hikes-index-hero,
body.calendar-page .calendar-page-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--trail-forest-dark);
  background-image:
    linear-gradient(90deg, rgba(4, 35, 26, 0.93) 0%, rgba(5, 43, 31, 0.75) 46%, rgba(5, 43, 31, 0.2) 100%),
    linear-gradient(0deg, rgba(3, 28, 21, 0.42), transparent 55%),
    var(--hiking-woodland);
  background-position: center;
  background-size: cover;
}

.page-hero::after,
.hikes-index-hero::after,
body.calendar-page .calendar-page-intro::after {
  position: absolute;
  z-index: -1;
  right: -6rem;
  bottom: -7rem;
  width: 24rem;
  height: 24rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgba(255, 255, 255, 0.025), 0 0 0 8rem rgba(255, 255, 255, 0.018);
  content: "";
}

.page-hero > .container,
.hikes-index-hero > .container,
body.calendar-page .calendar-page-intro > .container { position: relative; z-index: 1; }

.page-hero h1,
.hikes-index-hero h1,
body.calendar-page .calendar-page-intro h1 {
  text-wrap: balance;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.3);
}

.page-hero p:last-child,
.hikes-index-hero p:last-child,
body.calendar-page .calendar-page-intro p:last-child {
  color: rgba(255, 255, 255, 0.84);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.3);
}

.hikes-index-hero {
  background-image:
    linear-gradient(90deg, rgba(4, 35, 26, 0.91) 0%, rgba(6, 48, 35, 0.63) 44%, rgba(5, 38, 28, 0.1) 100%),
    linear-gradient(0deg, rgba(3, 28, 21, 0.42), transparent 54%),
    var(--hiking-events);
  background-position: center 58%;
}

.shop-hero {
  background-image:
    linear-gradient(90deg, rgba(4, 35, 26, 0.92), rgba(6, 48, 35, 0.6) 48%, rgba(5, 38, 28, 0.14)),
    var(--hiking-residential);
  background-position: center 54%;
}

.suggestions-hero,
.suggestions-admin-hero {
  background-image:
    linear-gradient(90deg, rgba(4, 35, 26, 0.93), rgba(6, 48, 35, 0.58) 52%, rgba(5, 38, 28, 0.12)),
    var(--hiking-social);
  background-position: center 48%;
}

.book-club-hero {
  background-image:
    linear-gradient(90deg, rgba(4, 35, 26, 0.94), rgba(6, 48, 35, 0.65) 52%, rgba(5, 38, 28, 0.16)),
    var(--hiking-woodland);
  background-position: center 48%;
}

/* Event listing photography */

.hikes-listing-section,
.previous-hikes-section,
.member-dashboard,
.suggestions-list-section {
  background:
    linear-gradient(rgba(244, 239, 227, 0.96), rgba(244, 239, 227, 0.96)),
    var(--hiking-woodland);
  background-attachment: scroll;
  background-position: center;
  background-size: cover;
}

.previous-hikes-section { background-color: #e4e0d7; }

.hike-event-card {
  border-color: rgba(11, 79, 56, 0.13);
  box-shadow: 0 16px 42px rgba(7, 47, 36, 0.1);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.hike-event-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 52px rgba(7, 47, 36, 0.15);
}

.hike-card-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.52);
}

.hike-card-visual::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(to bottom, rgba(4, 35, 26, 0.25), rgba(4, 35, 26, 0.83));
  content: "";
}

.hike-list .hike-event-card:nth-child(3n + 1) .hike-card-visual { background-image: var(--hiking-social); }
.hike-list .hike-event-card:nth-child(3n + 2) .hike-card-visual { background-image: var(--hiking-day); }
.hike-list .hike-event-card:nth-child(3n) .hike-card-visual { background-image: var(--hiking-residential); }

.hike-level-1 .hike-card-visual,
.hike-level-2 .hike-card-visual,
.hike-level-3 .hike-card-visual,
.hike-level-4 .hike-card-visual,
.hike-level-5 .hike-card-visual { background-color: var(--trail-forest); }

.difficulty-guide {
  background-image:
    linear-gradient(90deg, rgba(4, 35, 26, 0.97), rgba(4, 35, 26, 0.83)),
    var(--hiking-events);
  background-position: center;
  background-size: cover;
}

.difficulty-guide-figure {
  border: 6px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.32);
}

/* Member area */

.member-dashboard-card {
  position: relative;
  isolation: isolate;
  min-height: 310px;
  overflow: hidden;
  justify-content: flex-end;
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  background-position: center;
  background-size: cover;
  box-shadow: var(--trail-shadow);
}

.member-dashboard-card:nth-child(3n + 1) { background-image: var(--hiking-day); }
.member-dashboard-card:nth-child(3n + 2) { background-image: var(--hiking-events); }
.member-dashboard-card:nth-child(3n) { background-image: var(--hiking-social); }

.member-dashboard-card::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(to top, rgba(4, 35, 26, 0.96), rgba(4, 35, 26, 0.65) 58%, rgba(4, 35, 26, 0.12));
  content: "";
}

.member-dashboard-card .detail-kicker { color: var(--trail-gold); }
.member-dashboard-card h2 { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); }
.member-dashboard-card p:not(.detail-kicker) { color: rgba(255, 255, 255, 0.84); }
.member-dashboard-card .text-link { color: var(--trail-gold); }

.member-summary-card,
.activities-panel,
.admin-event-card,
.suggestion-form,
.suggestion-card,
.shop-card,
.shop-basket-item,
.shop-basket-summary,
.shop-checkout-summary,
.shop-checkout-form fieldset {
  box-shadow: 0 14px 40px rgba(7, 47, 36, 0.09);
}

/* Login and content pages */

.login-copy {
  position: relative;
  isolation: isolate;
  min-height: 570px;
  padding: clamp(1.8rem, 4vw, 3rem);
  overflow: hidden;
  border-radius: 1.5rem;
  color: #fff;
  background-image: var(--hiking-social);
  background-position: center;
  background-size: cover;
  box-shadow: var(--trail-shadow);
}

.login-copy::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(to top, rgba(4, 35, 26, 0.98), rgba(5, 44, 32, 0.73) 62%, rgba(5, 44, 32, 0.18));
  content: "";
}

.login-copy .eyebrow { color: var(--trail-gold); }
.login-copy h2 { color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25); }
.login-copy .login-steps p { color: rgba(255, 255, 255, 0.84); }
.login-card { box-shadow: var(--trail-shadow); }

.contact-copy::before {
  display: block;
  width: 100%;
  min-height: 260px;
  margin-bottom: 2rem;
  border-radius: 1.3rem;
  background-image: var(--hiking-social);
  background-position: center;
  background-size: cover;
  box-shadow: var(--trail-shadow);
  content: "";
}

.story-grid > div:first-child::before {
  display: block;
  width: 100%;
  min-height: 270px;
  margin-bottom: 2rem;
  border-radius: 1.3rem;
  background-image: var(--hiking-day);
  background-position: center;
  background-size: cover;
  box-shadow: var(--trail-shadow);
  content: "";
}

.suggestions-submit-section {
  background:
    linear-gradient(rgba(255, 253, 248, 0.95), rgba(255, 253, 248, 0.95)),
    var(--hiking-events);
  background-position: center;
  background-size: cover;
}

.suggestions-note,
.events-category-filter,
.shop-toolbar,
.calendar-card {
  box-shadow: 0 12px 34px rgba(7, 47, 36, 0.08);
}

/* Footer */

.site-footer {
  position: relative;
  background-image:
    linear-gradient(90deg, rgba(3, 29, 22, 0.97), rgba(5, 49, 36, 0.9)),
    var(--hiking-woodland);
  background-position: center 72%;
  background-size: cover;
}

.site-footer::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--trail-orange), var(--trail-gold), var(--trail-sage));
  content: "";
}

@media (max-width: 900px) {
  .hero {
    min-height: auto;
    background-image:
      linear-gradient(90deg, rgba(4, 34, 25, 0.91), rgba(6, 48, 35, 0.58)),
      var(--hiking-home);
    background-position: 58% center;
  }

  .experience-grid { grid-template-columns: 1fr; }
  .experience-card { min-height: 340px; }
  .login-copy { min-height: 430px; }
}

@media (max-width: 640px) {
  .hero {
    background-image:
      linear-gradient(180deg, rgba(4, 34, 25, 0.68), rgba(4, 34, 25, 0.96) 76%),
      var(--hiking-home);
    background-position: 64% center;
  }

  .page-hero,
  .hikes-index-hero,
  body.calendar-page .calendar-page-intro {
    background-image:
      linear-gradient(180deg, rgba(4, 35, 26, 0.54), rgba(4, 35, 26, 0.94) 72%),
      var(--hiking-woodland);
    background-position: 62% center;
  }

  .hikes-index-hero {
    background-image:
      linear-gradient(180deg, rgba(4, 35, 26, 0.45), rgba(4, 35, 26, 0.94) 74%),
      var(--hiking-events);
    background-position: 62% center;
  }

  .experience-card { min-height: 320px; }
  .member-dashboard-card { min-height: 280px; }
  .login-copy { min-height: 390px; }
  .contact-copy::before,
  .story-grid > div:first-child::before { min-height: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  .experience-card,
  .hike-event-card { transition: none; }
}