/* ============================================================================
   JNZ Insurance — Coverage spoke shared styles
   ============================================================================
   Loaded by every coverage spoke page (auto-insurance, home-insurance,
   renters-insurance, etc.). Depends on /styles.css being loaded first.

   The shared spoke template structure:
     0. Breadcrumb pill bar (.spoke-breadcrumb)
     1. Hero (.hero from styles.css)
     2. Intro (.section-head + .about-prose, both shared)
     3. What X covers (.spoke-features 3-up grid + .spoke-feature cards)
     4. State-specific knowledge (.state-comparison + .line-callout)
     5. Carriers (.carriers-grid + .carrier-card)
     6. FAQ (.faq + .faq-item from styles.css)
     7. Related coverage (.related-spokes 3-up grid + .related-card cards)
     8. CTA (.section-navy.quote-cta from styles.css)

   Anything new here = should work for ALL future spokes, not auto-only.
============================================================================ */

/* (Note: breadcrumb pattern lives in /styles.css now as .hero-breadcrumb,
   since breadcrumbs are sitewide and render inside the hero on every page.) */

/* ============ Centered section-head + prose modifiers ============
   The base .section-head in styles.css has max-width: 760px but no auto margin
   (it left-anchors). These modifiers enable visually-centered section heads on
   any spoke page, regardless of container width (1200 or 920). Mirror of
   the modifiers in coverage.css and about.css. */
.section-head--center {
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.section-head--center .lede {
  margin-left: auto;
  margin-right: auto;
}
.about-prose--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ============ "What X covers" — 6-up feature grid (3-col → 2-col → 1-col) ============ */
.spoke-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.spoke-feature {
  background: var(--bg);
  border: 1px solid rgba(18, 58, 92, 0.06);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.spoke-feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}
.spoke-feature-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: rgba(46, 111, 149, 0.10);
  color: var(--jnz-blue);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
}
.spoke-feature-icon svg { width: 22px; height: 22px; }
.spoke-feature-title {
  font-size: 17px;
  font-weight: var(--fw-bold);
  color: var(--jnz-navy);
  margin: 0 0 10px;
  letter-spacing: -0.005em;
}
.spoke-feature-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--jnz-slate);
  margin: 0;
}

/* ===========================================
   Coverage spoke section patterns
   Used across all /coverage/* pages
   =========================================== */

/* ============ Carriers layout (2-col: prose left, card grid right) ============ */
.carriers-layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 28px;
}
.carriers-layout-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.carriers-layout-text p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--jnz-charcoal);
  margin: 0;
}

/* ============ Carriers grid (typographic carrier cards) ============
   Default 3-col on desktop. Inside .carriers-layout, becomes 2-col since
   it sits in the right (1.6fr) column of a 2-col grid. */
.carriers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 28px;
}
.carriers-layout .carriers-grid {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 0;
}
.carrier-card {
  background: var(--bg);
  border-radius: var(--r-lg);
  border-left: 4px solid var(--jnz-navy);
  padding: 26px 28px;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.carrier-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.carrier-name {
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--jnz-navy);
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  line-height: 1.2;
}
.carrier-context {
  font-size: 14px;
  color: var(--jnz-slate);
  line-height: 1.5;
  margin: 0;
}

/* ============ State knowledge (2-col: prose left, line-callout right) ============ */
.state-knowledge {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}
.state-knowledge-prose {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.state-knowledge-prose h3 {
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--jnz-navy);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
/* Chip primitives — used in state-knowledge AND factors/discounts sections */
.state-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.state-knowledge-prose .state-chip-row { margin: 0 0 14px; }
.state-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: rgba(46, 111, 149, 0.08);
  color: var(--jnz-navy);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.state-knowledge-prose p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--jnz-charcoal);
  margin: 0;
}
.state-knowledge-prose a {
  color: var(--jnz-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.state-knowledge-prose a:hover { color: var(--jnz-navy); }

/* ============ Spoke rich prose (h3 subsections + paragraphs; for premium/discount-style sections) ============ */
.spoke-rich-prose {
  color: var(--jnz-charcoal);
  font-size: 16px;
  line-height: 1.7;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.spoke-rich-prose h3 {
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--jnz-navy);
  margin: 36px 0 14px;
  letter-spacing: -0.01em;
}
.spoke-rich-prose h3:first-child { margin-top: 0; }
.spoke-rich-prose p {
  margin: 0 0 18px;
}
.spoke-rich-prose p:last-child { margin-bottom: 0; }

/* ============ Limits layout (2-col: head + prose left, comparison cards stacked right) ============
   Used when the limits-comparison sits beside its surrounding prose instead of
   below it. Reusable on home (replacement cost vs ACV beside the cards),
   umbrella ($1M vs $5M), etc. */
.limits-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 72px;
  align-items: center;
}
.limits-layout-text {
  display: flex;
  flex-direction: column;
}
.limits-layout-text .section-head {
  margin-bottom: 28px;
}
.limits-layout-text .spoke-rich-prose {
  text-align: left;
  margin: 0;
  max-width: none;
}
.limits-layout .limits-comparison {
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: none;
  margin: 0;
}

/* ============ Premium layout (2-col: factors h3 left, discounts h3 + list right) ============
   Splits a long prose section into 2 readable columns: factors on the left,
   discounts (with categorized list) on the right. Reusable on every spoke
   that has both rating-factor prose and a discount lineup. */
.premium-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  text-align: left;
}
.premium-layout-text,
.premium-layout-discounts {
  display: flex;
  flex-direction: column;
}
.premium-layout-text h3,
.premium-layout-discounts h3 {
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--jnz-navy);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.premium-layout-text p,
.premium-layout-discounts p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--jnz-charcoal);
  margin: 0 0 18px;
}
.premium-layout-text p:last-child,
.premium-layout-discounts p:last-child {
  margin-bottom: 0;
}
.premium-layout-discounts .discount-list {
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: none;
  margin: 18px 0;
}

/* ============ Section-navy overrides for spoke patterns ============
   When .section-navy hosts spoke-pattern content (limits prose, decision cards,
   etc.), override colors so text and cards remain legible on the navy bg with
   champagne as the accent. */
.section-navy .spoke-rich-prose {
  color: rgba(255, 255, 255, 0.85);
}
.section-navy .spoke-rich-prose h3 {
  color: var(--jnz-white);
}
.section-navy .spoke-rich-prose a {
  color: var(--jnz-champagne);
}
.section-navy .spoke-rich-prose a:hover {
  color: var(--jnz-white);
}
/* Limits cards on navy: glass treatment + champagne top accent */
.section-navy .limits-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 4px solid var(--jnz-champagne);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.section-navy .limits-card-label { color: var(--jnz-champagne); }
.section-navy .limits-card-numbers { color: var(--jnz-white); }
.section-navy .limits-card-desc { color: rgba(255, 255, 255, 0.80); }

/* ============ Decision card — numbered badge + navy glass treatment ============
   The numbered badge (01–04) gives the cards a more deliberate visual rhythm.
   On the navy background, the cards become glass + champagne-accented with an
   animated top bar that slides in on hover, for a noticeably more "designed"
   feel than the default white-card pattern. */
.decision-card-number {
  display: block;
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--jnz-teal);
  letter-spacing: 0.16em;
  margin: 0 0 14px;
  font-feature-settings: "tnum";
}
.section-navy .decision-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}
.section-navy .decision-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--jnz-champagne), var(--jnz-green));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-premium);
}
.section-navy .decision-card:hover::before { transform: scaleX(1); }
.section-navy .decision-card:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(127, 175, 135, 0.40);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.40);
}
.section-navy .decision-card-number { color: var(--jnz-champagne); }
.section-navy .decision-question { color: var(--jnz-white); }
.section-navy .decision-answer { color: rgba(255, 255, 255, 0.85); }
.section-navy .decision-answer a { color: var(--jnz-champagne); }
.section-navy .decision-answer a:hover { color: var(--jnz-white); }

/* ============ Limits comparison — 2 side-by-side cards with big numbers ============
   Used inside prose-heavy sections to surface a concrete comparison (e.g. liability
   limit options). Reusable on home (replacement cost vs ACV), umbrella ($1M vs $5M),
   etc. */
.limits-comparison {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 760px;
  margin: 36px auto;
}
.limits-card {
  background: var(--bg);
  border: 1px solid rgba(18, 58, 92, 0.08);
  border-top: 4px solid var(--jnz-navy);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-1);
  text-align: center;
}
.limits-card-label {
  display: block;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--jnz-teal);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 0 12px;
}
.limits-card-numbers {
  font-size: 32px;
  font-weight: var(--fw-bold);
  color: var(--jnz-navy);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 14px;
}
.limits-card-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--jnz-slate);
  margin: 0;
}

/* ============ Discount list — 4 categorized items (2x2 grid) ============
   Used inside the premium/discounts prose to break a paragraph into scannable
   categories. Reusable on every spoke that has discount content. */
.discount-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 32px;
  max-width: 760px;
  margin: 28px auto;
  text-align: left;
}
.discount-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.discount-item-name {
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--jnz-navy);
  letter-spacing: -0.005em;
  margin: 0;
  line-height: 1.3;
}
.discount-item-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--jnz-slate);
  margin: 0;
}

/* ============ Coverage gaps — "what's NOT covered" cards (2-col, warning accent) ============
   Visual mirror of .spoke-feature with flipped accent (amber border-left + warning-tint
   icon) so it reads as "watch out for these" vs the navy/blue covered cards above.
   Reusable on every spoke (home gaps: flood/earth movement, boat gaps: racing
   exclusions, etc.). */
.coverage-gaps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.gap-card {
  background: var(--bg);
  border: 1px solid rgba(18, 58, 92, 0.06);
  border-left: 4px solid var(--warning);
  border-radius: var(--r-lg);
  padding: 26px 28px;
  box-shadow: var(--shadow-1);
  display: flex;
  gap: 18px;
  align-items: flex-start;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.gap-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.gap-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: var(--warning-bg);
  color: var(--warning);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.gap-icon svg { width: 20px; height: 20px; }
.gap-text { flex: 1; min-width: 0; }
.gap-title {
  font-size: 17px;
  font-weight: var(--fw-bold);
  color: var(--jnz-navy);
  margin: 0 0 8px;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.gap-description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--jnz-slate);
  margin: 0;
}

/* ============ Decision frameworks — Q&A cards (2x2, "when you actually need...") ============
   Opinionated agent-perspective answers to common questions. Reusable across every spoke. */
.decision-frameworks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.decision-card {
  background: var(--bg);
  border: 1px solid rgba(18, 58, 92, 0.06);
  border-radius: var(--r-lg);
  padding: 28px 30px;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.decision-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.decision-question {
  font-size: 18px;
  font-weight: var(--fw-bold);
  color: var(--jnz-navy);
  margin: 0 0 12px;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.decision-answer {
  font-size: 15px;
  line-height: 1.65;
  color: var(--jnz-charcoal);
  margin: 0;
}
.decision-answer a {
  color: var(--jnz-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.decision-answer a:hover { color: var(--jnz-navy); }

/* ============ Scenario grid (3-up small cards — life events / situations) ============ */
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.scenario-card {
  background: var(--bg);
  border: 1px solid rgba(18, 58, 92, 0.06);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.scenario-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.scenario-card-title {
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--jnz-navy);
  margin: 0 0 8px;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.scenario-card-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--jnz-slate);
  margin: 0;
}

/* ============ Line callout (emphasis band; can host a CTA button) ============ */
.line-callout {
  background: rgba(18, 58, 92, 0.05);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.line-callout-headline {
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--jnz-navy);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.line-callout-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--jnz-charcoal);
  margin: 0;
}
/* Button inside a callout — anchored left, doesn't stretch */
.line-callout a.btn {
  align-self: flex-start;
  margin-top: 4px;
}
/* Get a Free Quote inside callouts gets the same champagne treatment as
   navbar/hero/CTA banner, so it pops against the navy-tint band */
.line-callout a.btn[href="/quote/"] {
  background: var(--jnz-green);
  color: var(--jnz-white);
  border-color: var(--jnz-green);
  box-shadow: 0 4px 12px -4px rgba(70, 114, 79, 0.40);
}
.line-callout a.btn[href="/quote/"]:hover {
  background: var(--jnz-green-hover);
  border-color: var(--jnz-green-hover);
  box-shadow: 0 10px 24px -6px rgba(56, 91, 63, 0.50);
  transform: translateY(-1px);
}
.line-callout a.btn[href="/quote/"]:active {
  background: var(--jnz-green-press);
  border-color: var(--jnz-green-press);
  transform: translateY(0);
}

/* ============ Related coverage — 3-up grid of compact pairing cards ============ */
.related-spokes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.related-card {
  background: var(--bg);
  border: 1px solid rgba(18, 58, 92, 0.08);
  border-radius: var(--r-lg);
  padding: 24px 26px;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.related-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: rgba(127, 175, 135, 0.40);
}
.related-card-title {
  font-size: 18px;
  font-weight: var(--fw-bold);
  color: var(--jnz-navy);
  margin: 0 0 10px;
  letter-spacing: -0.005em;
}
.related-card-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--jnz-slate);
  margin: 0;
}
/* When the card is wrapped in a link (once target spoke exists), preserve text styling */
a.related-card { text-decoration: none; }
a.related-card .related-card-title,
a.related-card .related-card-desc { transition: color var(--dur-fast) var(--ease-out); }
a.related-card:hover .related-card-title { color: var(--jnz-blue); }

/* ============ Responsive ============ */
@media (max-width: 980px) {
  .spoke-features { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .related-spokes { grid-template-columns: 1fr; gap: 16px; }
  .carriers-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .carriers-layout { grid-template-columns: 1fr; gap: 32px; }
  .carriers-layout .carriers-grid { grid-template-columns: repeat(2, 1fr); }
  .state-knowledge { grid-template-columns: 1fr; gap: 32px; }
  .scenario-grid { grid-template-columns: repeat(2, 1fr); }
  .coverage-gaps,
  .decision-frameworks { grid-template-columns: 1fr; gap: 16px; }
  .limits-comparison { grid-template-columns: 1fr; gap: 16px; }
  .discount-list { grid-template-columns: 1fr; gap: 18px; }
  .limits-layout { grid-template-columns: 1fr; gap: 32px; }
  .premium-layout { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .spoke-features { grid-template-columns: 1fr; }
  .carriers-grid,
  .carriers-layout .carriers-grid { grid-template-columns: 1fr; }
  .carrier-card { padding: 22px 24px; }
  .carrier-name { font-size: 20px; }
  .line-callout { padding: 24px 22px; }
  .line-callout-headline { font-size: 19px; }
  .state-knowledge-prose h3 { font-size: 20px; }
  .scenario-grid { grid-template-columns: 1fr; }
  .spoke-rich-prose h3 { font-size: 19px; margin-top: 28px; }
  .gap-card { padding: 22px 22px; }
  .decision-card { padding: 24px 24px; }
  .decision-question { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .spoke-feature,
  .related-card,
  .carrier-card,
  .gap-card,
  .decision-card { transition: none; }
  .spoke-feature:hover,
  .related-card:hover,
  .carrier-card:hover,
  .gap-card:hover,
  .decision-card:hover { transform: none; }
}