/* ===============================================================
   HCBI solution page styles. Loaded via $extra_css on insurance
   solution pages (general liability, professional liability, etc).
   Reuses shared tokens from main.css and components from
   components.css. Holds only solution-specific layout.
   =============================================================== */

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

.solution-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);
}

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

.solution-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);
}

.solution-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. */
.solution-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);
}

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

/* Hero with a background image. These rules apply ONLY when
   renderSolutionHero() is given a usable image and adds the --media
   modifier. The plain .solution-hero above (gradient only) is
   unchanged, so existing pages render exactly as before. */
.solution-hero--media {
  position: relative;
  isolation: isolate;
}

.solution-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.solution-hero__media picture,
.solution-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solution-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(11, 11, 69, 0.92) 0%, rgba(11, 11, 69, 0.79) 55%, rgba(11, 11, 69, 0.64) 100%);
}

.solution-hero--media .solution-hero__inner {
  position: relative;
  z-index: 1;
}

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

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

/* Standalone prose paragraphs span the full 1200px container width,
   left-aligned, matching the cards and tables. No reading-measure
   cap. */
.solution-section__inner > p {
  margin-bottom: var(--space-md);
}

.solution-section__inner .card-grid,
.solution-section__inner .claim-list,
.solution-section__inner .limits-table {
  margin-top: var(--space-lg);
}

/* The centered section-head still works inside solution sections */
.solution-section__inner .section-head {
  margin-bottom: var(--space-md);
}

/* COVERAGE AND COST CARDS reuse .card, add small accents */
.coverage-card .card__title {
  color: var(--navy);
}

.cost-card__range {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--green-dark);
  margin-bottom: var(--space-xs);
}

/* EXCLUSION LIST */
.exclusion-list,
.checklist {
  margin: var(--space-md) 0;
  list-style: none;
  display: grid;
  gap: var(--space-sm);
}

.exclusion-list li,
.checklist li {
  position: relative;
  padding-left: 2rem;
  line-height: var(--lh-body);
}

.exclusion-list li::before {
  content: "\2715";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  color: #b03030;
}

.checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  color: var(--green);
}

/* LIMITS TABLE */
.limits-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border-gray);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: var(--fs-small);
}

.limits-table caption {
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--space-sm);
}

.limits-table th,
.limits-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--border-gray);
}

.limits-table thead th {
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-heading);
}

.limits-table tbody tr:nth-child(even) {
  background: var(--light-gray);
}

.limits-table tbody tr:last-child td {
  border-bottom: 0;
}

/* CLAIM EXAMPLE CARDS */
.claim-list {
  display: grid;
  gap: var(--space-md);
}

.claim-card {
  background: var(--white);
  border: 1px solid var(--border-gray);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
}

.claim-card__title {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-sm);
}

.claim-card p {
  color: var(--text-dark);
}

/* Sequence cards cycle white, blue, navy across the list */
.claim-card:nth-of-type(3n+2) {
  background: var(--blue-card-bg);
  border-color: var(--blue-card-border);
}

.claim-card:nth-of-type(3n+2) .claim-card__title {
  color: var(--blue-card-title);
}

.claim-card:nth-of-type(3n+2) p {
  color: var(--blue-card-text);
}

.claim-card:nth-of-type(3n+3) {
  background: var(--navy);
  border-color: var(--navy);
}

.claim-card:nth-of-type(3n+3) .claim-card__title,
.claim-card:nth-of-type(3n+3) p {
  color: #fff;
}

/* AUTHOR / REVIEWER BOX */
.author-box {
  padding: var(--space-lg) 0;
}

.author-box__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--light-gray);
  border: 1px solid var(--border-gray);
  border-radius: var(--radius-card);
}

.author-box__name {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-xs);
}

.author-box__title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--green-dark);
  margin-bottom: var(--space-xs);
}

.author-box__npn,
.author-box__spec {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

.author-box__updated {
  font-size: var(--fs-small);
  color: var(--text-muted);
  white-space: nowrap;
}

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

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

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

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

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

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

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

/* RESPONSIVE */
@media (max-width: 768px) {
  .solution-hero {
    padding: var(--space-xl) 0;
  }
  .solution-hero__lead {
    font-size: 1.05rem;
  }
  .author-box__inner {
    flex-direction: column;
  }
  .limits-table {
    font-size: 0.85rem;
  }
}

/* ---------------------------------------------------------------
   LIMITS TABLE ON PHONES

   The table was the one thing on the whole site pushing a page wider
   than the viewport. Its own border box measured 404px inside a 350px
   content column at 390px, so the document scrolled 34px to the right
   into blank space. A table cannot be squeezed by width:100%: that is
   only a preferred width, and a table can never render narrower than
   the sum of its columns' minimum content widths. Those minimums were
   dominated by the cell padding, which is 1.5rem each side, so three
   columns were spending 144px on padding alone.

   Halving the horizontal padding takes the table to roughly 318px,
   inside the 350px available at 390px, with the cells still readable.
   Nothing else changes: the table keeps its border radius, shadow and
   normal table layout, so this is not the display:block scroll hack.

   Scoped to 480px because the table only overflows below about 443px.
   Tablets and desktop keep the roomier padding.
--------------------------------------------------------------- */
@media (max-width: 480px) {
  /* (0,2,0) and later in this file than the base rule it overrides.
     Nothing at higher specificity sets padding on these cells. */
  .limits-table th,
  .limits-table td {
    padding: 0.7rem 0.6rem;
  }
}