/* app/assets/stylesheets/layouts/home.css
   ─────────────────────────────────────────────────────────────────────────────
   Public landing page. Dark masthead + hero, light body, dark footer.
   Uses design tokens from base/tokens.css exclusively.
   ───────────────────────────────────────────────────────────────────────────── */

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

.home-nav {
  position:        sticky;
  top:             0;
  z-index:         var(--z-masthead);
  background:      var(--color-black);
  border-bottom:   3px solid var(--color-blue-600);
  height:          var(--masthead-height);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 var(--space-6);
}

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

.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);
}

.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;
}

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

.home-hero {
  background:    var(--color-black);
  padding:       var(--space-16) var(--space-6);
  border-bottom: 1px solid #1c1c1a;
}

.home-hero__inner {
  max-width: var(--max-width-prose);
}

.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);
  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(--color-gray-500);
  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(--color-gray-500);
  text-decoration: none;
  transition:  color var(--transition-fast);
}

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

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

.home-dateline {
  background:    #111;
  border-top:    1px solid #1c1c1a;
  border-bottom: 1px solid #1c1c1a;
  padding:       var(--space-2) var(--space-6);
  display:       flex;
  align-items:   center;
  gap:           var(--space-4);
  overflow-x:    auto;
  scrollbar-width: none;
}

.home-dateline::-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:       #1c1c1a;
  font-size:   var(--text-sm);
  flex-shrink: 0;
}

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

.home-body {
  max-width: var(--max-width-content);
  margin:    0 auto;
  padding:   var(--space-12) var(--space-6);
}

.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(--color-black);
}

/* ── Features grid ───────────────────────────────────────────────────────── */

.home-features {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 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(--color-black);
  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);
  margin-bottom: var(--space-4);
}

.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;
}



.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;
}


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

.home-cta-strip {
  background:  var(--color-black);
  border-top:  3px solid var(--color-blue-600);
  padding:     var(--space-16) var(--space-6);
  text-align:  center;
  display:     flex;
  flex-direction: column;
  align-items: 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(--color-gray-500);
}

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

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

.home-footer {
  background:      var(--color-black);
  border-top:      1px solid #1c1c1a;
  padding:         var(--space-5) var(--space-6);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

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

.home-footer__link {
  font-family:     var(--font-sans);
  font-size:       var(--text-xs);
  color:           var(--color-gray-500);
  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. */

.home-page-body {
  background: var(--color-black);
  padding:    0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

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

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

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

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

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