/* ==========================================================================
   Magnolia Assurant Group — Magnolia Insights (insights.html + the
   "Latest from Magnolia Insights" teaser on insurance/index.html).
   Page-specific styles only; everything else comes from styles.css.
   ========================================================================== */

/* ---------- Hero ---------- */
.insight-hero-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.25rem; font-size: .92rem; color: #C9D8D7; }
.insight-hero-meta span { display: inline-flex; align-items: center; gap: .45em; }
.insight-hero-meta .icon { color: var(--gold); }
.page-hero h1.insight-title { font-size: clamp(1.9rem, 4.2vw, 3.1rem); max-width: 24ch; }

/* ---------- List ---------- */
.insight-card .insight-meta { margin-bottom: .8rem; }
.insight-card h3 { font-size: clamp(1.2rem, 2vw, 1.35rem); margin-bottom: .45em; }
.insight-card p { color: var(--body); font-size: .98rem; }
.insight-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; font-size: .85rem; color: var(--muted-c); }
.insight-meta span { display: inline-flex; align-items: center; gap: .4em; }
.insight-meta .icon { color: var(--gold-ink); }

/* ---------- Loading skeleton ---------- */
.insight-skel { pointer-events: none; }
.insight-skel__bar {
  height: .9rem; border-radius: 6px; margin-bottom: .7rem;
  background: linear-gradient(90deg, var(--teal-50) 0%, #F7FAF9 50%, var(--teal-50) 100%) 0 0 / 200% 100%;
  animation: insight-shimmer 1.4s ease-in-out infinite;
}
.insight-skel__bar--sm { width: 38%; height: .75rem; }
.insight-skel__bar--lg { height: 1.4rem; width: 85%; margin-bottom: 1rem; }
.insight-skel__bar--short { width: 62%; }
@keyframes insight-shimmer { to { background-position: -200% 0; } }

/* ---------- Empty / error states ---------- */
.insight-state { max-width: 560px; margin: 0 auto; text-align: center; }
.insight-state .icon-badge { margin: 0 auto 1rem; }
.insight-state .btn-row { justify-content: center; }

/* ---------- Article ---------- */
.insight-body { font-size: 1.06rem; line-height: 1.72; color: var(--body); }
.insight-body > :first-child { margin-top: 0; }
.insight-body h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin: 2em 0 .6em; }
.insight-body h3 { font-size: clamp(1.15rem, 2vw, 1.3rem); margin: 1.6em 0 .5em; }
.insight-body p { margin: 0 0 1.15em; }
.insight-body ul, .insight-body ol { margin: 0 0 1.25em; padding-left: 1.35em; display: grid; gap: .45em; }
.insight-body li::marker { color: var(--gold-ink); font-weight: 700; }
.insight-body a { color: var(--teal); font-weight: 500; }
.insight-body a:hover { color: var(--gold-ink); }
.insight-disclaimer { margin-top: 2.25rem; }
.insight-after {
  margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}

/* ---------- Teaser on insurance/index.html ---------- */
.insight-latest { display: grid; gap: 1.25rem; align-items: center; }
.insight-latest h3 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); margin-bottom: .4em; }
.insight-latest h3 a { color: var(--ink); text-decoration: none; }
.insight-latest h3 a:hover { color: var(--gold-ink); }
.insight-latest p { margin-bottom: .6rem; }
.insight-latest .btn-row { gap: .5rem 1.25rem; }
@media (min-width: 761px) { .insight-latest { grid-template-columns: 1fr auto; gap: 2rem; } }