/* guides/styles/hub.css
   Editorial index for the Phase D guides. Distinct typographic system
   from the rest of the tool surface so the hub reads as a "magazine
   cover" while individual guides keep the article template's voice.

   Loaded only on /guides/. Articles themselves stay in the
   system-font treatment defined by .article-page in tool.css. */

@import url('../../resources/styles/custom-colors.css');

:root {
  --hub-bg: #fbf9f4;
  --hub-surface: var(--white);
  --hub-text: var(--black);
  --hub-text-soft: var(--black);
  --hub-muted: var(--black);
  --hub-rule: #cdc7b9;
  --hub-rule-soft: #dad5c7;
  --hub-num: #6b7280;
  --hub-accent: var(--primary-blue);
  --hub-accent-soft: rgba(59, 130, 246, 0.08);
  --hub-accent-border: rgba(59, 130, 246, 0.32);
  --hub-serif: 'Fraunces', 'Iowan Old Style', 'Cambria', 'Georgia', serif;
  --hub-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* The text tokens above resolve through --black, which theme-dark.css already
   inverts, so only the ones holding a literal need restating here. --hub-surface
   is included because it reads through --white, which stays white by design.
   Values come from that file's ramp rather than new colours, so the hub and the
   articles are the same dark grey. */
:root[data-theme="dark"] {
  --hub-bg: var(--light-page-bg);
  --hub-surface: var(--gray-50);
  --hub-rule: var(--gray-300);
  --hub-rule-soft: var(--gray-200);
  /* The oversized entry numerals and the arrows are decoration, not reading
     text, so they keep the muted tone the text tokens gave up. At the body
     colour they would outshout the headlines they sit beside. */
  --hub-num: #94a3b8;
  --hub-accent-soft: rgba(125, 151, 255, 0.14);
  --hub-accent-border: rgba(125, 151, 255, 0.42);
}

body:has(.guides-hub) {
  background: var(--hub-bg);
}

.guides-hub {
  max-width: 920px;
  margin: 0 auto;
  padding: 64px 32px 96px;
  color: var(--hub-text);
  font-family: var(--hub-sans);
  font-feature-settings: 'ss01', 'ss02';
  -webkit-font-smoothing: antialiased;
}

/* --- Hero ----------------------------------------------------------- */

.guides-hub-head {
  margin: 16px 0 40px;
  max-width: 760px;
}

.guides-hub-eyebrow {
  font-family: var(--hub-sans);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hub-muted);
  margin: 0 0 28px;
}

.guides-hub-eyebrow span {
  display: inline-block;
  margin: 0 8px;
  color: var(--hub-num);
}

.guides-hub-title {
  font-family: var(--hub-serif);
  font-weight: 400;
  font-size: clamp(var(--text-5xl), 6.4vw, var(--text-9xl));
  line-height: 0.96;
  letter-spacing: -0.022em;
  color: var(--hub-text);
  margin: 0 0 32px;
}

.guides-hub-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--hub-accent);
}

.guides-hub-lede {
  font-family: var(--hub-serif);
  font-weight: 300;
  font-size: clamp(var(--text-md), 1.6vw, var(--text-lg));
  line-height: 1.55;
  color: var(--hub-text-soft);
  margin: 0;
  max-width: 640px;
}

/* --- Category filter ------------------------------------------------ */

.guides-hub-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 640px;
  margin: 0 auto 40px;
}

.guides-hub-pill {
  font-family: var(--hub-sans);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hub-text-soft);
  background: var(--hub-surface);
  border: 1px solid var(--hub-rule);
  border-radius: var(--radius-pill);
  padding: 8px 16px 7px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.guides-hub-pill:hover {
  border-color: var(--hub-accent);
  color: var(--hub-accent);
}

.guides-hub-pill.is-active {
  color: var(--white);
  background: var(--hub-accent);
  border-color: var(--hub-accent);
}

/* The accent lifts to a pale blue in dark mode, so white label text on it drops
   to 2.7:1. The page ground reads 6.9:1 against the same fill. */
[data-theme="dark"] .guides-hub-pill.is-active {
  color: var(--light-page-bg);
}

.guides-hub-pill:focus-visible {
  outline: 2px solid var(--hub-accent);
  outline-offset: 2px;
}

/* --- The list ------------------------------------------------------- */

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

.guides-hub-group {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 56px 0 4px;
  padding-top: 28px;
}

.guides-hub-group:first-child {
  margin-top: 0;
  padding-top: 0;
}

/* Left rule, mirroring .guides-hub-group-rule on the right, so the label
   centers horizontally between the two lines. */
.guides-hub-group::before {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hub-rule);
}

.guides-hub-group-label {
  margin: 0;
  font-family: var(--hub-serif);
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hub-text);
}

.guides-hub-group-rule {
  flex: 1;
  height: 1px;
  background: var(--hub-rule);
}

.guides-hub-entry {
  border-top: 1px solid var(--hub-rule-soft);
}

.guides-hub-entry:first-of-type,
.guides-hub-group + .guides-hub-entry {
  border-top-color: transparent;
}

.guides-hub-link {
  display: grid;
  grid-template-columns: 118px 1fr auto;
  column-gap: 36px;
  align-items: start;
  padding: 30px 0 32px;
  text-decoration: none;
  color: inherit;
  position: relative;
  opacity: 0;
  transform: translateY(10px);
  animation: guides-fade-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: var(--entry-delay, 0ms);
}

@keyframes guides-fade-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.guides-hub-num {
  font-family: var(--hub-serif);
  font-feature-settings: 'tnum', 'lnum';
  font-weight: 400;
  font-size: var(--text-10xl);
  line-height: 0.82;
  color: var(--hub-num);
  letter-spacing: -0.05em;
  transition: color 0.4s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  align-self: start;
}

.guides-hub-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 10px;
  min-width: 0;
}

.guides-hub-headline {
  font-family: var(--hub-serif);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--hub-text);
  transition: color 0.35s ease;
}

.guides-hub-desc {
  font-family: var(--hub-sans);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--hub-text-soft);
  max-width: 540px;
}

.guides-hub-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.guides-hub-chip {
  font-family: var(--hub-sans);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hub-muted);
  border: 1px solid var(--hub-rule);
  padding: 5px 11px 4px;
  border-radius: var(--radius-pill);
  background: transparent;
}

.guides-hub-chip--howto {
  color: var(--hub-accent);
  border-color: var(--hub-accent-border);
  background: var(--hub-accent-soft);
}

.guides-hub-arrow {
  font-family: var(--hub-serif);
  font-size: var(--text-xl);
  color: var(--hub-num);
  padding-top: 18px;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.35s ease;
}

/* Hover state. Numeral colors, headline takes accent, arrow slides. */
.guides-hub-link:hover .guides-hub-num,
.guides-hub-link:focus-visible .guides-hub-num {
  color: var(--hub-accent);
  transform: translateX(-2px);
}

.guides-hub-link:hover .guides-hub-headline,
.guides-hub-link:focus-visible .guides-hub-headline {
  color: var(--hub-accent);
}

.guides-hub-link:hover .guides-hub-arrow,
.guides-hub-link:focus-visible .guides-hub-arrow {
  color: var(--hub-accent);
  transform: translateX(8px);
}

.guides-hub-link:focus-visible {
  outline: 2px solid var(--hub-accent);
  outline-offset: 6px;
}

/* --- Footer banner -------------------------------------------------- */

.guides-hub-banner {
  margin-top: 96px;
  padding: 40px 44px;
  background: var(--hub-surface);
  border: 1px solid var(--hub-rule);
  display: grid;
  /* Photo, copy, link. The photo is a fixed track so the copy keeps the
     full remaining width rather than being squeezed by a flexible image. */
  grid-template-columns: 320px 1fr auto;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.guides-hub-banner-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--hub-rule);
}

.guides-hub-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--hub-accent);
}

.guides-hub-banner-copy {
  min-width: 0;
}

.guides-hub-banner-eyebrow {
  font-family: var(--hub-sans);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hub-muted);
  margin: 0 0 10px;
}

.guides-hub-banner-text {
  font-family: var(--hub-serif);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--hub-text);
  margin: 0;
  max-width: 540px;
}

.guides-hub-banner-link {
  font-family: var(--hub-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--hub-accent);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 0.2s ease;
}

.guides-hub-banner-link:hover {
  opacity: 0.7;
}

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

@media (max-width: 720px) {
  .guides-hub {
    padding: 44px 22px 72px;
  }
  .guides-hub-head {
    margin: 8px 0 28px;
  }
  .guides-hub-eyebrow {
    margin-bottom: 22px;
  }
  .guides-hub-title {
    font-size: clamp(var(--text-3xl), 9vw, var(--text-6xl));
    margin-bottom: 24px;
  }
  .guides-hub-lede {
    font-size: var(--text-sm);
  }
  .guides-hub-group {
    margin-top: 40px;
    gap: 14px;
  }
  .guides-hub-link {
    grid-template-columns: 64px 1fr auto;
    column-gap: 18px;
    padding: 22px 0 24px;
  }
  .guides-hub-num {
    font-size: var(--text-7xl);
    padding-top: 2px;
  }
  .guides-hub-body {
    padding-top: 4px;
    gap: 10px;
  }
  .guides-hub-headline {
    font-size: var(--text-md);
  }
  .guides-hub-desc {
    font-size: var(--text-xs);
  }
  .guides-hub-arrow {
    font-size: var(--text-md);
    padding-top: 10px;
  }
  .guides-hub-banner {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 28px;
    margin-top: 64px;
  }
  /* On a narrow screen the photo would push the actual pitch below the fold,
     so it drops out rather than stacking above it. */
  .guides-hub-banner-image {
    display: none;
  }
  .guides-hub-banner-text {
    font-size: var(--text-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .guides-hub-link {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .guides-hub-link:hover .guides-hub-num,
  .guides-hub-link:hover .guides-hub-arrow {
    transform: none;
  }
}

/* Search bar (the results dropdown is styled by the shared site-search.css) */
.guides-search {
  position: relative;
  max-width: 540px;
  margin: 0 auto 3.5rem;
  text-align: left;
}

.guides-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  background: var(--hub-surface);
  border: 1px solid var(--hub-rule);
  border-radius: var(--radius-md);
  padding: 0 0.9rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.guides-search-wrap:focus-within {
  border-color: var(--hub-accent);
  box-shadow: 0 0 0 3px var(--hub-accent-soft);
}

.guides-search-icon {
  color: var(--hub-muted);
  flex-shrink: 0;
}

.guides-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0.85rem 0;
  font-size: var(--text-sm);
  font-family: var(--hub-sans);
  color: var(--hub-text);
  outline: none;
}

.guides-search input::placeholder {
  color: var(--hub-muted);
}