/* ============================================================
   blog.css — shared styles for /hennur/ silo (hub + blog pages)
   Loaded after style.css. Keeps blogs visually consistent with
   the rest of the Prestige Battersea site.
   ============================================================ */

/* --- Breadcrumb / banner spacing (house gotcha §8.6.2) --------
   .banner-area already sits below the fixed header and ships with
   margin-bottom:50px in style.css. Tighten it so the H1 sits ~20px
   below the breadcrumb, not ~70px. */
#banner-area { margin-bottom: 14px; }

/* --- Multi-box spacing (§8.6.12) -----------------------------
   Several stacked border-page boxes (main / FAQ / conclusion / grid)
   read too airy by default. Tighten inter-box gap + inner padding. */
#main-content .content.white-bg { margin-bottom: 16px; }
.blog-wrap, .silo-wrap { padding: 8px 14px 18px; }

/* Kill the stacked top-margin on the first heading of each box. */
.blog-wrap > h1:first-child,
.blog-wrap > h2:first-child,
.silo-wrap > h1:first-child,
.silo-wrap > h2:first-child { margin-top: 2px; }

/* Wanted separation on non-first in-flow headings. */
.blog-wrap h2, .silo-wrap h2 { margin-top: 34px; }
.blog-wrap h3, .silo-wrap h3 { margin-top: 22px; }
.blog-wrap p  { line-height: 1.7; margin: 0 0 14px; }
.blog-wrap ul, .silo-wrap ul { line-height: 1.7; margin: 0 0 16px; padding-left: 22px; }
.blog-wrap li, .silo-wrap li { margin-bottom: 6px; }
.blog-wrap .bottomline,
.silo-wrap .bottomline { margin: 10px 0 4px; }

/* --- Featured image below H1 (centered, 600x350) §8.6.6 ------- */
.blog-featured { text-align: center; margin: 6px 0 22px; }
.blog-featured img { max-width: 600px; width: 100%; height: auto; display: inline-block; }

/* --- Per-project card image (centered block) §8.6.6 ----------- */
.blog-card img { display: block; margin: 0 auto 12px; max-width: 600px; width: 100%; height: auto; }
.blog-card { margin-bottom: 8px; }

/* --- Tables scroll on mobile §8.6.10 -------------------------- */
.pw-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 18px 0; }
.blog-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.blog-table th, .blog-table td { border: 1px solid #d9d9d9; padding: 9px 12px; text-align: left; font-size: 15px; vertical-align: top; }
.blog-table th { background: #1065a0; color: #fff; }
.blog-table tr:nth-child(even) td { background: #f4f8fb; }

/* --- Small contextual price note (not a full disclaimer) ------ */
.price-note { font-size: 13px; color: #666; font-style: italic; margin: 6px 0 18px; }

/* --- "Prestige Battersea Blog" interlink grid §8.6.8 ---------- */
.pw-blog-section { margin: 0 0 8px; }
.pw-blog-section h2 { margin: 2px 0 6px; }
.pw-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1000px;
  margin: 0 auto;
}
.pw-blog-grid a { display: block; text-decoration: none; color: #1065a0; }
.pw-blog-grid img { width: 100%; max-width: 600px; height: auto; display: block; margin: 0 auto; border-radius: 6px; }
.pw-blog-grid .pw-blog-label { display: block; margin-top: 8px; font-size: 15px; font-weight: 600; line-height: 1.4; }
@media (max-width: 767px) {
  .pw-blog-grid { grid-template-columns: 1fr; }
}