/* ===== Blog =============================================================
   Long-form article typography. Deliberately its own stylesheet rather than
   Elementor widget classes: those are keyed to per-page data-ids, so they do
   not survive being reused across posts.

   Colours and type follow the site: #fca311 accent, #111 body copy,
   Red Hat Display for headings to match the rest of the pages.
   ======================================================================== */

.udb-post {
  max-width: 760px;
  margin: 0 auto;
  padding: 140px 24px 80px;
  font-family: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #111111;
  font-size: 18px;
  line-height: 1.7;
}

.udb-crumbs {
  font-size: 14px;
  color: #6b6b6b;
  margin-bottom: 28px;
}
.udb-crumbs a { color: #6b6b6b; text-decoration: none; }
.udb-crumbs a:hover { color: #fca311; text-decoration: underline; }

.udb-eyebrow {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b07c12;
  font-weight: 600;
  margin: 0 0 10px;
}

.udb-post h1 {
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}

.udb-standfirst {
  font-size: 21px;
  line-height: 1.55;
  color: #444444;
  margin: 0 0 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid #e6e6e6;
}

.udb-post-body h2 {
  font-size: 27px;
  line-height: 1.25;
  font-weight: 700;
  margin: 52px 0 16px;
  scroll-margin-top: 120px;
}

.udb-post-body h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 34px 0 12px;
}

.udb-post-body p { margin: 0 0 20px; }

.udb-post-body ul {
  margin: 0 0 24px;
  padding-left: 22px;
}
.udb-post-body li { margin-bottom: 10px; }

.udb-post-body a {
  color: #a9700a;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.udb-post-body a:hover { color: #fca311; }

.udb-post-body strong { font-weight: 700; }

/* wide tables scroll inside their own box rather than pushing the page */
.udb-table-wrap {
  overflow-x: auto;
  margin: 0 0 28px;
  -webkit-overflow-scrolling: touch;
}
.udb-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  min-width: 460px;
}
.udb-table-wrap th,
.udb-table-wrap td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid #e6e6e6;
  vertical-align: top;
}
.udb-table-wrap thead th {
  background: #f7f6f3;
  font-weight: 700;
  border-bottom: 2px solid #d8d8d8;
}
.udb-table-wrap tbody tr:last-child td { border-bottom: none; }

.udb-post-faq { margin-top: 8px; }
.udb-faq-item {
  border-top: 1px solid #e6e6e6;
  padding: 22px 0 4px;
}
.udb-faq-item h3 {
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 10px;
}
.udb-faq-item p { margin: 0 0 16px; }

.udb-sources {
  margin-top: 52px;
  padding: 24px 26px;
  background: #f7f6f3;
  border-radius: 3px;
  font-size: 15px;
}
.udb-sources h2 {
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.udb-sources ul { margin: 0 0 14px; padding-left: 20px; }
.udb-sources li { margin-bottom: 7px; }
.udb-sources a { color: #a9700a; }
.udb-disclaimer { margin: 0; color: #666666; font-size: 14px; }

.udb-cta {
  margin-top: 44px;
  padding: 28px 30px;
  border: 2px solid #fca311;
  border-radius: 3px;
}
.udb-cta h2 { font-size: 22px; margin: 0 0 10px; }
.udb-cta p { margin: 0; }
.udb-cta a { color: #a9700a; font-weight: 600; }

/* ── index ──────────────────────────────────────────────────────────────── */
.udb-blog-index { max-width: 900px; }

.udb-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.udb-card {
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  padding: 26px 24px;
  background: #ffffff;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.udb-card:hover {
  border-color: #fca311;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}
.udb-card h2 {
  font-size: 21px;
  line-height: 1.3;
  margin: 0 0 12px;
}
.udb-card h2 a { color: #111111; text-decoration: none; }
.udb-card h2 a:hover { color: #a9700a; }
.udb-card p { margin: 0 0 14px; font-size: 16px; color: #555555; }
.udb-more a {
  color: #a9700a;
  font-weight: 600;
  text-decoration: none;
  font-size: 15px;
}
.udb-more a:hover { text-decoration: underline; }

@media (max-width: 767px) {
  .udb-post { padding: 110px 18px 60px; font-size: 17px; }
  .udb-standfirst { font-size: 19px; }
  .udb-post-body h2 { font-size: 23px; margin-top: 40px; }
  .udb-sources, .udb-cta { padding: 20px 18px; }
}

/* ── blog index hero banner ─────────────────────────────────────────────────
   Full-bleed band under the fixed header. The image is an <img> rather than a
   CSS background so it can carry fetchpriority="high" and be discovered by the
   preload scanner - a background-image is not found until the CSS is parsed,
   which delays LCP on the one element that is the LCP.
   It is decorative (the text sits over it, not in it), so alt is empty. */
.udb-hero {
  position: relative;
  isolation: isolate;
  /* the <header> element is static and already occupies 100px of flow; only
     its inner section is fixed. An extra margin here doubles the gap. */
  margin-top: 0;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #1d1d1d;
}

.udb-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  z-index: -2;
}

/* readable white text over an unpredictable photograph */
.udb-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.72) 100%);
}

.udb-hero__inner {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 56px 24px 44px;
  color: #ffffff;
  font-family: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.udb-hero__inner h1 {
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.12;
  font-weight: 700;
  margin: 0 0 14px;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.udb-hero__standfirst {
  font-size: 19px;
  line-height: 1.55;
  margin: 0;
  max-width: 640px;
  color: rgba(255, 255, 255, 0.92);
}

.udb-crumbs--onhero { color: rgba(255, 255, 255, 0.8); margin-bottom: 18px; }
.udb-crumbs--onhero a { color: rgba(255, 255, 255, 0.8); }
.udb-crumbs--onhero a:hover { color: #fca311; }

/* the index no longer needs the header padding the article pages use */
.udb-blog-index { padding-top: 56px; }

@media (max-width: 767px) {
  .udb-hero { min-height: 260px; }
  .udb-hero__inner { padding: 36px 18px 30px; }
  .udb-hero__standfirst { font-size: 17px; }
  .udb-blog-index { padding-top: 40px; }
}

/* ── post hero ───────────────────────────────────────────────────────────── */
.udb-hero--post { min-height: 380px; }

/* the post hero art is real photography of the work, so it is content rather
   than decoration and carries a real alt */
.udb-hero--post .udb-hero__inner h1 { font-size: clamp(27px, 4.2vw, 40px); }

.udb-eyebrow--onhero {
  color: #ffd08a;
  margin-bottom: 8px;
}

/* the banner already provides the space the article padding was giving */
.udb-post--hasHero { padding-top: 44px; }
.udb-post--hasHero .udb-standfirst { margin-top: 0; }

@media (max-width: 767px) {
  .udb-hero--post { min-height: 250px; }
  .udb-post--hasHero { padding-top: 32px; }
}