/*
 * Styles for the public landing page at /.
 * Linked from templates/index.html via
 *   <link rel="stylesheet" th:href="@{/css/home.css(v=${assetVersion})}">
 * so the per-deploy ?v=<sha> query suffix invalidates the browser cache.
 *
 * Extracted from the inline <style> block 2026-06-15 as part of Epic
 * 1.4.5 (CSP tightening). The palette tokens duplicate the ones in
 * logbuch.css and dashboard.css; consolidation behind a shared brand
 * stylesheet is parked under planning/93 "Website style guide".
 */

:root {
  color-scheme: dark;
  --bg-deep: #071016;
  --bg-panel: #0d1a22;
  --bg-elevated: #152532;
  --divider: #1d2e3a;
  --gold: #f1bd56;
  --gold-deep: #c88d2f;
  --cyan: #35d8ee;
  --text: #f4ead0;
  --text-dim: #b3a888;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100vh; }
body {
  background: radial-gradient(ellipse at top, #0d1a22 0%, var(--bg-deep) 60%);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* Slim single-row top bar: TQ-Pille | brand center | language switch. The
 * card-style brand (icon + large headline + tagline) is parked for the future
 * /me login page; see planning/93 "Login-Zwischenseite mit Brand-Card".
 *
 * Grid with 1fr/auto/1fr keeps the brand visually centered even when the
 * TQ pill is absent (first ~60s after boot, or when ESI is unreachable). */
.home-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--divider);
}
.home-header .tq-status { grid-column: 1; justify-self: start; }
.home-brand { grid-column: 2; justify-self: center; }
.home-header .home-lang-switch { grid-column: 3; justify-self: end; }

.home-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.brand-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: block;
}
.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  text-align: left;
}
.brand-wordmark {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--text);
  line-height: 1.2;
}
.brand-wordmark .accent { color: var(--gold); }
.brand-subtitle {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

main {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.5rem 1rem 2rem;
}
.card {
  width: 100%;
  max-width: 640px;
  padding: 0;
  text-align: left;
}
.latest-tile {
  display: block;
  margin: 2rem 0 1rem;
  background: var(--bg-panel);
  border: 1px solid var(--divider);
  border-radius: 4px;
  overflow: hidden;
  text-align: left;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.latest-tile:hover,
.latest-tile:focus-visible {
  border-color: var(--gold);
  transform: translateY(-1px);
  outline: none;
}
.latest-hero {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: cover;
  object-position: center;
  background: var(--bg-elevated);
}
.latest-body { padding: 1rem 1.2rem 1.1rem; }
.latest-meta {
  margin: 0 0 .35rem;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.latest-meta .meta-label { color: var(--cyan); }
.latest-title {
  margin: 0 0 .5rem;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--text);
  line-height: 1.25;
}
.latest-tile:hover .latest-title,
.latest-tile:focus-visible .latest-title { color: var(--gold); }
.latest-teaser {
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--text);
}
/* Sibling strip below the latest hero — same data source, compact rows. */
.strip-heading {
  margin: 1.25rem 0 0;
  padding: 0.9rem 0 0.4rem;
  border-top: 1px solid var(--divider);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  font-weight: 600;
  text-align: left;
}
.strip {
  list-style: none;
  margin: 0;
  padding: 0;
}
.strip-item {
  border-top: 1px solid var(--divider);
}
.strip-item:first-of-type { border-top: none; }
.strip-link {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.9rem;
  padding: 0.7rem 0.2rem;
  text-decoration: none;
  color: var(--text);
  transition: background-color 0.12s;
}
.strip-link:hover,
.strip-link:focus-visible {
  background: rgba(53, 216, 238, 0.04);
  outline: none;
}
.strip-date {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  color: var(--text-dim);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  padding-top: 0.15rem;
}
/* Mini hero fills the otherwise-empty space below the date in the left column. */
.strip-thumb {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  width: 6.5rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  margin-top: 0.45rem;
  border: 1px solid var(--divider);
  border-radius: 3px;
  background: var(--bg-elevated);
  transition: border-color 0.12s;
}
.strip-link:hover .strip-thumb,
.strip-link:focus-visible .strip-thumb { border-color: var(--gold); }
.strip-title {
  grid-column: 2;
  grid-row: 1;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  transition: color 0.12s;
}
.strip-link:hover .strip-title,
.strip-link:focus-visible .strip-title { color: var(--gold); }
.strip-teaser {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.4;
  margin-top: 0.2rem;
  /* Multi-line truncation so a long teaser stays inside the strip rhythm. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Discreet, clearly-labelled sponsored referral line between the latest
   tile and the strip. Deliberately flat — no border, no panel fill — so it
   reads as a one-line aside, not as another card like the latest tile. */
.home-ad {
  margin: 0.85rem 0 0;
  text-align: center;
}
.home-ad-text {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-dim);
}
.home-ad-label {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0.55;
  margin-right: 0.45rem;
}
.home-ad-text a {
  color: var(--cyan);
  text-decoration: underline;
  text-decoration-color: rgba(53, 216, 238, 0.35);
  white-space: nowrap;
  transition: text-decoration-color 0.15s;
}
.home-ad-text a:hover { text-decoration-color: var(--cyan); }

.latest-more {
  margin: .75rem 0 0;
  font-size: .82rem;
  letter-spacing: .02em;
}
.latest-more a {
  color: var(--cyan);
  text-decoration: underline;
  text-decoration-color: rgba(53, 216, 238, 0.35);
  transition: text-decoration-color 0.15s;
}
.latest-more a:hover { text-decoration-color: var(--cyan); }
.latest-link {
  margin: 1.5rem 0 0;
  font-size: 0.85rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.latest-link .label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  opacity: 0.7;
  margin-bottom: 0.3rem;
}
.latest-link a {
  color: var(--cyan);
  text-decoration: underline;
  text-decoration-color: rgba(53, 216, 238, 0.35);
}
.latest-link a:hover { text-decoration-color: var(--cyan); }
footer.legal {
  padding: 1.5rem 1rem 1rem;
  text-align: center;
  font-size: .8rem;
  color: var(--text-dim);
  border-top: 1px solid var(--divider);
}
footer.legal a {
  color: var(--text-dim);
  text-decoration: none;
  margin: 0 .6rem;
  transition: color 0.15s;
}
footer.legal a:hover { color: var(--cyan); }
.legal-note {
  font-size: .7rem;
  color: var(--text-dim);
  opacity: 0.6;
  margin-top: .75rem;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}
.ai-credit {
  font-size: .72rem;
  color: var(--text-dim);
  opacity: 0.75;
  margin: .75rem auto 0;
  max-width: 540px;
  line-height: 1.5;
}
.ai-credit + .ai-credit { margin-top: .2rem; }
.ai-credit--quiet {
  font-size: .68rem;
  opacity: 0.5;
}
.version-stamp {
  position: fixed;
  bottom: .75rem;
  right: .9rem;
  font-size: .7rem;
  color: var(--text-dim);
  opacity: 0.45;
  letter-spacing: .03em;
  pointer-events: none;
  user-select: text;
}
.version-stamp .sep {
  margin: 0 .4rem;
}
.version-stamp .sha {
  font-family: ui-monospace, "Geist Mono", "JetBrains Mono", monospace;
}
.home-lang-switch {
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}
.home-lang-switch .current { color: var(--text); font-weight: 600; padding: 0 .4rem; }
.home-lang-switch .sep { color: var(--text-dim); opacity: 0.5; }
.home-lang-switch a {
  color: var(--text-dim);
  text-decoration: none;
  padding: 0 .4rem;
  transition: color 0.15s;
}
.home-lang-switch a:hover,
.home-lang-switch a:focus-visible { color: var(--gold); outline: none; }

/* Live Tranquility status — pulled by EveServerStatusService every 5min. */
.tq-status {
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(13, 26, 34, 0.6);
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--divider);
  backdrop-filter: blur(6px);
}
.tq-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: #6dd498;
  box-shadow: 0 0 6px rgba(109, 212, 152, 0.6);
  flex-shrink: 0;
}
.tq-status.vip .tq-dot {
  background: var(--gold);
  box-shadow: 0 0 6px rgba(241, 189, 86, 0.6);
}
.tq-label { color: var(--text); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .68rem; }
.tq-players { color: var(--text-dim); }
.tq-vip-badge {
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-deep);
  padding: .05rem .35rem;
  border-radius: 3px;
}

/* Narrow viewports: tighten the header padding and shrink the brand icon so
 * TQ pill + brand + lang switch fit in one row down to ~360 px. */
@media (max-width: 600px) {
  .home-header {
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
  }
  .brand-icon {
    width: 32px;
    height: 32px;
  }
  .brand-wordmark { font-size: 1.1rem; }
  .brand-subtitle { font-size: 0.72rem; }
}