/* -----------------------------------------------------------------------------
EFR topic hubs — /embedded-lending/ and the payments and banking hubs to follow

Deliberately plain CSS, not Tailwind. It is loaded straight from assets/ by
page-embedded-lending.hbs, so it needs no Vite build and no Node toolchain:
edit this file, re-zip the theme, upload. Nothing here is processed by
`npm run build`, which only writes to assets/built/.

Everything is scoped under .hub, so none of it reaches article layouts.
Ink, border and accent read the theme's own tokens (set in Ghost admin via
partials/config.hbs), so the hub follows the site rather than drifting from it.
Only the peach family below is new.
----------------------------------------------------------------------------- */

/* Sampled from the EFR logo card. These sit on :root rather than .hub because
   the site header needs them too, and it is outside the .hub wrapper. Safe:
   this file is only ever loaded on hub pages. */
:root {
  --hub-tint: #ffeee6;
  --hub-tint-light: #fff7f3;
  --hub-panel: #fff4ee;
  --hub-rule: #eedfd6;
}

.hub {
  /* From the theme, with the mockup's values as fallbacks */
  --hub-paper: var(--color-bgr, #ffffff);
  --hub-ink: var(--color-typ, #101a2e);
  --hub-ink-soft: var(--color-typ-tone, #4e5871);
  --hub-ink-faint: color-mix(in srgb, var(--color-typ, #101a2e) 55%, var(--color-bgr, #ffffff) 45%);
  --hub-rule-firm: var(--color-brd, #101a2e);
  --hub-accent: var(--ghost-accent-color, #0c67df);

  --hub-wrap: 1200px;
  --hub-gap: clamp(2.5rem, 5vw, 4rem);
}

.hub-wrap {
  width: min(100% - 2.5rem, var(--hub-wrap));
  margin-inline: auto;
}

.hub-section {
  padding-block: var(--hub-gap);
}

.hub-section + .hub-section {
  border-top: 1px solid var(--hub-rule);
}

/* The hero runs straight into the first section: the "who it is for" line and
   the definition belong together, so the usual full gap read as a hole. The
   divider does the separating instead. */
.hub-hero + .hub-section {
  border-top: 1px solid var(--hub-rule);
  padding-top: 2.25rem;
}

/* Margins are already zeroed by Tailwind's preflight in assets/built/app.css.
   Do not reset them again here: `.hub p` would outrank the single-class spacing
   below and silently flatten the page. */
.hub h1,
.hub h2,
.hub h3 {
  line-height: 1.15;
}

/* Likewise, preflight already gives links `color: inherit`. Repeating it as
   `.hub a` would outrank .hub-go, .hub-seeall and .hub-btn and grey out every
   accent-coloured link on the page. */

/* Utility label: eyebrows, format tags, feed headings, dates.
   The mockup used IBM Plex Mono. The site runs one typeface, so these are set
   in the site face and carry their weight through case and letter-spacing. */
.hub-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--hub-ink-faint);
}

.hub-head {
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.hub-sub {
  color: var(--hub-ink-soft);
  max-width: 84ch;
  margin-bottom: 2rem;
  /* Two-line subs split evenly instead of leaving a three-word orphan, and the
     break stops landing inside "co-founder". */
  text-wrap: balance;
}

/* ---------- 1 · Hero ---------- */

/* The site header is bg-bgr (white) and sits directly above the hero wash,
   which meets it as a hard seam. Carrying the top of the gradient up into the
   header removes the line. hub.css only loads on hub pages, so the site header
   is untouched everywhere else and partials/header.hbs stays as it is. */
[data-header] {
  background-color: var(--hub-tint-light);
}

.hub-hero {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) 2.25rem;
  background: linear-gradient(180deg, var(--hub-tint-light) 0%, var(--hub-paper) 100%);
}

.hub-hero h1 {
  font-size: clamp(2rem, 6vw, 4rem);
  letter-spacing: -0.015em;
  max-width: 26ch;
  text-wrap: balance;
}

.hub-lede {
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
  line-height: 1.55;
  color: var(--hub-ink-soft);
  max-width: 72ch;
  margin-top: 1.5rem;
  text-wrap: pretty;
}

/* The line naming who the page is for. It read as a trailing afterthought at
   body weight, so it now carries an accent rule and sits in full ink. */
.hub-who {
  margin-top: 2rem;
  padding-left: 1rem;
  border-left: 3px solid var(--hub-accent);
  max-width: 84ch;
  color: var(--hub-ink);
  font-weight: 500;
}

/* ---------- 2 · Definition ---------- */

/* Two cards rather than one hard-ruled box. The old version was a 1.5px black
   grid, which read as heavy next to everything else on the page. Sharp corners
   stay, because the theme sets --radius-theme to 0 site-wide. */
.hub-frame {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.hub-frame > div {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--hub-paper);
  border: 1px solid var(--hub-rule);
  border-top: 3px solid var(--hub-accent);
}

.hub-frame h3 {
  font-size: 1.375rem;
  margin-bottom: 0.75rem;
}

.hub-frame p {
  color: var(--hub-ink-soft);
}

/* ---------- 3 · Examples ---------- */

.hub-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.hub-card {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--hub-rule-firm);
  padding-top: 1.25rem;
}

/* Logos sit in a fixed-height slot so the label and text below line up across
   all three cards, whatever each logo's own height is. Bottom-aligned so the
   marks share a baseline rather than floating at different heights. */
.hub-logo-slot {
  display: flex;
  align-items: flex-end;
  height: 49px;
  margin-bottom: 1rem;
}

/* Matched by area, not height: at a shared height a wide wordmark reads far
   larger than a compact one. Each class below covers roughly 7000 square
   pixels. See the note at the top of partials/hub/examples.hbs. */
.hub-logo {
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left bottom;
}

.hub-logo-compact { height: 49px; }
.hub-logo-medium  { height: 42px; }
.hub-logo-wide    { height: 30px; }

.hub-card p {
  margin-bottom: 1.25rem;
  color: var(--hub-ink-soft);
  font-size: 0.9375rem;
}

.hub-go {
  align-self: flex-start;
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--hub-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.hub-go:hover {
  opacity: 0.7;
}

/* Currently unused: it held allO's "Podcast to follow" before Nivoda replaced
   that card. Kept for the next card that has no link yet. */
.hub-pending {
  margin-top: auto;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--hub-ink-faint);
}

/* ---------- 4 · Where to start ---------- */

.hub-rows {
  border-bottom: 1px solid var(--hub-rule);
}

.hub-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 2rem;
  align-items: start;
  padding: 1.5rem 0;
  border-top: 1px solid var(--hub-rule);
  text-decoration: none;
}

.hub-row .hub-label {
  grid-column: 2;
  grid-row: 1 / span 2;
  padding-top: 0.3rem;
  white-space: nowrap;
}

.hub-row h3 {
  font-size: 1.25rem;
}

.hub-row p {
  margin-top: 0.375rem;
  color: var(--hub-ink-soft);
  font-size: 0.9375rem;
  max-width: 60ch;
}

a.hub-row:hover h3 {
  color: var(--hub-accent);
}

.hub-deeper {
  background: var(--hub-panel);
  padding: clamp(1.75rem, 4vw, 3rem);
}

.hub-deeper .hub-label {
  margin-bottom: 1.5rem;
}

.hub-part {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1.5rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--hub-rule);
  text-decoration: none;
}

.hub-num {
  color: var(--hub-accent);
  padding-top: 0.3rem;
}

.hub-part h3 {
  font-size: 1.125rem;
}

.hub-part p {
  margin-top: 0.25rem;
  color: var(--hub-ink-soft);
  font-size: 0.9375rem;
  max-width: 56ch;
}

a.hub-part:hover h3 {
  color: var(--hub-accent);
}

/* ---------- 5 · Dynamic lists ---------- */

.hub-feed + .hub-feed {
  margin-top: 2.5rem;
}

.hub-feed h3 {
  display: block; /* .hub-label is inline-block, which would cut the rule short */
  padding-bottom: 0.875rem;
  border-bottom: 1.5px solid var(--hub-rule-firm);
}

.hub-item {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: baseline;
  padding: 0.9375rem 0;
  border-bottom: 1px solid var(--hub-rule);
  text-decoration: none;
}

.hub-item-title {
  font-weight: 500;
}

.hub-item:hover .hub-item-title {
  color: var(--hub-accent);
}

.hub-item time {
  white-space: nowrap;
}

.hub-seeall {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--hub-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.hub-seeall:hover {
  opacity: 0.7;
}

/* ---------- 6 · Office hours and newsletter ---------- */

.hub-oh {
  background: var(--hub-accent);
  color: #fff;
  padding: clamp(2rem, 5vw, 4rem);
}

.hub-oh h2 {
  font-size: clamp(1.625rem, 3.5vw, 2.25rem);
  max-width: 20ch;
}

.hub-oh p {
  margin: 1.25rem 0 2rem;
  max-width: 50ch;
  color: color-mix(in srgb, #fff 82%, var(--hub-accent) 18%);
}

.hub-btn {
  display: inline-block;
  background: #fff;
  color: var(--hub-accent);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.9375rem 1.75rem;
  text-decoration: none;
}

.hub-btn:hover {
  background: var(--hub-tint);
}

.hub-news {
  margin-top: 1.5rem;
  border: 1px solid var(--hub-rule);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  align-items: center;
  justify-content: space-between;
}

.hub-news p {
  max-width: 40ch;
  font-size: 0.9375rem;
  color: var(--hub-ink-soft);
}

.hub-news form {
  flex: 1;
  min-width: 17rem;
  max-width: 28rem;
}

/* ---------- Responsive ---------- */

@media (width < 44rem) {
  .hub-frame {
    grid-template-columns: 1fr;
  }

  .hub-cards {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .hub-row {
    grid-template-columns: 1fr;
  }

  .hub-row .hub-label {
    grid-column: 1;
    grid-row: auto;
    order: -1;
    padding: 0 0 0.375rem;
  }

  .hub-news {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (width < 30rem) {
  .hub-item {
    flex-direction: column;
    gap: 0.25rem;
  }
}