/* ===============================================================
   HCBI hub page styles. Loaded via $extra_css on hub pages
   (Insurance Solutions, Who We Serve, States, Resources).
   Reuses shared tokens from main.css and shared components from
   components.css (breadcrumbs, cards, accordion, section-head,
   alt-bg). Holds only hub-specific layout.
   =============================================================== */

/* HERO */
.hub-hero {
  background: linear-gradient(135deg, var(--navy) 0%, #16164f 100%);
  color: var(--white);
  padding: var(--space-2xl) 0;
}

.hub-hero__eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: var(--space-sm);
}

.hub-hero__title {
  color: var(--white);
  /* Was 22ch. See --hero-measure in tokens.css. */
  max-width: none;
  margin-bottom: var(--space-md);
}

.hub-hero__lead {
  font-size: 1.2rem;
  max-width: var(--hero-measure);
  margin-bottom: var(--space-lg);
  /* Solid, not rgba(255,255,255,.94). See .hero__lead in home.css. */
  color: var(--white);
}

.hub-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Only the photo hero is dark now. The plain hero is the light
   gradient, and white text on it was invisible against the white
   button background, so these are scoped to the media variant.
   Both states set colour explicitly. */
.hub-hero--media .btn--secondary {
  /* SOLID, never translucent. This was rgba(255,255,255,0.08), so the
     hero photograph showed straight through the button and it read as
     broken glass rather than a control. White fill, navy label, alpha 1. */
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}

.hub-hero--media .btn--secondary:hover,
.hub-hero--media .btn--secondary:focus-visible {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

/* CONTENT SECTIONS: full container width, body copy left-aligned */
.hub-section__inner {
  max-width: var(--container-max);
}

.hub-section__inner h2 {
  margin-bottom: var(--space-md);
}

.hub-section__inner > p {
  margin-bottom: var(--space-md);
}

.hub-section__inner .card-grid,
.hub-section__inner .program-steps,
.hub-section__inner .accordion {
  margin-top: var(--space-lg);
}

.hub-section__inner .section-head {
  margin-bottom: var(--space-md);
}

/* PROGRAM STEPS: numbered, left-aligned, full-width cards */
.program-steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: var(--space-md);
}

.program-steps li {
  position: relative;
  counter-increment: step;
  background: var(--white);
  border: 1px solid var(--border-gray);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  padding-left: calc(var(--space-lg) + 3rem);
  box-shadow: var(--shadow-card);
}

.program-steps li::before {
  content: counter(step);
  position: absolute;
  left: var(--space-lg);
  top: var(--space-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-badge);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.1rem;
}

.program-steps h3 {
  margin-bottom: var(--space-xs);
  font-size: var(--fs-h4);
}

.program-steps p {
  color: var(--text-muted);
  margin-bottom: 0;
}

/* Sequence steps cycle white, blue, navy */
.program-steps li:nth-child(3n+2) {
  background: var(--blue-card-bg);
  border-color: var(--blue-card-border);
}

.program-steps li:nth-child(3n+2) h3 {
  color: var(--blue-card-title);
}

.program-steps li:nth-child(3n+2) p {
  color: var(--blue-card-text);
}

.program-steps li:nth-child(3n+3) {
  background: var(--navy);
  border-color: var(--navy);
}

.program-steps li:nth-child(3n+3) h3 {
  color: #fff;
}

.program-steps li:nth-child(3n+3) p {
  color: #B5D4F4;
}

/* On the navy step, switch the number badge to green so it stays visible */
.program-steps li:nth-child(3n+3)::before {
  background: var(--green);
}

/* STATE PICKER (states hub) */
.state-picker-wrap {
  max-width: 420px;
  margin: 0 auto var(--space-lg);
  text-align: center;
}

.state-picker-wrap label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

/* ---------------------------------------------------------------
   LINK CARD GRID
   Used by the 50-state grid on the states hub and by every section
   grid on the sitemap page.

   WIDTH. The columns were minmax(180px, 1fr), which put six cards in a
   row at 1440px and left only about 120px of text width per card. Short
   labels like "Texas" were fine; the blog titles, which run to 51
   characters, broke onto three lines and made one card in a row nearly
   twice the height of its neighbours. 250px gives roughly five columns
   at 1440px and enough measure for the longest title to settle on two
   clean lines.

   EQUAL HEIGHTS. Grid items stretch by default, but the anchor was a
   block sized to its own text, so a two-line card sat in a taller row
   with white space underneath. The li is now a flex container and the
   anchor fills it, so every card in a row matches the tallest, and the
   label is centred vertically so one-line and two-line cards both read
   correctly.

   TREATMENT. Same language as the coverage cards rather than a new one:
   the same card fill, the same hairline, the same resting and lifted
   shadows and the same easing, with the 20px radius these smaller cards
   were specified at. The lift is 4px rather than the coverage cards' 8px
   only because these cards are a third of the height, where 8px reads as
   a jump rather than a lift.
--------------------------------------------------------------- */
.states-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.states-grid > li {
  display: flex;
}

.states-grid a {
  /* flex + width:100% is what makes the card fill the stretched row. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 16px 18px;
  background: var(--sk-card-fill);
  border: 1px solid var(--sk-hairline-soft);
  border-radius: 20px;
  box-shadow: var(--sk-shadow-rest);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--navy);
  transition: transform 0.4s var(--sk-ease), box-shadow 0.4s, border-color 0.4s;
}

/* The arrow that fills the space a short label leaves, and slides on
   hover exactly as .card__link does elsewhere. */
.states-grid a:after {
  content: "\2192";
  flex: none;
  font-size: 15px;
  line-height: 1;
  color: var(--sk-navy);
  opacity: 0.5;
  transition: transform 0.4s var(--sk-ease), opacity 0.4s;
}

.states-grid a:hover {
  transform: translateY(-4px);
  border-color: rgba(11, 11, 69, 0.14);
  box-shadow: var(--sk-shadow-lift);
}

.states-grid a:hover:after {
  transform: translateX(4px);
  opacity: 1;
}

.states-grid a:focus-visible {
  border-color: rgba(11, 11, 69, 0.14);
  box-shadow: var(--sk-shadow-lift);
}

/* FINAL CTA */
.hub-cta {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: var(--space-2xl) 0;
}

.hub-cta__inner {
  max-width: 680px;
}

.hub-cta h2 {
  color: var(--white);
  margin-bottom: var(--space-sm);
}

.hub-cta p {
  margin-bottom: var(--space-lg);
  color: rgba(255, 255, 255, 0.9);
}

.hub-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

.hub-cta .btn--secondary {
  color: var(--white);
  border-color: var(--white);
}

.hub-cta .btn--secondary:hover {
  background: var(--white);
  color: var(--navy);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .hub-hero {
    padding: var(--space-xl) 0;
  }
  .hub-hero__lead {
    font-size: 1.05rem;
  }
  .program-steps li {
    padding-left: calc(var(--space-md) + 2.75rem);
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
    padding-right: var(--space-md);
  }
  .program-steps li::before {
    left: var(--space-md);
    top: var(--space-md);
  }
}