/* ============================================================================
   IREX docs portal — home page (and 404, and the es/mn locale homes)
   Tokens: docs-site.css → colors_and_type.css

   Geometry follows the rebuilt irex.ai marketing site: one 1180px container
   shared by the header, hero, card grid and footer, so the logo sits flush with
   the left edge of the left-hand card and the language switcher with the right
   edge of the right-hand one. Vertical rhythm is deliberately tight — both card
   rows must clear the fold on a 900px-tall viewport.
   ========================================================================== */

@import url("docs-site.css");

:root {
  --home-max: 1180px;
  --home-gutter: 28px;
  --topbar-h: 3.75rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Isometric smart-city artwork carried over from the legacy portal home.
     Fixed + cover keeps the empty plaza behind the hero and the first card row. */
  background-color: var(--bg);
  background-image: url("home/home-bg-city.webp");
  background-position: left top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* iOS Safari renders background-attachment:fixed unreliably, and a cover-sized
   portrait image swamps a phone screen. Scroll it and anchor the plaza instead. */
@media (max-width: 900px) {
  body {
    background-attachment: scroll;
    background-size: 220% auto;
    background-position: 18% top;
  }
}
@media (prefers-reduced-motion: reduce) {
  body { background-attachment: scroll; }
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--link); }
a:active { color: var(--link-press); }

/* ---- Topbar ------------------------------------------------------------
   Light chrome, matching the irex.ai content pages and all 300+ guide pages.
   Logo left, primary nav optically centered, language switcher right. */
.home-topbar {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.home-topbar-inner {
  position: relative;
  max-width: var(--home-max);
  margin: 0 auto;
  padding: 0 var(--home-gutter);
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.home-topbar-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.home-topbar-brand:hover { text-decoration: none; }
.home-topbar-brand img { height: 34px; width: auto; }

/* Three zones: brand, nav, utilities. The outer two flex equally, which centres
   the nav on the container while keeping every element IN FLOW.
   Do not centre the nav with position:absolute. It was written that way first,
   and because an out-of-flow element reserves no space, the search box that
   docs-search.js injects at runtime rendered straight through the nav links. */
.home-topbar-brand { flex: 1 1 0; min-width: 0; }
.home-topbar .docs-topnav { flex: 0 0 auto; margin: 0; }
.home-topbar-utils {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}
/* The injected search lives in the right-hand zone and yields space first. */
.home-topbar-utils .docs-search { margin-left: 0; }
.home-topbar .docs-lang { margin-left: 0; flex-shrink: 0; }

@media (max-width: 960px) {
  /* The primary strip has collapsed into the Docs menu by here, so centring
     buys nothing: fall back to brand left, everything else right. */
  .home-topbar-brand { flex: 0 0 auto; }
  .home-topbar .docs-topnav { margin-left: auto; }
  .home-topbar-utils { flex: 0 0 auto; }
  .home-topbar-inner { padding: 0 var(--space-4); gap: var(--space-3); }
}

/* ---- Hero --------------------------------------------------------------- */
.home-hero {
  position: relative;
  overflow: hidden;
  /* A soft white scrim, not a solid fill: the city art stays visible while the
     title keeps its contrast ratio over the buildings in the top-left corner. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.5) 100%);
}
.home-hero-inner {
  max-width: var(--home-max);
  margin: 0 auto;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) var(--home-gutter) clamp(1.25rem, 2.5vw, 1.75rem);
}
.home-hero-eyebrow {
  font-family: var(--font-head);
  font-weight: var(--w-semibold);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-2);
}
.home-hero-title {
  font-family: var(--font-head);
  font-weight: var(--w-bold);
  font-size: clamp(1.5rem, 3vw, 2.375rem);
  line-height: 1.12;
  letter-spacing: var(--tracking-tight, -0.01em);
  color: var(--fg);
  margin: 0 0 var(--space-3);
  white-space: nowrap;
}
.home-hero-title .accent { color: var(--accent); }
.home-hero-lead {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--fg-muted);
  margin: 0;
  max-width: 40rem;
}

@media (max-width: 640px) {
  .home-hero-title { white-space: normal; }
}

/* ---- Sections / cards ------------------------------------------------- */
.home-main {
  max-width: var(--home-max);
  margin: 0 auto;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) var(--home-gutter) clamp(2.5rem, 5vw, 3.5rem);
}

.home-section + .home-section { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

.home-section-label {
  font-family: var(--font-head);
  font-weight: var(--w-semibold);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-3);
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.home-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 1.15rem 1.3rem 1.3rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  text-decoration: none;
  color: inherit;
  min-height: 100%;
}
.home-card:hover {
  border-color: color-mix(in srgb, var(--irex-teal) 35%, var(--border));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  text-decoration: none;
  color: inherit;
}

/* Card illustration, right-hand side, roughly the scale the legacy portal used.
   It sits *behind* the text and is centred on the link list rather than the card,
   which keeps it clear of the title. Card labels are kept short enough that the
   longest one stops at the artwork's edge; if you add a longer one, check it.
   Decorative: alt="" and aria-hidden in the markup, so it never competes with
   the card title for a screen reader. A fixed box with object-fit keeps six
   different aspect ratios aligned to the same right edge. */
.home-card-icon {
  position: absolute;
  top: calc(50% + 10px);
  right: 1.3rem;
  transform: translateY(-50%);
  width: 124px;
  height: 112px;
  object-fit: contain;
  object-position: right center;
  opacity: 0.92;
  pointer-events: none;
  z-index: 0;
}
/* Text always wins the stacking order. */
.home-card-title,
.home-card-list { position: relative; z-index: 1; }

/* Compact variant. The es/mn homes carry longer labels on shorter cards (one or
   two links each), where the full-size artwork would sit under the text. Drop
   this modifier once those cards are rewritten to the five-link English shape. */
.home-card-icon--sm {
  top: 0.85rem;
  right: 1rem;
  transform: none;
  width: 66px;
  height: 60px;
  opacity: 1;
}
.home-card:has(.home-card-icon--sm) .home-card-title { padding-right: 5.25rem; }

.home-card-title {
  font-family: var(--font-head);
  font-weight: var(--w-bold);
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--fg);
  margin: 0;
  /* The illustration is centred on the list now, so the title has the full
     width. Reserve two lines whether the title needs them or not, so every
     list in the row starts on the same baseline. */
  min-height: 2.6em;
}
/* A card with no illustration (some locale homes) uses the full width. */
.home-card:not(:has(.home-card-icon)) .home-card-title { padding-right: 0; }

.home-card-title a {
  color: var(--fg);
  border: 0;
}
.home-card-title a:hover,
.home-card:hover .home-card-title a {
  color: var(--link);
}

.home-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.home-card-list a {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fg-muted);
  border: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
}
.home-card-list a::before {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  transform: translateY(-0.05rem);
}
.home-card-list a:hover { color: var(--link); }

@media (max-width: 900px) {
  .home-grid { grid-template-columns: 1fr; }
  .home-card-title { min-height: 0; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Footer ------------------------------------------------------------
   Opaque, so it reads cleanly over the fixed city backdrop. */
.home-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.home-footer-inner {
  max-width: var(--home-max);
  margin: 0 auto;
  padding: clamp(2.25rem, 4vw, 3rem) var(--home-gutter) clamp(1.5rem, 3vw, 2rem);
}
.home-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-6);
}
.home-footer-brand img { height: 28px; width: auto; }
.home-footer-tagline {
  font-family: var(--font-head);
  font-weight: var(--w-semibold);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--fg-muted);
  margin: var(--space-4) 0 0;
  max-width: 22ch;
}
.home-footer-col-label {
  font-family: var(--font-head);
  font-weight: var(--w-semibold);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 var(--space-3);
}
.home-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.home-footer-list li { margin: 0 0 0.4rem; }
.home-footer-list a {
  font-size: 0.84375rem;
  color: var(--fg-muted);
  border: 0;
}
.home-footer-list a:hover { color: var(--link); }

.home-social {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.home-social a {
  color: var(--fg-subtle);
  display: inline-flex;
  transition: color 0.15s ease;
}
.home-social a:hover { color: var(--accent); }
.home-social svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  display: block;
}

.home-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
}
.home-footer-bottom p { margin: 0; }
.home-footer-bottom a { color: var(--fg-subtle); border: 0; }
.home-footer-bottom a:hover { color: var(--link); }

/* Compact variant for 404 and the locale homes: brand + social + copyright. */
.home-footer--slim .home-footer-grid { grid-template-columns: 1fr; }
.home-footer--slim .home-social { margin-top: var(--space-4); }

@media (max-width: 900px) {
  .home-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}
@media (max-width: 560px) {
  .home-footer-grid { grid-template-columns: 1fr; }
}