/* GDOING — blog experience styles (listing, category, single post).
   SKIN v3 pass: wide two-column post layout with a sticky contact
   rail, in-article conversion callout, richer article typography,
   pill filter chips and no-image card placeholders.
   Owned by the blog task; loaded after gdoing.css on blog pages.
   Prefix: gdb-. Reuses skin-v3 primitives from gdoing.css
   (.gd-btn, .gd-kicker, .gd-news__card, .gd-crumbs, .repair-box,
   --gd-* / --gd3-* tokens); everything here only layers on top —
   no engine overrides beyond the blog surfaces. */

/* ════════════════════════════════════════════════════════════
   1. Listing shell — /blog/ + /blog/category/{slug}/
   ════════════════════════════════════════════════════════════ */
.gdb-blog { background: #fff; padding: clamp(28px, 4vw, 48px) 0 clamp(52px, 7vw, 84px); }

.gdb-head { max-width: 860px; margin: 0 0 26px; }
.gdb-head .gd-kicker { margin-bottom: 10px; }
.gdb-head .gd-kicker a { color: inherit; text-decoration: none; }
.gdb-head .gd-kicker a:hover { text-decoration: underline; }
.gdb-head h1 {
  font-size: clamp(30px, 4.2vw, 44px);
  font-weight: 800; line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--gd-ink);
  margin: 0 0 12px;
}
.gdb-head__lede {
  font-size: 15.5px; line-height: 1.7;
  color: var(--gd-text);
  max-width: 720px; margin: 0;
}

/* ── Category filter chips: white bordered pills, active = red ── */
.gdb-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; }
.gdb-cats a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px;
  background: #fff;
  border: 1px solid var(--gd-line); border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 1;
  color: var(--gd-ink); text-decoration: none;
  transition: color .15s ease, border-color .15s ease,
              background .15s ease, box-shadow .15s ease;
}
.gdb-cats__n { font-size: 11px; font-weight: 600; color: var(--gd-muted); }
.gdb-cats a:hover {
  border-color: rgba(181, 5, 0, .45);
  color: var(--gd-red);
  box-shadow: var(--gd3-card-shadow);
}
.gdb-cats a:focus-visible { outline: none; box-shadow: var(--gd3-focus); }
.gdb-cats a.is-active { background: var(--gd-red); border-color: var(--gd-red); color: #fff; }
.gdb-cats a.is-active .gdb-cats__n { color: rgba(255, 255, 255, .8); }
.gdb-cats a.is-active:hover { background: var(--gd-red-dark); border-color: var(--gd-red-dark); color: #fff; }

/* ── Card grid (gd-news__card pattern): 3 → 2 → 1 columns ──── */
.gdb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }

/* v3 card hover — matches the site-wide card pattern */
.gdb-grid .gd-news__card, .gdb-related .gd-news__card {
  border-radius: 10px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* While a lazy card image is still loading (or fails), show the neutral
   band instead of a stark white hole. */
.gdb-grid .gd-news__img, .gdb-related .gd-news__img { background: var(--gd-band); }
.gdb-grid .gd-news__card:hover, .gdb-related .gd-news__card:hover {
  border-color: rgba(181, 5, 0, .45);
  box-shadow: var(--gd3-card-shadow);
  transform: translateY(-3px);
}

/* Small red uppercase category label above the card title */
.gdb-card__cat {
  display: inline-block; align-self: center;
  font-size: 11px; font-weight: 700; line-height: 1.3;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gd-red); text-decoration: none;
}
a.gdb-card__cat:hover { color: var(--gd-red-dark); text-decoration: underline; }

/* ── No-image placeholder: band + wrench glyph (keeps rhythm) ──
   Applied together with .gd-news__img, so the 16/9 ratio is inherited. */
.gdb-ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--gd-band);
  color: var(--gd-muted);
  border-bottom: 1px solid var(--gd-line);
}
.gdb-ph svg { width: 48px; height: 48px; opacity: .85; }

/* ── Pagination (v3: ghost/red .gd-btn pair + info pill) ────── */
.gdb-pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 16px; margin-top: 44px;
}
.gdb-pager .gd-btn { min-height: 44px; }
.gdb-pager__info {
  font-size: 13px; font-weight: 600; color: var(--gd-muted);
  padding: 8px 14px;
  background: var(--gd-band);
  border: 1px solid var(--gd-line); border-radius: 999px;
}

/* ── Empty state ───────────────────────────────────────────── */
.gdb-empty { text-align: center; padding: 44px 0 20px; }
.gdb-empty h2 { font-size: 22px; font-weight: 700; color: var(--gd-ink); margin: 0 0 20px; }

/* ════════════════════════════════════════════════════════════
   2. Single post — /{slug}/ : article + sticky contact rail
   ════════════════════════════════════════════════════════════ */
.gdb-post { background: #fff; padding: 18px 0 clamp(48px, 7vw, 72px); }

/* Two columns on desktop: article (≤760px) + 340px aside filling
   the ws-container; the aside stacks under the article ≤1024px. */
.gdb-post__inner {
  display: grid;
  grid-template-columns: minmax(0, 760px) 340px;
  justify-content: space-between;
  gap: clamp(32px, 4vw, 48px);
}
.gdb-post__article { max-width: 760px; min-width: 0; }
.gdb-post__aside { min-width: 0; }

/* Sticky inner wrapper — the aside grid item stretches to the row
   height, so the cards can follow the reader down the page. */
.gdb-aside {
  position: sticky; top: 90px;
  display: flex; flex-direction: column; gap: 18px;
}

/* ── Aside cards ───────────────────────────────────────────── */
.gdb-scard {
  background: #fff;
  border: 1px solid var(--gd-line);
  border-radius: 10px;
  box-shadow: var(--gd3-card-shadow);
  padding: 22px 22px 24px;
}
.gdb-scard--contact { border-top: 4px solid var(--gd-red); }

.gdb-scard__kicker { font-size: 11px; letter-spacing: .12em; margin: 0 0 12px; }
.gdb-scard__kicker::before { width: 18px; }

.gdb-scard__phone {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: clamp(22px, 1.9vw, 25px); font-weight: 800; line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--gd-ink); text-decoration: none;
  margin: 0 0 12px;
  transition: color .15s ease;
}
.gdb-scard__phone svg { flex: 0 0 auto; color: var(--gd-red); }
.gdb-scard__phone:hover { color: var(--gd-red); }

.gdb-scard__hours {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; line-height: 1.5; color: var(--gd-text);
  margin: 0 0 16px;
}
.gdb-scard__hours svg { flex: 0 0 auto; color: var(--gd-muted); }

.gdb-scard__btn { display: flex; width: 100%; min-height: 46px; }

.gdb-scard__note {
  font-size: 12.5px; line-height: 1.5; color: var(--gd-muted);
  text-align: center; margin: 10px 0 0;
}

/* Services quick-links card */
.gdb-scard__title {
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  color: var(--gd-ink); margin: 0 0 6px;
}
.gdb-scard__list { list-style: none; margin: 0; padding: 0; }
.gdb-scard__list li { margin: 0; }
.gdb-scard__list li + li { border-top: 1px solid var(--gd-line); }
.gdb-scard__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; padding: 10px 2px;
  font-size: 14.5px; font-weight: 600;
  color: var(--gd-ink); text-decoration: none;
  transition: color .15s ease;
}
.gdb-scard__list a::after {
  content: "→";
  color: var(--gd-muted); font-weight: 400;
  transition: color .15s ease, transform .15s ease;
}
.gdb-scard__list a:hover { color: var(--gd-red); }
.gdb-scard__list a:hover::after { color: var(--gd-red); transform: translateX(3px); }

/* ── Breadcrumbs (reuse .gd-crumbs; tighten for the column) ─── */
.gdb-post .gd-crumbs { padding: 0; margin: 0 0 22px; font-size: 13px; row-gap: 4px; }
.gdb-post .gd-crumbs span[aria-current] {
  color: var(--gd-muted); font-weight: 500;
  overflow-wrap: anywhere;
}

.gdb-post__title {
  font-size: clamp(30px, 4.4vw, 42px);
  font-weight: 800; line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--gd-ink);
  margin: 0 0 14px;
}

/* Meta line: author · date · reading time · category */
.gdb-post__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  font-size: 13.5px; color: var(--gd-muted);
  margin: 0 0 22px;
}
.gdb-post__meta a { color: var(--gd-red); font-weight: 600; text-decoration: none; }
.gdb-post__meta a:hover { color: var(--gd-red-dark); text-decoration: underline; }
.gdb-post__metadot { opacity: .55; }

/* Featured image — subtle frame */
.gdb-post__hero {
  aspect-ratio: 16 / 9;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--gd-line);
  background: var(--gd-band);
  margin: 0 0 24px;
}
.gdb-post__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Lede (post excerpt — rendered only when distinct from the body) */
.gdb-post__lede {
  font-size: 18px; line-height: 1.65; font-weight: 500;
  color: var(--gd-ink); margin: 0 0 20px;
}

/* ── Article typography ────────────────────────────────────────
   The div also keeps the engine class .ws-post__body so the
   migrated-content fixes in gdoing.css (tables, inline icon
   sizing) still apply; these rules load later and win. */
.gdb-post__body { background: transparent; padding: 0; border-radius: 0; box-shadow: none; }
.gdb-post__body p, .gdb-post__body li { font-size: 16px; line-height: 1.75; color: var(--gd-text); }
.gdb-post__body p { margin: 0 0 18px; }
.gdb-post__body > p:last-child { margin-bottom: 0; }
.gdb-post__body h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700; line-height: 1.3;
  color: var(--gd-ink);
  margin: 42px 0 16px;
}
.gdb-post__body h3 { font-size: 20px; font-weight: 700; line-height: 1.35; color: var(--gd-ink); margin: 32px 0 12px; }
.gdb-post__body h4 { font-size: 17px; font-weight: 700; color: var(--gd-ink); margin: 26px 0 8px; }
.gdb-post__body > h2:first-child,
.gdb-post__body > h3:first-child { margin-top: 0; }
/* critical.css resets ul,ol{list-style:none} globally — restore markers here */
.gdb-post__body ul, .gdb-post__body ol { margin: 0 0 18px; padding-left: 24px; }
.gdb-post__body ul { list-style: disc; }
.gdb-post__body ul ul { list-style: circle; margin: 8px 0 0; }
.gdb-post__body ol { list-style: decimal; }
.gdb-post__body ol ol { margin: 8px 0 0; }
.gdb-post__body li { margin: 0 0 10px; }
.gdb-post__body li::marker { color: var(--gd-red); font-weight: 600; }
.gdb-post__body a { color: var(--gd-red); text-decoration: underline; text-underline-offset: 2px; }
.gdb-post__body a:hover { color: var(--gd-red-dark); }
.gdb-post__body img { max-width: 100%; height: auto; border-radius: 8px; margin: 22px 0; }
.gdb-post__body figure { margin: 22px 0; }
.gdb-post__body figure img { margin: 0; border-radius: 8px; }
.gdb-post__body figcaption { font-size: 13px; color: var(--gd-muted); text-align: center; margin-top: 8px; }
.gdb-post__body blockquote {
  margin: 26px 0; padding: 16px 20px;
  border-left: 3px solid var(--gd-red);
  background: var(--gd-band); border-radius: 0 8px 8px 0;
  color: var(--gd-ink);
}
.gdb-post__body blockquote p { color: var(--gd-ink); margin: 0 0 10px; }
.gdb-post__body blockquote p:last-child { margin-bottom: 0; }
.gdb-post__body hr { border: 0; border-top: 1px solid var(--gd-line); margin: 32px 0; }
.gdb-post__body iframe { max-width: 100%; border-radius: 8px; }

/* Tables scroll inside the column instead of breaking the layout */
.gdb-post__body table {
  display: block; width: 100%; max-width: 100%;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 24px 0;
}
.gdb-post__body table th, .gdb-post__body table td {
  border: 1px solid var(--gd-line);
  padding: 10px 14px; text-align: left; vertical-align: top;
}
.gdb-post__body table th { background: var(--gd-band); color: var(--gd-ink); font-weight: 700; }

/* ── Tags row ──────────────────────────────────────────────── */
.gdb-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 28px 0 0; padding-top: 22px;
  border-top: 1px solid var(--gd-line);
}
.gdb-tags__label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gd-muted); margin-right: 4px;
}
.gdb-tags a {
  display: inline-flex; align-items: center;
  padding: 8px 13px;
  background: var(--gd-band);
  border: 1px solid var(--gd-line); border-radius: 999px;
  font-size: 12.5px; font-weight: 600; line-height: 1;
  color: var(--gd-ink); text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.gdb-tags a:hover { color: var(--gd-red); border-color: rgba(181, 5, 0, .45); }

/* ── Prev / next: two ghost buttons ────────────────────────── */
.gdb-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }
.gdb-pn .gd-btn { width: 100%; min-height: 44px; line-height: 1.35; padding: 12px 16px; }
.gdb-pn__prev { justify-content: flex-start; text-align: left; }
.gdb-pn__next { justify-content: flex-end; text-align: right; }

/* ── Related posts band ────────────────────────────────────── */
.gdb-related {
  background: var(--gd-band);
  border-top: 1px solid var(--gd-line);
  margin-top: clamp(44px, 6vw, 64px);
  padding: clamp(44px, 6vw, 64px) 0;
}
.gdb-related .gd-news__card { background: #fff; }
.gdb-related__more { text-align: center; margin-top: 34px; }

/* ════════════════════════════════════════════════════════════
   3. Responsive
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .gdb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }

  /* Single column: aside content flows AFTER the article. */
  .gdb-post__inner { display: block; }
  .gdb-post__aside { margin-top: 40px; }
  .gdb-aside {
    position: static; top: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 18px;
    align-items: start;
  }
}

@media (max-width: 700px) {
  .gdb-grid { grid-template-columns: 1fr; }
  .gdb-pn { grid-template-columns: 1fr; }
  .gdb-pn__next { justify-content: flex-start; text-align: left; }
}

@media (max-width: 640px) {
  .gdb-blog { padding-top: 22px; }
  .gdb-post { padding-top: 12px; }
  .gdb-post__title { font-size: clamp(26px, 7.4vw, 32px); }
  .gdb-post__body p, .gdb-post__body li { font-size: 15.5px; }
  .gdb-post__hero { border-radius: 8px; }

  /* Comfortable tap targets (≥44px) */
  .gdb-cats { gap: 9px; }
  .gdb-cats a { padding: 13px 17px; min-height: 44px; font-size: 13.5px; }
  .gdb-tags a { padding: 12px 15px; min-height: 44px; font-size: 13px; }

  .gdb-post__aside { margin-top: 32px; }
  .gdb-scard { padding: 20px 18px 22px; }
  .gdb-scard__phone { font-size: 24px; }
}

/* Listing card titles are now H2 (heading hierarchy: h1 → h2) — same look as before */
.gd-news__body h2 { font-size: 17px; font-weight: 600; line-height: 1.45; margin: 0; }
.gd-news__body h2 a { color: var(--gd-ink, #1c1c1e); text-decoration: none; }
.gd-news__body h2 a:hover { color: var(--gd-red, #b50500); }
.gdb-blog .gd-crumbs { margin-bottom: 22px; }