/* ===================================================================
   Prime Urban Services — Blog
   Additive only. Colours, header and bottom nav come from pus-site.css,
   which is lifted straight out of index.html.
   =================================================================== */

.pus-blog-page a { text-decoration: none; color: inherit; }
.pb-shell { max-width: 720px; margin: 0 auto; padding: 0 16px 90px; }
@media (min-width: 1024px) { .pb-shell { padding: 0 24px 60px; } }

.pus-blog-page .header-logo,
.pus-blog-page .hamburger-btn,
.pus-blog-page .bnav-item,
.pus-blog-page .cat-back-btn { text-decoration: none; color: inherit; }
.pus-blog-page .hamburger-btn { display: flex; flex-direction: column; justify-content: center; }

/* ---- index hero ---- */
.pb-hero { padding: 22px 0 6px; }
.pb-hero h1 { font-size: 26px; font-weight: 800; letter-spacing: -.4px; margin: 0 0 8px; color: var(--text); }
.pb-hero p { font-size: 14px; line-height: 1.65; color: var(--text2); margin: 0; }
@media (min-width: 1024px) { .pb-hero h1 { font-size: 34px; } .pb-hero p { font-size: 15.5px; } }

/* ---- post cards ---- */
.pb-list { display: grid; gap: 12px; margin-top: 20px; }
@media (min-width: 700px) { .pb-list-index { grid-template-columns: repeat(2, 1fr); } }

.pb-card {
  display: block; background: #fff; border: 1.5px solid var(--border);
  border-radius: 16px; padding: 16px; box-shadow: var(--shadow);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.pb-card:hover { transform: translateY(-2px); border-color: rgba(91,46,212,.28); box-shadow: 0 6px 22px rgba(16,10,40,.09); }
.pb-card-k { font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--primary); }
.pb-card-t { font-size: 15.5px; font-weight: 800; color: var(--text); line-height: 1.35; margin: 6px 0 6px; }
.pb-card-e { font-size: 13px; line-height: 1.6; color: var(--text2); }
.pb-card-m { font-size: 11.5px; color: var(--text3); margin-top: 10px; }

/* ---- article ---- */
.pb-article { padding: 20px 0 8px; }
.pb-kicker { font-size: 11px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: var(--primary); }
.pb-article h1 {
  font-size: 26px; font-weight: 800; line-height: 1.24;
  letter-spacing: -.4px; margin: 8px 0 10px; color: var(--text);
}
@media (min-width: 1024px) { .pb-article h1 { font-size: 36px; } }
.pb-meta { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text3); }
.pb-lede {
  font-size: 15.5px; line-height: 1.7; color: var(--text2);
  margin: 16px 0 0; padding-left: 14px; border-left: 3px solid var(--primary-light);
}

.pb-body { margin-top: 26px; }
.pb-body h2 {
  font-size: 19px; font-weight: 800; color: var(--text);
  letter-spacing: -.2px; line-height: 1.32; margin: 30px 0 10px;
}
.pb-body h3 { font-size: 15.5px; font-weight: 700; color: var(--text); margin: 22px 0 8px; }
.pb-body p { font-size: 15px; line-height: 1.75; color: var(--text2); margin: 0 0 15px; }
.pb-body ul, .pb-body ol { margin: 0 0 16px; padding-left: 22px; }
.pb-body li { font-size: 15px; line-height: 1.7; color: var(--text2); margin-bottom: 8px; }
@media (min-width: 1024px) { .pb-body p, .pb-body li { font-size: 16px; } }

.pb-note {
  background: var(--primary-light); border-left: 3px solid var(--primary);
  border-radius: 0 12px 12px 0; padding: 13px 15px; margin: 0 0 18px;
  font-size: 14px; line-height: 1.65; color: var(--text2);
}

/* ---- closing call to action ---- */
.pb-cta {
  margin-top: 32px; background: var(--primary); border-radius: 18px;
  padding: 22px 20px; text-align: center;
}
.pb-cta-t { font-size: 17px; font-weight: 800; color: #fff; }
.pb-cta-s { font-size: 13.5px; color: rgba(255,255,255,.86); margin: 6px 0 14px; line-height: 1.55; }
.pb-cta-btn {
  display: inline-block; background: #fff; color: var(--primary);
  font-size: 13.5px; font-weight: 800; padding: 11px 24px; border-radius: 50px;
}

/* ---- read next ---- */
.pb-more { margin-top: 40px; }
.pb-more h2 { font-size: 17px; font-weight: 800; color: var(--text); margin: 0; }
.pb-empty { padding: 40px 0; text-align: center; color: var(--text3); font-size: 14px; }

.pus-blog-page a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .pb-card { transition: none; } }

/* ===================================================================
   IMAGES
   Every image carries width and height so the browser reserves the
   space before the file arrives. Without that the text jumps as each
   image loads and the reader loses their place mid-sentence.
   =================================================================== */

.pb-cover, .pb-fig { margin: 22px 0; }
.pb-cover img, .pb-fig img, .pb-card-img img {
  display: block; width: 100%; height: auto;
  border-radius: 14px; background: var(--primary-light);
}
.pb-cover img { border-radius: 16px; }
.pb-cover figcaption, .pb-fig figcaption {
  font-size: 12.5px; line-height: 1.55; color: var(--text3);
  margin-top: 9px; padding: 0 2px;
}
.pb-fig { margin: 26px 0; }

/* ---- cards with a thumbnail ---- */
.pb-card.has-img { padding: 0; overflow: hidden; }
.pb-card.has-img .pb-card-body { padding: 15px 16px 16px; }
.pb-card-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--primary-light); }
.pb-card-img img { border-radius: 0; height: 100%; object-fit: cover; }
.pb-card:not(.has-img) .pb-card-body { padding: 0; }

@media (min-width: 1024px) {
  .pb-cover, .pb-fig { margin: 28px 0; }
}

/* ===================================================================
   CITY LINKS
   Every post ends with the cities that actually have a page for the
   service it discusses. The list is generated from the same content
   files the service pages use, so it can never point at a page that
   does not exist.
   =================================================================== */
.pb-cities {
  margin-top: 34px; padding: 20px 18px;
  background: #fff; border: 1.5px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow);
}
.pb-cities h2 { font-size: 17px; font-weight: 800; color: var(--text); margin: 0 0 6px; line-height: 1.3; }
.pb-cities p { font-size: 13.5px; line-height: 1.6; color: var(--text2); margin: 0 0 14px; }
/* One link per line, full text, never truncated.
   The earlier fixed-width grid cut long names off; inline flow ran them
   together into a wall of text. A stacked list gives each link its own
   row and lets long names wrap instead of being clipped. Columns kick in
   on wider screens so 35 rows do not become a very tall block. */
.pb-city-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  margin-top: 14px;
}
@media (min-width: 620px)  { .pb-city-grid { grid-template-columns: repeat(2, 1fr); gap: 2px 18px; } }
@media (min-width: 1000px) { .pb-city-grid { grid-template-columns: repeat(3, 1fr); } }

.pb-city-grid a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px 9px 4px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text2);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  text-decoration: none;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  transition: color .15s, padding-left .15s;
}
.pb-city-grid a::before {
  content: '\203A';
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 15px;
  line-height: 1;
  opacity: .55;
  margin: 0;
}
.pb-city-grid a:hover {
  color: var(--primary);
  padding-left: 9px;
  background: none;
}
.pb-city-grid a:hover::before { opacity: 1; }
.pb-city-grid a + a::before { margin: 0; }



/* ===================================================================
   BREADCRUMBS
   The markup was already here but its styles live in city-service.css,
   which blog pages do not load — so it fell back to a plain stacked
   list. Same look as the city pages now.
   =================================================================== */
.pus-crumbs { padding: 12px 16px 0; max-width: 720px; margin: 0 auto; }
@media (min-width: 1024px) { .pus-crumbs { padding: 16px 24px 0; } }

/* Inline rather than flex. As flex items the separators became their own
   boxes and dropped onto their own lines; as plain inline text the trail
   simply flows and wraps like a sentence. */
.pus-crumbs ol {
  list-style: none; margin: 0; padding: 0;
  font-size: 11.5px; line-height: 1.9; color: var(--text3);
}
.pus-crumbs li { display: inline; list-style: none; margin: 0; padding: 0; }
.pus-crumbs li::marker { content: none; }
.pus-crumbs li + li::before {
  content: '\203A'; color: var(--text3); opacity: .75; margin: 0 7px;
}
.pus-crumbs a { color: var(--text3); text-decoration: none; }
.pus-crumbs a:hover { color: var(--primary); text-decoration: underline; }
.pus-crumbs li[aria-current] { color: var(--text2); font-weight: 600; }