/* ==========================================================================
   Future Technology - homepage styles
   Mobile-first (375px). Dark premium publication look.
   Pair with homepage_generator.py. Ship as /assets/homepage.css.
   ========================================================================== */

:root {
  --bg: #070b18;
  --ink: #f4f6fb;
  --ink-soft: rgba(255, 255, 255, 0.72);
  --ink-mute: rgba(255, 255, 255, 0.5);
  --ink-faint: rgba(255, 255, 255, 0.35);
  --hairline: rgba(255, 255, 255, 0.06);
  --accent: #22d3ee;
  --cat-ai: #a78bfa;
  --cat-security: #f87171;
  --cat-computing: #34d399;
  --cat-science: #fbbf24;
  --cat-technology: #22d3ee;
  --radius-lg: 12px;
  --radius-md: 8px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

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

.home {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 16px 56px;
}

/* Section labels ("TRENDING", "LATEST", "MORE FROM...") ------------------- */

.section-label {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.section-label--latest {
  padding-left: 10px;
  border-left: 3px solid var(--accent);
}

.section-label--trending::before {
  content: none;
}

/* Category chips ---------------------------------------------------------- */

.chip {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.chip--sm { padding: 3px 7px; font-size: 9px; }

.chip--ai         { color: var(--cat-ai);         background: rgba(167, 139, 250, 0.14); }
.chip--security   { color: var(--cat-security);   background: rgba(248, 113, 113, 0.14); }
.chip--computing  { color: var(--cat-computing);  background: rgba(52, 211, 153, 0.14); }
.chip--science    { color: var(--cat-science);    background: rgba(251, 191, 36, 0.14); }
.chip--technology { color: var(--cat-technology); background: rgba(34, 211, 238, 0.14); }

/* --------------------------------------------------------------------------
   1. Hero - the cover image IS the hero. Title lives on the image.
   -------------------------------------------------------------------------- */

.hero { margin: 8px 0 0; }

.hero__link { display: block; }

.hero__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0c1226; /* while image loads */
}

.hero__img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.hero__img--fallback { background: #0c1226; }
.hero__img--ai         { background: linear-gradient(160deg, #171236, #0c1226); }
.hero__img--security   { background: linear-gradient(160deg, #2b1220, #0c1226); }
.hero__img--computing  { background: linear-gradient(160deg, #0a2420, #0c1226); }
.hero__img--science    { background: linear-gradient(160deg, #2a2010, #0c1226); }
.hero__img--technology { background: linear-gradient(160deg, #0a2230, #0c1226); }

/* Gradient shade: transparent at 40%, solid page colour at the bottom edge
   so the image dissolves into the layout. */
.hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(7, 11, 24, 0) 30%,
    rgba(7, 11, 24, 0.45) 65%,
    rgba(7, 11, 24, 0.82) 100%
  );
}

.hero__media > .chip {
  position: absolute;
  top: 12px;
  left: 12px;
  backdrop-filter: blur(4px);
}

.hero__text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 14px 14px;
}

.hero__title {
  margin: 0;
  font-size: 19px;
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  overflow: visible;
}

.hero__meta {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--ink-mute);
}

/* --------------------------------------------------------------------------
   2. Secondary stories - quiet text list under the hero.
   -------------------------------------------------------------------------- */

.stories { margin-top: 20px; }

.stories__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.stories__item {
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}

.stories__item:last-child { border-bottom: none; }

.stories__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.stories__time {
  font-size: 11px;
  color: var(--ink-faint);
}

.stories__title {
  margin: 0;
  font-size: 16px;
  line-height: 1.38;
  font-weight: 600;
  color: var(--ink);
}

.stories__link:active .stories__title { color: var(--accent); }

/* --------------------------------------------------------------------------
   3. Trending - numbered, compact.
   -------------------------------------------------------------------------- */

.trending { margin-top: 40px; }

.trending__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: trend;
}

.trending__item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
}

.trending__num {
  flex: 0 0 26px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.trending__body {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
}

.trending__title {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink);
}

.trending__title:active { color: var(--accent); }

/* --------------------------------------------------------------------------
   4. Newsletter - dark card, one gradient allowed on the button.
   -------------------------------------------------------------------------- */

.signup {
  margin-top: 48px;
  padding: 22px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}

.signup__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.signup__sub {
  margin: 6px 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-mute);
}

.signup__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.signup__input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  outline: none;
  -webkit-appearance: none;
}

.signup__input::placeholder { color: var(--ink-faint); }

.signup__input:focus {
  border-color: rgba(34, 211, 238, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

.signup__btn {
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.02em;
  color: #04121a;
  background: linear-gradient(135deg, #22d3ee, #0ea5c4);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.signup__btn:active { filter: brightness(0.92); }

/* --------------------------------------------------------------------------
   5. Latest + "More from Future Technology" - shared horizontal cards.
   -------------------------------------------------------------------------- */

.latest { margin-top: 44px; }

.latest__list { display: block; }

.home .card,
.related .card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}

.latest__list .card:first-child { padding-top: 4px; }
.latest__list .card:last-child { border-bottom: none; }

.card__thumb {
  /* Covers are 16:9 -- a square crop threw away most of the artwork. */
  flex: 0 0 128px;
  width: 128px;
  height: 72px;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: #0c1226;
}

/* Cover missing: category-tinted tile with the category initial. */
.card__thumb--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
}

.card__thumb--ai         { color: var(--cat-ai);         background: rgba(167, 139, 250, 0.12); }
.card__thumb--security   { color: var(--cat-security);   background: rgba(248, 113, 113, 0.12); }
.card__thumb--computing  { color: var(--cat-computing);  background: rgba(52, 211, 153, 0.12); }
.card__thumb--science    { color: var(--cat-science);    background: rgba(251, 191, 36, 0.12); }
.card__thumb--technology { color: var(--cat-technology); background: rgba(34, 211, 238, 0.12); }

.card__body { min-width: 0; }

.card__title {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home .card:active .card__title,
.related .card:active .card__title { color: var(--accent); }

.card__meta {
  margin: 5px 0 0;
  font-size: 11px;
  color: var(--ink-faint);
}

/* "More from Future Technology" on article pages: identical cards,
   slightly tighter top margin and a hairline above to sit after body copy. */
.related {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
}

/* --------------------------------------------------------------------------
   Footer tightening (existing footer markup, spacing only)
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: 40px;
  padding: 24px 16px 32px;
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-faint);
  text-align: center;
}

.site-footer p { margin: 0 0 6px; }

.site-footer a { color: var(--ink-mute); }

/* --------------------------------------------------------------------------
   Larger screens - modest adjustments, still a single column.
   -------------------------------------------------------------------------- */


/* Desktop: 2-column card grid */
@media (min-width: 768px) {
  .latest__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 32px;
  }
  .stories__title { font-size: 17px; }
}
@media (min-width: 900px) {
  .hero__img { height: 400px; }
  .hero__title { font-size: 28px; }
  .card__thumb { flex: 0 0 160px; width: 160px; height: 90px; }
  .card__title { font-size: 16px; }
}
@media (min-width: 480px) {
  .hero__img { height: 260px; }
  .hero__title { font-size: 21px; }
  .signup__form { flex-direction: row; }
  .signup__input { flex: 1; }
  .signup__btn { flex: 0 0 auto; padding: 12px 22px; }
}

@media (min-width: 680px) {
  .home { padding-top: 24px; }
  .hero__img { height: 320px; }
  .hero__text { padding: 0 20px 18px; }
  .hero__title { font-size: 24px; }
}

/* Reduce motion / no fancy effects to disable - kept intentionally calm. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* --------------------------------------------------------------------------
   Desktop - use the width of the page.
   The layout above is mobile-first: a single centred column, capped at 1100px.
   That still leaves wide empty gutters on a desktop monitor, so from 1100px up
   the homepage becomes a two-column front page, the lists become card grids,
   and .wrap in v2g.css takes over as the width authority.
   Everything below 1100px is untouched.
   -------------------------------------------------------------------------- */

@media (min-width: 1100px) {
  /* Article pages reuse .home for their "More from Future Technology" block.
     Line that up with the 1060px article column instead of the full width. */
  .home {
    max-width: 1060px;
    padding: 24px 0 64px;
  }

  /* Homepage: let .wrap be the single width authority so the header, the
     content and the footer all share one left and right edge. */
  main.home,
  main.home > .home {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  main.home > .home {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
    column-gap: 56px;
    align-items: start;
    padding-top: 0;
  }

  /* hero row removed */
  main.home > .home > .stories  { grid-column: 1; grid-row: 1; }
  main.home > .home > .trending { grid-column: 2; grid-row: 1 / 3; }
  main.home > .home > .signup   { grid-column: 1; grid-row: 2; }
  main.home > .home > .latest   { grid-column: 1 / -1; grid-row: 3; }

  /* Hero fills the wider column it now sits in. */
  .hero__img   { height: 480px; }
  .hero__text  { padding: 0 28px 24px; }
  .hero__title { font-size: 32px; }
  .hero__meta  { font-size: 13px; }

  .stories { margin-top: 0; }
  .stories__title { font-size: 17px; }

  /* Trending reads as a sidebar rail rather than another stacked section.
     !important is needed to beat the unconditional height-reduction rule in
     v2g.css, which forces a 6px bottom padding on .trending. */
  main.home > .home > .trending {
    margin-top: 0;
    margin-bottom: 0 !important;
    padding: 20px 22px !important;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
  }
  .trending__item  { padding: 11px 0; }
  .trending__title { font-size: 15.5px; }

  /* The signup band spans the page, so keep its contents centred and
     readable rather than stretching a single input across the whole width. */
  main.home > .home > .signup { padding: 30px 24px; text-align: center; }
  main.home > .home > .signup .signup__sub {
    max-width: 46em;
    margin-left: auto;
    margin-right: auto;
  }
  main.home > .home > .signup .signup__form {
    max-width: 520px;
    margin: 0 auto;
  }

  /* Latest / related: one long list becomes a grid of cards. */
  .latest__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 44px;
  }
  .latest__list .card:first-child { padding-top: 14px; }
  .latest__list .card:last-child  { border-bottom: 1px solid var(--hairline); }

  /* The 900px tier above already sets 160x90; keep this tier larger, never
     smaller, so thumbnails do not shrink as the viewport grows. */
  .card__thumb { flex: 0 0 168px; width: 168px; height: 94px; }
  .card__title { font-size: 16px; }
}

@media (min-width: 1600px) {
  .hero__img   { height: 540px; }
  .hero__title { font-size: 36px; }
  .latest__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Grid / List toggle --- */
.latest__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.latest__header .section-label { margin-bottom: 0; }
.latest__toggle {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 3px;
}
.toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 7px;
  border-radius: 6px;
  line-height: 0;
  transition: background 0.15s, opacity 0.15s;
  opacity: 0.45;
}
.toggle-btn svg { fill: currentColor; color: var(--ink, #e2e8f0); }
.toggle-btn[aria-pressed="true"] {
  background: rgba(34,211,238,0.15);
  opacity: 1;
}
.toggle-btn[aria-pressed="true"] svg { color: #22d3ee; }
.toggle-btn:hover { opacity: 0.8; }

/* Grid mode: 2-col card grid with vertical cards */
.latest--grid .latest__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.latest--grid .card {
  flex-direction: column;
}
.latest--grid .card__thumb {
  width: 100%;
  height: 140px;
  min-width: unset;
  border-radius: 10px 10px 0 0;
}
.latest--grid .card__body {
  padding: 12px 14px 14px;
}
.latest--grid .card__title {
  font-size: 15px;
}

/* Ensure no truncation in either view */
.latest .card__title {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
}

@media (max-width: 767px) {
  .latest--grid .latest__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .latest--grid .card__thumb {
    height: 100px;
  }
  .latest--grid .card__title {
    font-size: 13px;
  }
}

@media (min-width: 1600px) {
  .latest--grid .latest__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   Homepage layout fixes - auto-generated 20260905_220821
   ============================================================ */

/* ---- Reset v2g.css card chrome for homepage list cards ---- */
.home .card,
.related .card {
  background: none !important;
  border: none !important;
  border-bottom: 1px solid var(--hairline) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: static !important;
  overflow: visible !important;
}
.home .card::before,
.home .card::after,
.related .card::before,
.related .card::after {
  display: none !important;
}
.home .card:hover,
.related .card:hover {
  transform: none !important;
  box-shadow: none !important;
  background: none !important;
  border: none !important;
  border-bottom: 1px solid var(--hairline) !important;
}

/* ---- Grid mode: restore card appearance ---- */
.latest--grid .card {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-md, 8px) !important;
  overflow: hidden !important;
  position: relative !important;
  border-bottom: 1px solid var(--hairline) !important;
}
.latest--grid .card:hover {
  border-color: rgba(34,211,238,.2) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.25) !important;
  background: rgba(255,255,255,.05) !important;
}

/* ---- Trending label: left-accent instead of emoji ---- */
.section-label--trending::before { content: none !important; }
.section-label--trending {
  padding-left: 10px;
  border-left: 3px solid var(--accent);
}

/* ---- Tighten spacing ---- */
.home .trending { margin-top: 24px; }
.home .latest  { margin-top: 24px; }
.home .signup  { margin-top: 24px; padding: 18px 16px; }
.home .stories { margin-top: 10px; }
.section-label { margin-bottom: 8px; }
.home .hero { margin-bottom: 0; margin-top: 0; }
.stories__item { padding: 10px 0; }
.trending__item { padding: 8px 0; }

/* ---- Stories section: with thumbnails ---- */
.stories__item a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.stories__thumb {
  flex: 0 0 80px;
  width: 80px;
  height: 45px;
  border-radius: 6px;
  object-fit: cover;
  background: #0c1226;
}
.stories__thumb--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
}
.stories__thumb--ai { color: #a78bfa; background: rgba(167,139,250,.12); }
.stories__thumb--security,
.stories__thumb--cybersecurity { color: #f87171; background: rgba(248,113,113,.12); }
.stories__thumb--computing,
.stories__thumb--hardware { color: #34d399; background: rgba(52,211,153,.12); }
.stories__thumb--science,
.stories__thumb--space { color: #fbbf24; background: rgba(251,191,36,.12); }
.stories__thumb--technology,
.stories__thumb--news { color: #22d3ee; background: rgba(34,211,238,.12); }
.stories__thumb--gadgets { color: #f472b6; background: rgba(244,114,182,.12); }
.stories__thumb--reviews { color: #fb923c; background: rgba(251,146,60,.12); }
.stories__thumb--evs,
.stories__thumb--self-driving { color: #2dd4bf; background: rgba(45,212,191,.12); }
.stories__thumb--tools,
.stories__thumb--software { color: #818cf8; background: rgba(129,140,248,.12); }
.stories__content {
  flex: 1;
  min-width: 0;
}

/* ---- Consistent image containers ---- */
.home .card__thumb,
.related .card__thumb {
  flex: 0 0 120px;
  width: 120px;
  height: 68px;
  border-radius: 8px;
  object-fit: cover;
  background: #0c1226;
  aspect-ratio: 16 / 9;
}
.card__thumb--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
}

/* ---- Newsletter CTA: tighter ---- */
.signup {
  text-align: left;
}
.signup__title {
  font-size: 16px;
}
.signup__sub {
  font-size: 13px;
  margin: 4px 0 12px;
}
.signup__readers {
  display: block;
  font-size: 11px;
  color: var(--ink-faint, rgba(255,255,255,.35));
  margin-top: 8px;
  letter-spacing: .02em;
}

/* ---- Small phone ---- */
@media (max-width: 400px) {
  .home .card__thumb,
  .related .card__thumb {
    flex: 0 0 88px;
    width: 88px;
    height: 50px;
  }
  .stories__thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 36px;
  }
}

/* ---- Tablet ---- */
@media (min-width: 768px) and (max-width: 1099px) {
  .home .card__thumb,
  .related .card__thumb {
    flex: 0 0 140px;
    width: 140px;
    height: 79px;
  }
}

/* ---- Desktop layout tightening ---- */
@media (min-width: 1100px) {
  .home .card__thumb,
  .related .card__thumb {
    flex: 0 0 152px;
    width: 152px;
    height: 86px;
  }
  .home .trending { margin-top: 0; }
  .home .stories { margin-top: 12px; }
  .stories__thumb {
    flex: 0 0 96px;
    width: 96px;
    height: 54px;
  }
}

/* ---- Mobile tighten further ---- */
@media (max-width: 680px) {
  .home { padding-bottom: 32px; }
  .home .hero { margin-bottom: 0; }
  .home .signup { padding: 16px 14px; margin-top: 18px; }
  .home .latest { margin-top: 18px; }
  .home .trending { margin-top: 16px; }
  .trending__item { padding: 7px 0; }
  .stories__item { padding: 8px 0; }
}

/* Desktop: pack stories and signup at the top of column 1; the trending
   sidebar spans rows 1-2, so give row 2 the leftover height. */
@media (min-width: 1100px) {
  main.home > .home { grid-template-rows: min-content minmax(0, 1fr) auto; }
  main.home > .home > .signup { align-self: start; }
}

/* Trending items: the anchor is the flex row, so the number sits beside
   the title instead of stacking above it. */
.trending__item > a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
  flex: 1;
}