/* ============================================================
   Eye Cue — legal / utility page styles (lp-* namespace).
   Loaded via front-matter `extraCss: legal` AFTER eyecue.css.
   Self-contained: never edits shared styles.css / eyecue.css.

   NOTE: healingy sets html{font-size:10px}, so all sizes here are
   pinned in PX (body 16-17px, line-height >= 1.6) per the project's
   accessibility type scale. Brand tokens (--ec-*) come from eyecue.css.
   ============================================================ */

/* ---- Page-title hero (calm, no photo needed) ---- */
.lp-hero {
  background: var(--ec-ink);
  color: #fff;
  padding: 96px 0 64px;
  text-align: center;
}
.lp-hero .tf-container { max-width: 860px; }
.lp-breadcrumb {
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--ec-sand);
  margin-bottom: 18px;
}
.lp-breadcrumb a { color: var(--ec-sand); text-decoration: none; }
.lp-breadcrumb a:hover { color: #fff; }
.lp-breadcrumb span { opacity: .6; margin: 0 8px; }
.lp-hero h1 {
  color: #fff;
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.12;
  margin: 0 0 14px;
}
.lp-updated { font-size: 14px; color: var(--ec-sand); margin: 0; }

/* ---- Prose body ---- */
.lp-prose { padding: 64px 0 88px; }
.lp-prose .tf-container { max-width: 820px; }
.lp-prose h2 {
  font-size: clamp(24px, 2.6vw, 32px) !important;
  line-height: 1.25;
  color: var(--ec-ink);
  margin: 48px 0 16px;
}
.lp-prose h2:first-child { margin-top: 0; }
.lp-prose h3 {
  font-size: 20px !important;
  line-height: 1.3;
  color: var(--ec-ink);
  margin: 28px 0 10px;
}
.lp-prose p,
.lp-prose li {
  font-size: 17px !important;
  line-height: 1.7;
  color: var(--ec-body);
}
.lp-prose p { margin: 0 0 18px; }
.lp-prose ul { margin: 0 0 22px; padding-left: 22px; }
.lp-prose li { margin-bottom: 10px; }
.lp-prose a { color: var(--ec-clay); text-decoration: underline; }
.lp-prose a:hover { color: var(--ec-ink); }
.lp-prose strong { color: var(--ec-ink); }

/* Callout (crisis / important notice) */
.lp-callout {
  background: var(--ec-paper);
  border-left: 4px solid var(--ec-clay);
  border-radius: var(--ec-radius);
  padding: 22px 26px;
  margin: 0 0 28px;
}
.lp-callout p { margin: 0; font-size: 16px !important; color: var(--ec-ink); }
.lp-callout strong { color: var(--ec-clay); }

/* Contact block at the foot of a policy */
.lp-contact {
  background: var(--ec-paper);
  border-radius: var(--ec-radius);
  padding: 26px 30px;
  margin-top: 32px;
  box-shadow: var(--ec-shadow);
}
.lp-contact p { margin: 0 0 8px; font-size: 16px !important; }
.lp-contact p:last-child { margin-bottom: 0; }

/* ---- 404 ---- */
.lp-404 { text-align: center; padding: 110px 0 100px; }
.lp-404 .tf-container { max-width: 640px; }
.lp-404 .lp-404-code {
  font-size: clamp(72px, 12vw, 132px);
  line-height: 1;
  font-weight: 800;
  color: var(--ec-clay);
  margin: 0 0 8px;
}
.lp-404 h1 { font-size: clamp(26px, 3.4vw, 38px); color: var(--ec-ink); margin: 0 0 16px; }
.lp-404 p { font-size: 17px !important; line-height: 1.7; color: var(--ec-body); margin: 0 auto 28px; max-width: 520px; }
.lp-404-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---- Blog archive ---- */
.lp-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}
.lp-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-radius);
  overflow: hidden;
  box-shadow: var(--ec-shadow);
  transition: transform .3s var(--ec-ease);
}
.lp-card:hover { transform: translateY(-4px); }
.lp-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.lp-card-date { font-size: 13px !important; color: var(--ec-clay); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 10px; }
.lp-card h2 { font-size: 21px !important; line-height: 1.3; color: var(--ec-ink); margin: 0 0 10px; }
.lp-card h2 a { color: inherit; text-decoration: none; }
.lp-card h2 a:hover { color: var(--ec-clay); }
.lp-card p { font-size: 15px !important; line-height: 1.6; color: var(--ec-body); margin: 0 0 16px; }
.lp-card .lp-card-more { margin-top: auto; font-size: 15px !important; color: var(--ec-clay); font-weight: 600; text-decoration: none; }
.lp-empty {
  text-align: center;
  background: var(--ec-paper);
  border-radius: var(--ec-radius);
  padding: 56px 30px;
}
.lp-empty p { font-size: 17px !important; color: var(--ec-body); margin: 0; }