/* Components — header, hero, cards, facades, footer */

/* ---------- Header — logo hard left, nav hard right, full width ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--page-pad) var(--space-3);
}

.site-logo {
  color: var(--ink);
  display: block;
  flex-shrink: 0;
  transition: color var(--dur-ui) ease;
}

.site-logo svg { height: 1.85rem; width: auto; }

@media (hover: hover) and (pointer: fine) {
  .site-logo:hover { color: var(--lava); }
}

.site-nav { margin-left: auto; }

.site-nav ul {
  display: flex;
  gap: clamp(var(--space-3), 3vw, var(--space-5));
  list-style: none;
  padding: 0;
}

.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  /* visual size unchanged, hit area grown to ~44px */
  padding-block: 0.75rem;
  margin-block: -0.5rem;
  border-bottom: 1.5px solid transparent;
  transition: color var(--dur-ui) ease, border-color var(--dur-ui) ease;
}

.site-nav a:hover { color: var(--lava-deep); }

.site-nav a[aria-current] {
  color: var(--lava-deep);
  border-bottom-color: var(--lava);
}

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-6) var(--space-5); }

.hero-eyebrow { margin-bottom: var(--space-3); }

.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 440;
  line-height: var(--leading-tight);
  letter-spacing: -0.032em;
  max-width: 16ch;
  text-wrap: balance;
}

.hero-title .accent { color: var(--lava); font-style: normal; }

.hero-intro {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  max-width: 34rem;
  color: var(--ink-soft);
}

.hero-intro strong { color: var(--ink); }

/* ---------- Ride formats (the two recurring rides) ---------- */
.formats {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.format-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.format-card__title {
  margin-top: var(--space-2);
  font-size: var(--text-xl);
}

.format-card__tagline {
  color: var(--ink-soft);
  margin-top: var(--space-1);
}

.format-card__facts {
  margin-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.format-card__facts div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: 0.45rem;
  border-bottom: 1px solid var(--line);
}

.format-card__facts dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-soft);
}

.format-card__facts dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-align: right;
}

/* ---------- Sections on home ---------- */
.home-next-ride, .home-blog, .home-join { margin-top: var(--space-7); }

.rides-upcoming { margin-top: var(--space-5); }
.rides-past { margin-top: var(--space-6); }

.empty-note { color: var(--ink-soft); max-width: var(--measure); }

/* ---------- Ride cards ---------- */
.ride-list {
  display: grid;
  gap: var(--space-3);
}

.ride-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  max-width: var(--measure);
  transition: border-color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .ride-card:hover {
    border-color: var(--ink);
    transform: translateY(-2px);
  }
}

.ride-card__date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--lava-deep);
}

.ride-card__title { margin-top: var(--space-2); }

.ride-card__title a { color: inherit; text-decoration: none; }
.ride-card__title a::after { content: ''; position: absolute; inset: 0; }
.ride-card__title a:hover { color: var(--lava-deep); }

.ride-card__facts {
  list-style: none;
  padding: 0;
  margin-top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ride-list--past .ride-card {
  background: transparent;
}

.ride-list--past .ride-card__date { color: var(--ink-soft); }

@media (hover: hover) and (pointer: fine) {
  .ride-list--past .ride-card:hover { transform: none; }
}

/* Tap feedback on touch devices (hover-gated lifts never fire there) */
.ride-card:active, .join-card:active { transform: scale(0.99); }
.ride-list--past .ride-card:active { transform: none; }

/* ---------- Ride detail ---------- */
.ride-detail__date {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--lava-deep);
  margin-bottom: var(--space-2);
}

.ride-detail__past-badge {
  background: var(--paper-deep);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 0.1em 0.8em;
  font-size: var(--text-xs);
}

.ride-detail__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-block: var(--space-4);
  padding-block: var(--space-3);
  border-block: 1px solid var(--line);
  max-width: var(--measure);
}

.ride-detail__facts dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-soft);
}

.ride-detail__facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 450;
  font-size: var(--text-lg);
}

.ride-detail__pace {
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}

.ride-detail__cta { margin-top: var(--space-4); }

.ride-detail__route { margin-top: var(--space-6); }

.back-link { margin-top: var(--space-6); }

.back-link a {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  text-decoration: none;
}

.back-link a:hover { text-decoration: underline; }

/* ---------- Buttons ---------- */
.button {
  display: inline-block;
  background: var(--lava-deep); /* white on lava-deep = 6.09:1 (AA); pure lava fails at text size */
  color: #fff;
  padding: 0.7em 1.5em;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 560;
  letter-spacing: -0.01em;
  transition: background-color var(--dur-ui) ease, transform var(--dur-press) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--lava-deeper); color: #fff; }
}

.button:active { transform: scale(0.97); }

/* ---------- Blog ---------- */
.blog-cards {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.blog-list {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-5);
  max-width: var(--measure);
}

.blog-card { position: relative; }

.blog-card__date, .blog-post__date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-soft);
}

.blog-card__title { margin-top: var(--space-1); }

.blog-card__title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--lava), var(--lava));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-ui) var(--ease-out);
}

.blog-card__title a:hover { background-size: 100% 1.5px; }

.blog-card__summary {
  margin-top: var(--space-2);
  color: var(--ink-soft);
}

.blog-post__body { margin-top: var(--space-4); }

.blog-post .tag-list { margin-top: var(--space-3); }

/* ---------- Tags ---------- */
.tag-list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tag {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.15em 0.8em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--ink-soft);
  transition: border-color var(--dur-ui) ease, color var(--dur-ui) ease, transform var(--dur-press) var(--ease-out);
}

.tag:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.tag:active { transform: scale(0.96); }

.tag--active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.tag--active:hover { color: var(--paper); }

.tag-filter { margin-block: var(--space-4) 0; }

/* ---------- Join / platform cards ---------- */
.join-cards {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.join-card {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  text-decoration: none;
  color: var(--ink);
  transition: border-color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .join-card:hover {
    border-color: var(--ink);
    transform: translateY(-2px);
    color: var(--ink);
  }
}

.join-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.join-card__arrow {
  color: var(--lava);
  transition: transform var(--dur-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .join-card:hover .join-card__arrow { transform: translateX(3px); }
}

.join-card__desc {
  margin-top: var(--space-2);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.join-card__cta {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

/* ---------- Embed facade (click-to-load) ---------- */
.embed-facade {
  position: relative;
  border: 1px dashed var(--ink-soft);
  border-radius: var(--radius);
  background: var(--paper-deep);
  min-height: 28rem; /* matches loaded iframe height — no layout jump on consent */
  display: grid;
  place-items: center;
  max-width: var(--measure);
}

.embed-facade--loaded {
  border: 1px solid var(--line);
  display: block;
  background: var(--surface);
  min-height: 0;
  overflow: hidden;
}

.embed-facade__inner {
  text-align: center;
  padding: var(--space-5);
  max-width: 28rem;
}

.embed-facade__label {
  font-family: var(--font-display);
  font-weight: 450;
  font-size: var(--text-xl);
  letter-spacing: var(--track-tight);
}

.embed-facade__note {
  color: var(--ink-soft);
  font-size: var(--text-sm);
  margin-block: var(--space-2) var(--space-4);
}

.embed-facade__button {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 560;
  background: var(--lava-deep);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.7em 1.5em;
  cursor: pointer;
  transition: background-color var(--dur-ui) ease, transform var(--dur-press) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .embed-facade__button:hover { background: var(--lava-deeper); }
}

.embed-facade__button:active { transform: scale(0.97); }

.embed-facade__remember {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.embed-facade__iframe {
  width: 100%;
  height: 28rem;
  border: none;
  display: block;
  /* fade in on consent instead of teleporting; opacity-only, so no
     reduced-motion exception needed; old browsers fall back to instant */
  opacity: 1;
  transition: opacity var(--dur-ui) var(--ease-out);
  @starting-style { opacity: 0; }
}

/* ---------- Signal reveal (footer link variant) ---------- */
.signal-reveal__button {
  font: inherit;
  color: var(--ink);
  font-weight: 500;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-ui) ease;
}

.signal-reveal__button:hover { color: var(--lava-deep); }

.signal-reveal__link {
  font-weight: 500;
  display: inline-block;
  /* the one-time reveal moment: gentle fade + rise, matching .reveal */
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
  @starting-style { opacity: 0; transform: translateY(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .signal-reveal__link { transition: opacity var(--dur-ui) ease; transform: none; }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--paper-deep);
}

.site-footer .footer-inner {
  max-width: var(--page-max);
  margin-inline: auto;
  width: 100%;
  padding: var(--space-6) var(--page-pad) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.footer-heading {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
}

.footer-links, .footer-legal {
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--space-3) var(--space-4);
  flex-wrap: wrap;
}

.footer-links a, .footer-legal a {
  color: var(--ink);
  font-weight: 500;
  display: inline-block;
  padding-block: 0.6rem;
  margin-block: -0.45rem;
}

.footer-links a:hover, .footer-legal a:hover { color: var(--lava-deep); }

.footer-meta { text-align: right; }

.footer-tagline {
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-soft);
}

.footer-legal { justify-content: flex-end; }

@media (max-width: 40rem) {
  .footer-meta { text-align: left; }
  .footer-legal { justify-content: flex-start; }
}