/* app/assets/stylesheets/home.css
   ─────────────────────────────────────────────────────────────────────────────
   Public landing page. Dark throughout — chrome sits on --bg-chrome, the body
   sections on the page surface stack.

   Alignment: every band is full-bleed (no padding of its own) and puts its
   content inside .home-shell. That shell is the only thing that sets the
   horizontal gutter, so the nav wordmark, hero headline, feature grid, CTA and
   footer all share one left edge at any viewport width.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Shared content shell ────────────────────────────────────────────────── */

.home-shell {
  width:          100%;
  max-width:      var(--max-width-content);
  margin-inline:  auto;
  padding-inline: var(--gutter);
}

/* ── Navigation ──────────────────────────────────────────────────────────── */

.home-nav {
  position:      sticky;
  top:           0;
  z-index:       var(--z-masthead);
  background:    var(--bg-chrome);
  border-bottom: 3px solid var(--color-blue-600);
  height:        var(--masthead-height);
  display:       flex;
  align-items:   center;
}

.home-nav__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
}

.home-nav__brand {
  display:     flex;
  align-items: baseline;
  gap:         var(--space-2);
  min-width:   0;
}

.home-nav__wordmark {
  font-family:    var(--font-serif);
  font-size:      var(--text-lg);
  font-weight:    700;
  color:          var(--color-white);
  letter-spacing: var(--tracking-tight);
  white-space:    nowrap;
}

.home-nav__tag {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--color-blue-500);
  padding:        2px 6px;
  border:         1px solid var(--color-blue-600);
  border-radius:  var(--radius-sm);
  line-height:    1;
  flex-shrink:    0;
}

.home-nav__actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  flex-shrink: 0;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.home-hero {
  background:    var(--bg-chrome);
  padding-block: var(--space-16);
  border-bottom: 1px solid var(--color-ink-600);
}

.home-hero__eyebrow {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--color-blue-500);
  margin-bottom:  var(--space-4);
}

.home-hero__h1 {
  font-family:    var(--font-serif);
  font-size:      clamp(var(--text-2xl), 5vw, var(--text-4xl));
  font-weight:    700;
  color:          var(--color-white);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  max-width:      var(--max-width-prose);
  margin-bottom:  var(--space-6);
}

.home-hero__em {
  font-style: normal;
  color:      var(--color-blue-500);
}

.home-hero__sub {
  font-family:   var(--font-sans);
  font-size:     var(--text-lg);
  color:         var(--text-secondary);
  line-height:   var(--leading-normal);
  max-width:     520px;
  margin-bottom: var(--space-8);
}

.home-hero__actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-6);
  flex-wrap:   wrap;
}

.home-hero__link {
  font-family:     var(--font-sans);
  font-size:       var(--text-sm);
  color:           var(--text-muted);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.home-hero__link:hover {
  color: var(--color-white);
}

/* ── Dateline ticker ─────────────────────────────────────────────────────── */

.home-dateline {
  background:    var(--bg-page);
  border-top:    1px solid var(--color-ink-600);
  border-bottom: 1px solid var(--color-ink-600);
  padding-block: var(--space-2);
}

.home-dateline__inner {
  display:         flex;
  align-items:     center;
  gap:             var(--space-4);
  overflow-x:      auto;
  scrollbar-width: none;
  /* The strip can be wider than the shell. Fade the trailing edge so a clipped
     item reads as "scroll for more" rather than as a truncation bug. */
  mask-image:      linear-gradient(to right, #000 calc(100% - 40px), transparent);
}

.home-dateline__inner::-webkit-scrollbar {
  display: none;
}

.home-dateline__item {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color:          var(--color-blue-500);
  white-space:    nowrap;
}

.home-dateline__sep {
  color:       var(--color-ink-500);
  font-size:   var(--text-sm);
  flex-shrink: 0;
}

.home-dateline__item--clickable {
  background:    none;
  border:        none;
  padding:       0;
  cursor:        pointer;
  border-bottom: 1px dashed rgba(59, 130, 246, 0.5);
  transition:    color var(--transition-fast),
                 border-color var(--transition-fast);
}

.home-dateline__item--clickable:hover {
  color:        var(--color-white);
  border-color: var(--color-blue-500);
}

.home-dateline__item--clickable:focus-visible {
  outline:        2px solid var(--color-blue-500);
  outline-offset: 3px;
  border-radius:  2px;
}

/* ── Body ────────────────────────────────────────────────────────────────── */

.home-body {
  padding-block: var(--space-12);
}

.home-section-label {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--text-secondary);
  margin-bottom:  var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom:  2px solid var(--border-strong);
}

/* ── Features grid ───────────────────────────────────────────────────────── */
/* 1px gap over a border-coloured background draws the hairline rules between
   cells — no per-cell borders to double up at the seams. */

.home-features {
  display:               grid;
  /* 300px min lands on three columns inside the shell, so the six cards fill
     two full rows — 200px gave five columns and stranded the sixth. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap:                   1px;
  background:            var(--border-color);
  border:                1px solid var(--border-color);
  margin-bottom:         var(--space-12);
}

.home-feat {
  background: var(--bg-surface);
  padding:    var(--space-6);
}

.home-feat__icon {
  font-size:     20px;
  margin-bottom: var(--space-3);
  line-height:   1;
}

.home-feat__title {
  font-family:    var(--font-serif);
  font-size:      var(--text-md);
  font-weight:    700;
  color:          var(--text-primary);
  letter-spacing: var(--tracking-tight);
  margin-bottom:  var(--space-2);
}

.home-feat__body {
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  color:       var(--text-secondary);
  line-height: var(--leading-normal);
}

/* ── Levels grid ─────────────────────────────────────────────────────────── */

.home-levels {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:                   1px;
  background:            var(--border-color);
  border:                1px solid var(--border-color);
  margin-bottom:         var(--space-12);
}

.home-level {
  background:     var(--bg-surface);
  padding:        var(--space-5) var(--space-4);
  text-align:     center;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-2);
}

.home-level__name {
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  font-weight: 600;
  color:       var(--text-primary);
}

.home-level__area {
  font-family: var(--font-sans);
  font-size:   var(--text-xs);
  color:       var(--text-secondary);
}

/* ── Pull quote ──────────────────────────────────────────────────────────── */

.home-quote {
  border-left:   3px solid var(--color-blue-600);
  padding:       var(--space-5) var(--space-6);
  background:    var(--bg-surface);
  border-top:    1px solid var(--border-color);
  border-right:  1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.home-quote__text {
  font-family:   var(--font-serif);
  font-size:     var(--text-lg);
  color:         var(--text-primary);
  line-height:   var(--leading-normal);
  font-style:    italic;
  margin-bottom: var(--space-3);
}

.home-quote__attr {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color:          var(--text-secondary);
  font-style:     normal;
}

/* ── CTA strip ───────────────────────────────────────────────────────────── */

.home-cta-strip {
  background:    var(--bg-chrome);
  border-top:    3px solid var(--color-blue-600);
  padding-block: var(--space-16);
}

.home-cta-strip__inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            var(--space-4);
}

.home-cta-strip__heading {
  font-family:    var(--font-serif);
  font-size:      var(--text-3xl);
  font-weight:    700;
  color:          var(--color-white);
  letter-spacing: var(--tracking-tight);
}

.home-cta-strip__sub {
  font-family: var(--font-sans);
  font-size:   var(--text-base);
  color:       var(--text-secondary);
}

.home-cta-strip__sub strong {
  color: var(--color-white);
}

.home-cta-strip__actions {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-4);
  flex-wrap:       wrap;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.home-footer {
  background:    var(--bg-chrome);
  border-top:    1px solid var(--color-ink-600);
  padding-block: var(--space-5);
}

.home-footer__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
}

.home-footer__copy {
  font-family: var(--font-sans);
  font-size:   var(--text-xs);
  color:       var(--text-muted);
}

.home-footer__links {
  display: flex;
  gap:     var(--space-4);
}

.home-footer__link {
  font-family:     var(--font-sans);
  font-size:       var(--text-xs);
  color:           var(--text-muted);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.home-footer__link:hover {
  color: var(--color-white);
}

/* ── Application layout override for home page ───────────────────────────── */
/* The home page owns the full viewport — remove default body padding, and stay
   transparent so the map watermark on <html> shows through behind .home-body. */

.home-page-body {
  background: transparent;
  padding:    0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
/* The shell gutter narrows via --gutter, so only block spacing needs tuning. */

@media (max-width: 640px) {
  .home-hero {
    padding-block: var(--space-10);
  }

  .home-body {
    padding-block: var(--space-8);
  }

  .home-hero__actions {
    flex-direction: column;
    align-items:    flex-start;
  }

  .home-cta-strip {
    padding-block: var(--space-10);
  }

  .home-footer__inner {
    flex-direction: column;
    gap:            var(--space-2);
    text-align:     center;
  }
}