/* Pearland Sprinkler Repair — blog styles.
   Loaded only on /blog/ pages. Inherits tokens/components from site.css;
   this file adds only the blog-specific index cards, post layout, and FAQ.
   Palette (from site.css): navy #0C1322, blue #1668E3, accent #5E96EC,
   ink #111827, body #374151, muted #6B7280, line #E5E7EB, wash #F3F4F6. */

/* ---------- Blog index hero ---------- */
.bloghero { background: #0C1322; padding: clamp(40px, 7vw, 78px) 20px clamp(32px, 5vw, 54px); }
.bloghero .breadcrumb a, .bloghero .breadcrumb span { color: #8A97AD; }
.bloghero .breadcrumb a:hover { color: #fff; }
.bloghero__h1 { margin: 10px 0 0; font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(34px, 6.6vw, 58px); line-height: 1.04; text-transform: uppercase; color: #fff; max-width: 900px; text-wrap: balance; }
.bloghero__sub { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: #B8C2D4; max-width: 640px; text-wrap: pretty; }

/* ---------- Post cards ---------- */
.bcard__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
.bcard { display: flex; flex-direction: column; background: #fff; border: 1px solid #E5E7EB; border-radius: 6px; overflow: hidden; text-decoration: none; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.bcard:hover { border-color: rgba(22,104,227,0.5); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(17,24,39,0.09); }
.bcard__thumb { aspect-ratio: 16 / 9; overflow: hidden; background: #0C1322; }
.bcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.bcard__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.bcard__kicker { display: flex; align-items: center; gap: 8px; min-height: 16px; }
.bcard__cat { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #1668E3; }
.bcard__status { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.bcard__status--draft { background: #FEF3C7; color: #92400E; }
.bcard__status--approved { background: #DBEAFE; color: #1E40AF; }
.bcard__title { margin: 0; font-family: 'Anton', sans-serif; font-weight: 400; font-size: 22px; line-height: 1.14; color: #111827; letter-spacing: 0.005em; }
.bcard__desc { margin: 0; font-size: 14.5px; line-height: 1.55; color: #6B7280; text-wrap: pretty; }
.bcard__meta { margin-top: auto; padding-top: 6px; font-size: 12.5px; color: #9CA3AF; display: flex; align-items: center; gap: 8px; }

/* ---------- Post header ---------- */
.post__head { background: #fff; padding: clamp(28px, 5vw, 46px) 0 0; }
.post__head-in { padding-left: 20px; padding-right: 20px; }
.post__head .breadcrumb a { color: #6B7280; }
.post__head .breadcrumb a:hover { color: #1668E3; }
.post__eyebrow { margin-top: 8px; }
.post__title { margin: 10px 0 0; font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(30px, 5.6vw, 50px); line-height: 1.05; color: #111827; max-width: 860px; text-wrap: balance; }
.post__dek { margin: 14px 0 0; font-size: 18px; line-height: 1.5; color: #4B5563; max-width: 720px; text-wrap: pretty; }
.post__meta { margin: 18px 0 0; font-size: 13.5px; color: #6B7280; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.post__meta .post__dot { color: #C7CDD8; }
.post__hero { margin-top: 26px; }
.post__hero-img { width: 100%; height: auto; border-radius: 6px; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.post__draftflag { margin-top: 14px; display: inline-block; background: #FEF3C7; color: #92400E; font-weight: 800; font-size: 12.5px; letter-spacing: 0.04em; padding: 7px 14px; border-radius: 6px; }

/* ---------- Post body ---------- */
.post__bodywrap { padding-top: clamp(34px, 5vw, 52px); }
.post__body { margin: 0 auto; }
.post__body h2 { margin: 40px 0 14px; font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(24px, 4vw, 32px); line-height: 1.12; color: #111827; letter-spacing: 0.005em; }
.post__body h3 { margin: 30px 0 10px; font-size: 20px; font-weight: 800; line-height: 1.25; color: #111827; }
.post__body h4 { margin: 24px 0 8px; font-size: 16.5px; font-weight: 800; color: #1F2937; }
.post__body > p:first-child { font-size: 18px; color: #1F2937; }
.post__body ul, .post__body ol { margin: 0 0 18px; padding-left: 22px; }
.post__body li { font-size: 16.5px; line-height: 1.7; color: #374151; margin: 0 0 8px; }
.post__body blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 4px solid #1668E3; }
.post__body blockquote p { margin: 0; font-size: 18px; line-height: 1.6; color: #1F2937; font-style: italic; }
.post__body code { background: #F3F4F6; border: 1px solid #E5E7EB; border-radius: 4px; padding: 1px 6px; font-size: 0.9em; color: #1F2937; }
.post__body hr { border: 0; border-top: 1px solid #E5E7EB; margin: 34px 0; }
.post__cta { margin-top: 40px; padding-top: 28px; border-top: 1px solid #E5E7EB; display: flex; flex-wrap: wrap; gap: 12px; }
.post__cta .btn { padding: 14px 22px; font-size: 16px; }
/* The CTA lives inside .post__body.prose, and site.css's `.prose a {color:#1668E3}`
   (0-1-1) out-specifies `.btn {color:#fff}` (0-1-0) — which painted the button
   label blue-on-blue and made the phone number unreadable. Restore white labels
   at 0-2-0 without touching site.css. */
.post__body .btn,
.post__body .btn:hover,
.post__body .btn--navy,
.post__body .btn--navy:hover { color: #fff; text-decoration: none; }

/* ---------- FAQ ---------- */
.faq__list { display: grid; gap: 14px; max-width: 820px; }
.faq__item { background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; padding: 20px 22px; }
.faq__q { margin: 0 0 8px; font-size: 17.5px; font-weight: 800; color: #111827; line-height: 1.3; text-transform: none; }
.faq__a p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; color: #4B5563; }
.faq__a p:last-child { margin-bottom: 0; }

@media (min-width: 800px) {
  .post__head-in, .post__hero { max-width: 1100px; }
}

/* NOTE ON THE NAV BREAKPOINT
   "Blog" is now in the nav on EVERY page, so the mobile-nav breakpoint was
   raised from 860px to 1100px in css/site.css (7 items no longer fit until
   .topbar__in stops compressing at its 1100px max-width). Blog pages inherit
   that from site.css — there is deliberately no duplicate of it here, so the
   breakpoint lives in exactly one place. The matching JS thresholds are in
   build.py's SCRIPTS block, index.html's inline script, and _blog/shell.py. */