/* Landing-page components. Loaded last for documented Moss Line scoped overrides. */


.moss-line {
  /* --bg/--bg-2/--panel/--panel-2/--seam/--text/--muted are NOT redeclared here anymore
     -- they're identical to :root's Moss Line values (it's the site default now), and a
     second local copy just risked drifting out of sync with it. --moss/--moss-hot/
     --moss-dim have no :root equivalent (three accent tiers vs :root's two), so those
     stay as their own local tokens. */
  --moss: #7c9a5a;
  --moss-hot: #9dc178;
  --moss-dim: #4f6a3c;

  /* No background/texture of its own -- body now paints the same Moss Line bg + hatch
     site-wide (it's the :root default), so a second flat rectangle painted here just
     created a visible seam around this wrapper's own box on wide viewports. */
  margin: 0 -1rem;
  padding: 0.25rem 1.1rem 0.5rem;
  color: var(--text);
  font-family: 'Space Mono', 'Work Sans', ui-monospace, -apple-system, BlinkMacSystemFont, sans-serif;
}

.moss-line * { box-sizing: border-box; }

/* h2 is deliberately left out here -- it falls through to the sitewide stamp treatment
   (see the global h2 rule) instead of Rajdhani/var(--text), so landing's section titles
   ("RIDES", "LATEST VIDEOS") get the same crooked stamp box as everywhere else. */
/* Override components.css's base h1 inside the landing-page scope. */
.moss-line h1, .moss-line .display {
  font-family: 'Rajdhani', 'Work Sans', sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-wrap: balance;
  margin: 0;
  color: var(--text);
}

.moss-line .mono { font-family: 'Space Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* Override foundation.css's base links inside the landing-page scope. */
.moss-line a { color: var(--moss); text-decoration: none; }
.moss-line a:hover, .moss-line a:focus-visible { text-decoration: underline; }
.moss-line h2 a { color: inherit; }

/* `.moss-line a` above (a class + tag compound, 0-1-1) outranks plain `.btn-primary`
   (0-1-0) in components.css, so every `<a class="btn-primary">` inside this scope --
   the hero Sign Up link and the three landing-card CTAs -- was rendering in --moss
   (light green) instead of --action-contrast, unreadable against the orange fill.
   `.btn-ghost` anchors don't need this: the existing evergreen dark-card override
   two classes deep already outranks `.moss-line a`. */
.moss-line a.btn-primary { color: var(--action-contrast); }

/* ---- hero: dash cluster ---- */
/* These are the base "Moss Line" component defaults. The landing page always overrides
   several of these properties (and on .moss-line .panel below) via the
   `.moss-line--evergreen` modifier block (~line 335) to match Events' palette -- see
   that block's comment. The override wins on specificity (a compound class selector),
   not source order, so reordering rules or splitting the file no longer changes what
   renders. */
.moss-line .dash {
  margin-top: 1rem;
  padding: 1.85rem 1.5rem;
  border-radius: 0.25rem;
  background:
    radial-gradient(ellipse 520px 260px at 15% 0%, rgba(157, 193, 120, 0.14), transparent 70%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--seam);
  position: relative;
  overflow: hidden;
}

.moss-line .dash::before, .moss-line .dash::after {
  content: "";
  position: absolute;
  left: 1.15rem; right: 1.15rem;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--moss-dim) 0 6px, transparent 6px 11px);
  opacity: 0.4;
}
.moss-line .dash::before { top: 0.6rem; }
.moss-line .dash::after { bottom: 0.6rem; }

.moss-line .dash-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--moss-dim);
}

.moss-line .dash h1 {
  font-size: clamp(2rem, 9vw, 2.9rem);
  line-height: 1.05;
  margin-top: 0.45rem;
}

.moss-line .dash h1 em { font-style: normal; color: var(--moss-hot); }

.moss-line .dash p.sub {
  margin: 0.65rem 0 0;
  color: var(--muted);
  max-width: 30rem;
  font-size: 1rem;
  line-height: 1.55;
}

.moss-line .dash-cta { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.35rem; flex-wrap: wrap; }

/* .btn-primary/.btn-ghost are now global components (components.css) -- the evergreen
   dark-card override for .btn-ghost lives there too, since .auth-card-primary needs the
   same light-on-dark swap. Nothing landing-specific left to override here. */

/* ---- section shell ---- */
.moss-line .section { margin-top: 2.1rem; }

/* ---- nav cards: Events / Closure Map / YouTube ---- */
/* One card per destination, stacked in a single column at every viewport -- the whole
   site body is capped at a 40rem single reading column (see chrome.css .nav), so this
   stays one layout instead of a desktop-only 3-up grid. Each card is its own bordered
   box (2026-09-22 rework: previously all three were rows sharing one merged panel). */
.moss-line .landing-cards {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Single row: icon+title left, description centered in the remaining space, CTA
   button right. Nothing wraps to a second line -- card content stays short by
   convention (a two-or-three-word title, a two-or-three-word description) so this
   fits down to phone width. */
.moss-line .landing-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.1rem;
  border: 2px solid var(--text);
  border-radius: 0.2rem;
  background: var(--panel);
}

/* Fixed width, not just flex:none -- "Events" and "YouTube Channel" are very
   different lengths, and without a shared width each card's description centers in
   a different-sized leftover space, so the three descriptions don't line up with
   each other down the page. A fixed basis (sized for the longest title, "YouTube
   Channel") makes every card's middle column start at the same x position. */
.moss-line .landing-card-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 11.5rem;
}

.moss-line .landing-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  flex: none;
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--accent-contrast);
}

.moss-line .landing-card-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  margin: 0;
  white-space: nowrap;
}

.moss-line .landing-card-desc {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fixed width, sized for the longest label ("SEE EVENTS"), so all three buttons
   match instead of each shrink-wrapping its own text. */
.moss-line .landing-card-cta { flex: 0 0 9rem; }

/* The fixed 11.5rem/9rem side columns above plus padding/gaps add up to ~24.5rem
   (392px) before the description gets any room at all -- comfortably inside the
   40rem desktop column, but wider than a real phone viewport (as narrow as 320-
   390px). Even with every fixed dimension scaled down below ~420px, what was left
   for the description was only wide enough for an ellipsis ("Create ...", "Live
   cl..."), which reads as broken rather than terse. So on phones the description
   is dropped entirely -- the card is just its title and its button -- and the left
   column goes fluid so the CTA still sits flush against the right edge. */
@media (max-width: 26.25rem) {
  .moss-line .landing-card {
    gap: 0.6rem;
    padding: 0.75rem 0.8rem;
  }
  .moss-line .landing-card-left {
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.45rem;
  }
  .moss-line .landing-card-icon {
    width: 1.9rem;
    height: 1.9rem;
  }
  .moss-line .landing-card-title {
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .moss-line .landing-card-desc {
    display: none;
  }
  .moss-line .landing-card-cta {
    flex-basis: 6.4rem;
    padding: 0.6rem 0.7rem;
    font-size: 0.85rem;
  }
}

/* Shared visual system: the landing page keeps its distinct copy and public login gate,
   but uses the same ink rules, evergreen hero, and compact teaser geometry as Events.
   `.moss-line--evergreen` is a modifier class on the same element as `.moss-line`
   (see app/templates/main/landing.html) -- explicit at the template call site, and
   these compound selectors win on specificity, not on appearing later in the file. */
.moss-line.moss-line--evergreen .dash {
  border-radius: 0;
  background: var(--panel-2);
  border: 2px solid var(--text);
}

.moss-line.moss-line--evergreen .dash h1 { color: var(--accent-contrast); }
.moss-line.moss-line--evergreen .dash h1 em { color: var(--action); }
.moss-line.moss-line--evergreen .dash p.sub { color: color-mix(in srgb, var(--accent-contrast) 76%, transparent); }
.moss-line.moss-line--evergreen .dash-eyebrow { color: color-mix(in srgb, var(--accent-contrast) 70%, transparent); }
/* .btn-primary/.btn-ghost dark-card overrides now live in components.css (shared with
   .auth-card-primary) -- see the note above .dash-cta. */

/* .landing-card already renders as a paper-colored box regardless of the hero's
   evergreen modifier -- nothing left to override here. */