/* public/assets/css/pages/home.css — Home hub.
 * Scoped under .page-home except where it styles portal/rail content.
 * Tokens only; the app-shell owns outer padding + column layout. */

.page-home {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ===== Card grid =====
 * Two columns on wide screens; reflows to one under ~900px. Because cards are
 * gated, the grid simply has fewer cells per role — no empty holes. */
.home-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 900px) {
  .home-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Guest / no-permission empty state ===== */
.home-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
}
.home-empty__icon {
  width: 40px;
  height: 40px;
  color: var(--color-text-subtle);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-empty__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
}
.home-empty__body {
  margin: 0;
  max-width: 42ch;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* ===== Right-rail: panels (Talk to us / promo) ===== */
.home-rail-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
}
.home-rail-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.home-rail-panel__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  flex: none;
}
.home-rail-panel__chip-icon {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.home-rail-panel__title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-text);
}
.home-rail-panel__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.home-talk__body {
  margin: calc(var(--space-3) * -1) 0 var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.home-talk-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.home-talk-btn:hover {
  background: var(--color-accent-softer);
  border-color: var(--color-accent);
}
.home-talk-btn:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.home-talk-btn__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}
.home-talk-btn__icon {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.home-talk-btn__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.home-talk-btn__label {
  font-size: var(--text-sm);
  font-weight: 600;
}
.home-talk-btn__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.home-talk-btn__chev {
  width: 16px; height: 16px; flex: none;
  color: var(--color-text-subtle);
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ===== Modal body (How it works / Request a dataset) ===== */
.home-modal__intro {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}
.home-modal__steps {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.home-modal__step {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text);
}
.home-modal__step strong { color: var(--color-text); }

/* ===== DEMO: News & updates (mock) ===== */
.home-news { display: flex; flex-direction: column; gap: var(--space-3); }
.home-news__row { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--text-sm); }
.home-news__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); flex: none; transform: translateY(-2px); }
.home-news__text { flex: 1 1 auto; color: var(--color-text); line-height: 1.4; }
.home-news__ago { color: var(--color-text-subtle); font-size: var(--text-xs); white-space: nowrap; }

/* ===== DEMO: Upcoming meetings (mock) ===== */
.home-rail-panel__body { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted); }
.home-meetings { display: flex; flex-direction: column; gap: var(--space-3); }
.home-meeting { display: flex; align-items: center; gap: var(--space-3); }
.home-meeting__avatar {
  width: 36px; height: 36px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-ink); color: #fff;
  font-size: var(--text-xs); font-weight: 700;
}
.home-meeting__info { flex: 1 1 auto; min-width: 0; }
.home-meeting__name { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.home-meeting__when { font-size: var(--text-xs); color: var(--color-text-muted); }
.home-meeting__status {
  font-size: var(--text-xs); font-weight: 600;
  color: var(--color-success-text); background: var(--color-success-soft);
  border-radius: var(--radius-full); padding: 2px var(--space-2);
  white-space: nowrap;
}
.home-meeting__status--req { color: var(--color-accent-text); background: var(--color-accent-soft); }

/* ===== Welcome hero card (general background, right glow) ===== */
.home-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-7);
  background-color: var(--color-surface);
  background-image: url('/assets/img/background-general-right.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
}
/* Match the Catalog page header treatment exactly (title / name / subtitle),
   neutralise PageHeader's standalone divider inside the card, and push the
   actions to the card's right edge. */
.home-hero .page-header {
  display: block;
  width: 100%;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.home-hero .page-header .page-header__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
}
.home-hero .page-header .page-header__title-wrap {
  flex: 1 1 0%;
  min-width: 0;
}
.home-hero .page-header .page-header__actions {
  flex: 0 0 auto;
  flex-shrink: 0;
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-1);
  margin-left: auto;
}
.home-hero .page-header__title {
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.home-hero .page-header__name {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--color-accent-text);
}
.home-hero .page-header__subtitle {
  margin: var(--space-3) 0 0;
  max-width: 760px;
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-text-muted);
}
.home-hero .page-header__subtitle strong {
  color: var(--color-text);
  font-weight: 600;
}

/* ===== Events rail: horizontal scroller of live event cards =====
 * Replaces the single static .hub-card--event (and its hardcoded London
 * background — the last reference to that asset). Spans the full card grid;
 * native scroll + snap, arrow buttons appear only on overflow (home.js). */
.home-events-rail { min-width: 0; padding: var(--space-2) 0 var(--space-3); }
.home-events-rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding: 0 var(--space-1);
}
.home-events-rail__title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0;
}
.home-events-rail__viewport { position: relative; min-width: 0; }
.home-events-rail__scroller {
  display: flex;
  gap: 16px; /* home.js scroll step assumes card width + 16px gap */
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-2);
  /* Carousel: the floating arrows are the affordance — hide the scrollbar
   * (track still scrolls by wheel/trackpad/touch). */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* legacy Edge/IE */
}
.home-events-rail__scroller::-webkit-scrollbar { display: none; } /* WebKit */

/* Floating carousel arrows — circular, centered on the cards, over the edges. */
.home-events-rail__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 14px rgba(15, 23, 41, 0.14);
  color: var(--color-text);
}
.home-events-rail__arrow:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-surface);
}
.home-events-rail__arrow--left { left: -12px; }
.home-events-rail__arrow--right { right: -12px; }
.home-events-rail__arrow[hidden] { display: none; }
.home-event-card {
  flex: 0 0 320px;
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden; /* lets the image bleed to the card edges */
  transition: border-color var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-fast) var(--motion-ease);
}
/* Same hover treatment as provider cards: accent border + ring. */
.home-event-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-ring);
}
.home-event-card__img {
  height: 140px;
  flex: none;
  background: #10173a; /* same dark tile as .ev-hero__cover fallback */
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px 14px;
  gap: 2px;
}
.home-event-card__img--photo {
  background-size: cover;
  background-position: center;
  /* brand/city overlay stays on photos; the legibility gradient rides in the
     same inline background-image as the url (home.js) */
}
.home-event-card__brand { font-size: 11px; letter-spacing: 0.14em; opacity: 0.85; font-weight: 600; }
.home-event-card__name { font-size: 15px; font-weight: 700; letter-spacing: 0.03em; }
.home-event-card__body {
  padding: var(--space-4) var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1; /* pushes the footer to the bottom on short bodies */
}
.home-event-card__title {
  font-size: var(--text-md);
  font-weight: 700;
  margin: 0;
  line-height: 1.25;
}
.home-event-card__foot { padding: 0 var(--space-4) var(--space-4); }
.home-event-card__foot .btn { width: auto; min-width: 160px; }

/* ===== Section divider title between the rail and the feature cards ===== */
.home-section-title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin: var(--space-2) 0 calc(-1 * var(--space-2));
  padding: 0 var(--space-1);
}

/* Past event: archived look — very light gray surface, desaturated image, and
 * a DISABLED "Event ended" button (home.js supplies disabled + no onClick).
 * No hover affordance: the card has no action, so promising one would lie. */
.home-event-card--past {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
}
.home-event-card--past:hover {
  border-color: var(--color-border);
  box-shadow: none;
}
.home-event-card--past .home-event-card__img {
  opacity: 0.6;
  filter: grayscale(0.55);
}
.home-event-card--past .home-event-card__title { color: var(--color-text-subtle, #667085); }
.home-event-card--past .home-event-card__foot .btn {
  min-width: 140px;
  cursor: default;
}
.home-event-card--skeleton {
  padding-bottom: var(--space-3);
  gap: var(--space-3);
}
.home-event-card--skeleton .skeleton-group { padding: 0 var(--space-4); }
@media (max-width: 600px) {
  .home-event-card { flex-basis: 280px; }
}


/* ===== Catalog card: cubes art top-right, white-faded left for text ===== */
.hub-card--catalog {
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface);
  background-image:
    linear-gradient(100deg,
      var(--color-surface) 34%,
      rgba(255, 255, 255, 0.55) 52%,
      rgba(255, 255, 255, 0) 72%),
    url('/assets/img/home-catalog-bg.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, right top;
  background-size: cover, cover;
}
.hub-card--catalog > * { position: relative; z-index: 1; }

/* ===== Data Map card: green world-map art right (wireframe asset) ===== */
.hub-card--datamap {
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface);
  background-image:
    linear-gradient(100deg,
      var(--color-surface) 34%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 0) 70%),
    url('/assets/img/home-datamap-bg.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, right center;
  background-size: cover, cover;
}
.hub-card--datamap > * { position: relative; z-index: 1; }

/* ===== Right rail: promo square (world-map art + headline + CTA) ===== */
.home-rail-promo {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  margin-top: var(--space-4);
}
.home-rail-promo__art {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  background-color: var(--color-accent-softer);
  background-image: url('/assets/img/world-map.svg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-rail-promo__headline {
  font-family: var(--font-serif);
  font-size: 64px;
  font-weight: 600;
  color: #8CC5F2;
  letter-spacing: 0.02em;
  user-select: none;
}
.home-rail-promo__cta { display: flex; }
.home-rail-promo__cta .btn { flex: 1 1 auto; justify-content: center; }

/* ===== Feature cards — wireframe polish =====
 * Scoped to the two art cards. Goals per the wireframe: big serif titles,
 * text confined to the left so the artwork breathes, white stat pills with
 * per-card accent icons, and COMPACT primary CTAs (blue / green) instead of
 * the shell's full-width button. */
.hub-card--catalog,
.hub-card--datamap {
  min-height: 340px; /* let the background art show */
}

/* Text column: keep copy off the artwork. */
.hub-card--catalog .hub-card__title,
.hub-card--datamap .hub-card__title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-text);
  max-width: 60%;
}
.hub-card--catalog .hub-card__body,
.hub-card--datamap .hub-card__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: min(46%, 340px);
}

/* Data Map speaks green: icon chip + stat icons. */
.hub-card--datamap .hub-card__icon-chip {
  background: var(--color-success-soft, #E7F5E8);
  color: var(--color-success-text, #1A8B53);
}
.hub-card--datamap .hub-stat__icon-lead { color: var(--color-success-text, #1A8B53); }
.hub-card--catalog .hub-stat__icon-lead { color: var(--color-accent, #425FE9); }

/* Stats: white pills sitting on the art, no divider rule above them; pushed
 * toward the bottom so the artwork owns the middle of the card. */
.hub-card--catalog .hub-card__media,
.hub-card--datamap .hub-card__media {
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 0;
}
.hub-card--catalog .hub-stats--row,
.hub-card--datamap .hub-stats--row {
  gap: var(--space-3);
}
.hub-card--catalog .hub-stats--row .hub-stat,
.hub-card--datamap .hub-stats--row .hub-stat {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 16px 10px 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 41, 0.05);
}
.hub-card--catalog .hub-stats--row .hub-stat:first-child,
.hub-card--datamap .hub-stats--row .hub-stat:first-child {
  padding-left: 14px; /* the row variant strips first-child padding — restore for pills */
}
.hub-card--catalog .hub-stat__value,
.hub-card--datamap .hub-stat__value {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}
.hub-card--catalog .hub-stat__label,
.hub-card--datamap .hub-stat__label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
}

/* Compact CTAs (the shell stretches its footer button full-width). */
.hub-card--catalog .hub-card__footer .btn,
.hub-card--datamap .hub-card__footer .btn {
  width: auto;
  min-width: 180px;
  padding: 12px 22px;
  font-weight: 600;
  border-radius: var(--radius-md);
}
.hub-cta--green {
  background: var(--color-success, #16A34A);
  border-color: var(--color-success, #16A34A);
}
.hub-cta--green:hover {
  background: #128A3E;
  border-color: #128A3E;
}