/* Styles the standalone EA4FSI landing page and its full-screen navigation experience. */
:root {
  --amber: #ffc531;
  --white: #f7f8fa;
  --muted: #b9c0c9;
  --line: rgba(255,255,255,.22);
  --bg: #02070d;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; text-decoration: none; }

.landing-shell { min-height: 100vh; overflow: hidden; }
.hero { min-height: 100svh; position: relative; display: grid; grid-template-rows: auto 1fr auto; }
.hero-bg, .hero-shade, .mountain-bg, .mountain-shade { position: absolute; inset: 0; }
.hero-bg {
  background: url('../images/ea4fsi-landing-earth-aurora-01.png') center 47% / cover no-repeat;
  transform: scale(1.012);
}
.hero-shade {
  background:
    linear-gradient(180deg, rgba(1,6,12,.28) 0%, rgba(1,6,12,.12) 38%, rgba(1,6,12,.35) 70%, rgba(1,6,12,.80) 100%),
    linear-gradient(90deg, rgba(1,6,12,.10), rgba(1,6,12,.02) 45%, rgba(1,6,12,.36));
}
.landing-header {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.35rem 2.2rem;
  border-bottom: 1px solid rgba(255,255,255,.15);
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,0));
}
.brand-mini { color: var(--amber); font-weight: 800; font-size: clamp(1.35rem, 2vw, 2rem); letter-spacing: .02em; }
.header-meta { color: #dbe1e7; letter-spacing: .22em; font-size: .66rem; white-space: nowrap; }
.utility-nav { display: flex; align-items: center; gap: .55rem; font-size: .82rem; }
.utility-nav .active { color: var(--amber); font-weight: 700; }

.hero-content {
  position: relative;
  z-index: 2;
  align-self: center;
  justify-self: center;
  width: min(90vw, 760px);
  text-align: center;
  padding: 5rem 1rem 4rem;
  text-shadow: 0 2px 16px rgba(0,0,0,.48);
}
.eyebrow { margin: 0 0 .6rem; color: #d7dde3; letter-spacing: .32em; font-size: .72rem; }
h1 { margin: 0; color: var(--amber); font-size: clamp(4.8rem, 11vw, 9.5rem); line-height: .87; letter-spacing: -.035em; }
.strapline { margin: 1.25rem 0 0; font-size: clamp(1rem, 2vw, 1.55rem); letter-spacing: .28em; line-height: 1.45; }
.hero-rule { width: min(100%, 390px); height: 1px; background: rgba(255,255,255,.66); margin: 1.25rem auto 1rem; }
.station-history { margin: 0; color: #eef1f4; font-size: .92rem; letter-spacing: .04em; }
.hero-intro { margin: 2.1rem 0 0; color: #e7ebef; font-size: .95rem; }

.primary-grid {
  position: relative;
  z-index: 3;
  width: min(95vw, 1500px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.nav-tile {
  min-height: 136px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: 1rem .8rem;
  text-align: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.22));
  backdrop-filter: blur(2px);
  transition: background .18s ease, transform .18s ease, color .18s ease;
}
.nav-tile:nth-child(4n) { border-right: 0; }
.nav-tile:hover, .nav-tile:focus-visible {
  background: rgba(255,197,49,.12);
  color: var(--amber);
  outline: none;
  transform: translateY(-2px);
}
.nav-icon {
  width: 58px;
  height: 44px;
  object-fit: contain;
  display: block;
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}
.nav-tile:hover .nav-icon, .nav-tile:focus-visible .nav-icon {
  transform: translateY(-2px) scale(1.04);
  filter: brightness(1.12);
}
.nav-tile strong { font-size: .82rem; letter-spacing: .055em; line-height: 1.25; }
.nav-tile small { color: var(--muted); font-size: .72rem; line-height: 1.3; }

.terrestrial-band {
  min-height: 300px;
  position: relative;
  display: flex;
  align-items: flex-end;
}
.mountain-bg { background: url('../images/ea4fsi-landing-mountain-antenna-01.png') center 55% / cover no-repeat; }
.mountain-shade { background: linear-gradient(180deg, rgba(2,7,13,.25), rgba(2,7,13,.58) 65%, rgba(2,7,13,.9)); }
.terrestrial-content {
  position: relative;
  z-index: 2;
  width: min(94vw, 1500px);
  margin: 0 auto;
  padding: 5.5rem 0 2.3rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.quote { margin: 0; font-family: Georgia, serif; font-style: italic; font-size: clamp(1.3rem, 2.4vw, 2.2rem); color: #f4f5f6; }
.secondary-links { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: flex-end; }
.secondary-links a { font-size: .72rem; letter-spacing: .15em; color: #d6dce2; }
.secondary-links a:hover { color: var(--amber); }

@media (max-width: 1100px) {
  /*
   * Tablet / smaller laptop:
   * keep the orbital composition readable by moving the focal point
   * slightly left (toward the ISS) and upward (toward the aurora).
   */
  .hero-bg {
    background-position: 39% 43%;
  }

  .primary-grid {
    width: min(97vw, 1200px);
  }

  .mountain-bg {
    background-position: 68% 52%;
  }
}

@media (max-width: 900px) {
  .landing-header {
    grid-template-columns: 1fr auto;
    padding: 1rem 1.1rem;
  }

  .header-meta {
    display: none;
  }

  .hero {
    min-height: auto;
  }

  /*
   * Two-column navigation gives the main photograph more breathing room
   * while keeping the eight destinations easy to scan.
   */
  .primary-grid {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: rgba(2,7,13,.62);
  }

  .nav-tile:nth-child(4n) {
    border-right: 1px solid var(--line);
  }

  .nav-tile:nth-child(2n) {
    border-right: 0;
  }

  .hero-content {
    padding: 5rem 1rem 4.5rem;
  }

  .hero-bg {
    background-position: 36% 44%;
  }

  .terrestrial-band {
    min-height: 270px;
  }

  .mountain-bg {
    /* Keep the tower/ridge in view instead of centring the panorama. */
    background-position: 78% 52%;
  }
}

@media (max-width: 560px) {
  .landing-header {
    position: relative;
    background: linear-gradient(180deg, rgba(2,7,13,.62), rgba(2,7,13,.08));
  }

  .brand-mini {
    font-size: 1.35rem;
  }

  .utility-nav {
    font-size: .75rem;
  }

  /*
   * On a tall phone the hero can be much taller than the wide source
   * photograph.  Do not make the browser "cover" that entire long area:
   * reserve a photographic upper stage for the station identity and let
   * the navigation continue over the normal dark background below.
   */
  .hero-bg,
  .hero-shade {
    bottom: auto;
    height: clamp(545px, 69svh, 690px);
  }

  .hero-bg {
    transform: none;
    background-size: cover;
    /*
     * Approximately centres the source between the ISS at upper left and
     * illuminated Europe below, preserving both far better than a centred
     * portrait crop.
     */
    background-position: 34% 48%;
  }

  .hero-shade {
    background:
      linear-gradient(180deg,
        rgba(1,6,12,.30) 0%,
        rgba(1,6,12,.08) 33%,
        rgba(1,6,12,.24) 66%,
        rgba(1,6,12,.92) 100%),
      linear-gradient(90deg,
        rgba(1,6,12,.08),
        rgba(1,6,12,.02) 55%,
        rgba(1,6,12,.18));
  }

  .hero-content {
    width: 100%;
    min-height: 475px;
    padding: 4rem 1rem 3.25rem;
    align-self: start;
  }

  h1 {
    font-size: clamp(4rem, 22vw, 6.4rem);
  }

  .eyebrow {
    font-size: .64rem;
    letter-spacing: .27em;
  }

  .strapline {
    font-size: .82rem;
    letter-spacing: .19em;
    line-height: 1.5;
  }

  .station-history {
    font-size: .77rem;
  }

  .hero-intro {
    margin-top: 1.25rem;
    font-size: .85rem;
  }

  .primary-grid {
    position: relative;
    z-index: 4;
    grid-template-columns: 1fr 1fr;
    background:
      linear-gradient(180deg, rgba(2,7,13,.94), rgba(2,7,13,.99));
    border-top-color: rgba(255,255,255,.18);
  }

  .nav-tile {
    min-height: 126px;
    padding: .9rem .45rem;
    background: transparent;
    backdrop-filter: none;
  }

  .nav-icon {
    width: 52px;
    height: 42px;
  }

  .nav-tile strong {
    font-size: .72rem;
  }

  .nav-tile small {
    font-size: .64rem;
  }

  /*
   * The terrestrial panorama has its subject on the right.  Crop around
   * the communications tower rather than the geometric centre.
   */
  .terrestrial-band {
    min-height: 300px;
  }

  .mountain-bg {
    background-size: cover;
    background-position: 84% 50%;
  }

  .mountain-shade {
    background:
      linear-gradient(180deg,
        rgba(2,7,13,.16),
        rgba(2,7,13,.52) 58%,
        rgba(2,7,13,.94));
  }

  .terrestrial-content {
    flex-direction: column;
    align-items: flex-start;
    padding: 6rem 1rem 1.5rem;
  }

  .quote {
    max-width: 80%;
  }

  .secondary-links {
    justify-content: flex-start;
  }


@media (max-width: 380px) {
  /*
   * Very narrow phones: keep the two-column navigation, but reduce type
   * and spacing just enough to prevent long labels from colliding.
   */
  .nav-tile {
    min-height: 122px;
    padding-inline: .3rem;
  }

  .nav-tile strong {
    font-size: .67rem;
    letter-spacing: .035em;
  }

  .nav-tile small {
    font-size: .60rem;
  }

  .hero-bg {
    background-position: 32% 48%;
  }

  .mountain-bg {
    background-position: 86% 50%;
  }
}


}

/* v15 — EA4FSI shield + callsign brand */
.brand-mini { display:inline-flex; align-items:center; gap:.68rem; text-decoration:none; }
.brand-shield { display:block; width:auto !important; height:46px !important; max-width:none !important; max-height:46px !important; object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 2px 5px rgba(0,0,0,.38)); }
.brand-mini span { display:inline-block; }
@media (max-width:900px) {
  .brand-shield { height:41px !important; max-height:41px !important; }
}
@media (max-width:560px) {
  .brand-mini { gap:.5rem; }
  .brand-shield { height:36px !important; max-height:36px !important; }
}


/* v21 — randomized quotation */
.terrestrial-content .quote{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.terrestrial-content .quote-text{display:block}
.terrestrial-content .quote-author{display:block;font-size:.72em;letter-spacing:.06em;opacity:.82}
@media(max-width:700px){.terrestrial-content .quote{gap:5px;padding-left:18px;padding-right:18px}}

/* v22 — subtler quotation typography */
.terrestrial-content .quote-text{
  font-size:16px;
  line-height:1.45;
}
.terrestrial-content .quote-author{
  font-size:12px;
  line-height:1.35;
}
@media(max-width:700px){
  .terrestrial-content .quote-text{font-size:14px}
  .terrestrial-content .quote-author{font-size:11px}
}

/* v171 restores the landing identity composition and language selector without an internal-page header. */
.landing-language{position:absolute;z-index:5;top:1.35rem;right:2.2rem;display:flex;align-items:center;gap:.55rem;font-size:.82rem;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.landing-language .active{color:var(--amber);font-weight:700}
.landing-identity-shield{display:block;width:auto;height:72px;margin:1.35rem auto 0;object-fit:contain;filter:drop-shadow(0 3px 9px rgba(0,0,0,.45))}
.hero-intro{margin-top:1.35rem}
@media(max-width:560px){.landing-language{top:1rem;right:1.1rem;font-size:.75rem}.landing-identity-shield{height:42px;margin-top:1rem}.hero-intro{margin-top:1rem}}


/* v283 — restore landing-page text contrast.
   Explicit colours prevent shared/global typography rules from inheriting
   dark text on the photographic landing background. */
.landing-shell .hero-content,
.landing-shell .strapline{
  color:#f7f8fa !important;
}
.landing-shell .nav-tile,
.landing-shell .nav-tile strong{
  color:#f7f8fa !important;
}
.landing-shell .nav-tile small{
  color:#b9c0c9 !important;
}
.landing-shell .nav-tile:hover,
.landing-shell .nav-tile:focus-visible,
.landing-shell .nav-tile:hover strong,
.landing-shell .nav-tile:focus-visible strong{
  color:#ffc531 !important;
}