/* Final mobile-first guard for the shared blog article template.
   This file loads last so an article can never retain desktop grid tracks on a
   phone, even when a hosting cache serves an older shared stylesheet. */
.page-blog-article { overflow-x:clip; }
.page-blog-article .blog-reference-grid {
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) !important;
}
.page-blog-article .blog-reference-grid > * { min-width:0 !important; max-width:100%; }
.page-blog-article .blog-article-column { position:relative; min-width:0; }
.page-blog-article .blog-article-breadcrumb {
  position:absolute;
  bottom:calc(100% + 12px);
  left:4px;
  z-index:1;
}
.page-blog-article .blog-article-breadcrumb .blog-crumb {
  margin:0;
  color:var(--ink-soft);
}
.page-blog-article .blog-reference-aside {
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) !important;
  min-width:0 !important;
}
.page-blog-article .blog-enquiry-card,
.page-blog-article .blog-reference-aside .blog-related,
.page-blog-article .blog-reference-aside .blog-service-links { width:100% !important; min-width:0 !important; }
/* Older article rules assigned related/services to a second grid column.  Do
   not let those inherited placements create an implicit narrow column on a
   one-column phone or tablet layout. */
.page-blog-article .blog-reference-aside > .blog-enquiry-card,
.page-blog-article .blog-reference-aside > .blog-related,
.page-blog-article .blog-reference-aside > .blog-service-links {
  grid-column:auto !important;
  grid-row:auto !important;
}
.page-blog-article .blog-detail-card .blog-hero__media { height:auto !important; aspect-ratio:1.36; }
.page-blog-article .blog-detail-card .blog-hero h1 { max-width:none; overflow-wrap:anywhere; }
/* Keep the editorial copy on a clean left edge. Headings must not use CSS
   justification because it stretches their words across a line. */
.page-blog-article .blog-detail-card .blog-hero__copy,
.page-blog-article .blog-detail-card .blog-crumb,
.page-blog-article .blog-detail-card .blog-article__category,
.page-blog-article .blog-detail-card .blog-hero h1,
.page-blog-article .blog-detail-card .blog-hero__lede,
.page-blog-article .blog-detail-card .blog-article__reading,
.page-blog-article .blog-detail-card .blog-prose,
.page-blog-article .blog-detail-card .blog-prose h2,
.page-blog-article .blog-detail-card .blog-prose h3,
.page-blog-article .blog-detail-card .blog-prose p,
.page-blog-article .blog-detail-card .blog-prose li {
  text-align:left !important;
}
/* Use the full text area inside the editorial card on desktop as requested.
   Earlier blog rules capped the title, introduction and body paragraphs in
   characters, leaving a large unused area beside the copy. */
.page-blog-article .blog-detail-card .blog-hero h1,
.page-blog-article .blog-detail-card .blog-hero__lede,
.page-blog-article .blog-detail-card .blog-article__reading,
.page-blog-article .blog-detail-card .blog-prose,
.page-blog-article .blog-detail-card .blog-prose > p,
.page-blog-article .blog-detail-card .blog-prose > ul,
.page-blog-article .blog-detail-card .blog-prose > ol {
  width:100% !important;
  max-width:none !important;
}
/* The site-wide h1/h2 rule caps headings at 20 characters and balances their
   line breaks. Article headings need the entire editorial column instead. */
.page-blog-article .blog-detail-card .blog-hero h1,
.page-blog-article .blog-detail-card .blog-prose h2,
.page-blog-article .blog-detail-card .blog-prose h3 {
  display:block;
  width:100% !important;
  max-width:none !important;
  text-wrap:wrap !important;
}
/* Apply the same full-width reading line to the highlighted point cards. */
.page-blog-article .blog-detail-card .blog-info-card,
.page-blog-article .blog-detail-card .blog-info-card p {
  max-width:none !important;
}
.page-blog-article .blog-detail-card .blog-info-card p {
  width:100% !important;
  text-wrap:wrap !important;
}
/* A calmer editorial scale keeps long article headings compact without
   weakening the distinction between the page title and section headings. */
.page-blog-article .blog-detail-card .blog-hero h1 {
  font-size:clamp(30px, 2.3vw, 38px) !important;
}
.page-blog-article .blog-detail-card .blog-prose h2 {
  font-size:clamp(24px, 1.8vw, 29px) !important;
}
.page-blog-article .blog-detail-card .blog-prose h3 {
  font-size:clamp(19px, 1.35vw, 22px) !important;
}
.page-blog-article .blog-detail-card .blog-hero__lede,
.page-blog-article .blog-detail-card .blog-prose {
  font-size:16px !important;
}
/* Compact, reference-style article details. The line can wrap naturally
   rather than squeezing labels or icons at smaller widths. */
.page-blog-article .blog-detail-card .blog-article__meta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 18px;
  width:100%;
  max-width:none;
  margin:18px 0 0;
  color:var(--ink-soft);
  font-size:13px;
  line-height:1.4;
  text-align:left !important;
}
.page-blog-article .blog-detail-card .blog-article__meta span {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
  white-space:nowrap;
}
.page-blog-article .blog-detail-card .blog-article__meta svg {
  flex:0 0 auto;
  width:16px;
  height:16px;
  color:var(--clay);
}

/* Editorial content redesign: each section becomes a calm reading surface,
   with clear hierarchy and useful emphasis rather than decorative clutter. */
.page-blog-article .blog-detail-card .blog-prose {
  display:grid;
  gap:18px;
  padding-top:clamp(28px, 3.4vw, 44px);
  background:linear-gradient(180deg, rgba(217,195,154,.08), transparent 18%);
}
.page-blog-article .blog-content-intro {
  position:relative;
  overflow:hidden;
  padding:clamp(20px, 2.4vw, 28px) clamp(18px, 2.5vw, 30px);
  border:1px solid rgba(20,19,42,.11);
  border-left:3px solid var(--gold);
  border-radius:10px;
  background:linear-gradient(135deg, #fffdf8, var(--paper-warm));
  box-shadow:0 12px 26px rgba(20,19,42,.045);
}
.page-blog-article .blog-content-intro::after {
  position:absolute;
  top:-34px;
  right:-20px;
  width:126px;
  height:126px;
  border:1px solid rgba(217,195,154,.42);
  border-radius:50%;
  content:"";
  pointer-events:none;
}
.page-blog-article .blog-content-intro > p:last-child,
.page-blog-article .blog-content-section > p:last-child { margin-bottom:0; }
.page-blog-article .blog-content-section {
  position:relative;
  padding:clamp(24px, 3vw, 38px) clamp(18px, 2.7vw, 34px);
  border:1px solid rgba(20,19,42,.1);
  border-radius:12px;
  background:var(--white);
  box-shadow:0 13px 30px rgba(20,19,42,.045);
}
.page-blog-article .blog-section-heading {
  display:grid;
  grid-template-columns:25px minmax(0, 1fr);
  align-items:center;
  gap:12px;
  margin:0 0 18px;
  padding-bottom:15px;
  border-bottom:1px solid var(--line);
}
.page-blog-article .blog-section-mark {
  position:relative;
  width:20px;
  height:20px;
  border:1px solid rgba(217,195,154,.7);
  border-radius:50%;
  background:var(--paper-warm);
}
.page-blog-article .blog-section-mark::before,
.page-blog-article .blog-section-mark::after {
  position:absolute;
  top:50%;
  left:50%;
  background:var(--clay);
  content:"";
  transform:translate(-50%, -50%);
}
.page-blog-article .blog-section-mark::before { width:7px; height:1px; }
.page-blog-article .blog-section-mark::after { width:1px; height:7px; }
.page-blog-article .blog-detail-card .blog-section-heading h2 {
  margin:0;
  padding:0;
  border:0;
  color:var(--ink);
  font-weight:650;
}
.page-blog-article .blog-content-section > p { margin:0 0 18px; }
.page-blog-article .blog-detail-card .blog-info-card {
  position:relative;
  grid-template-columns:36px minmax(0, 1fr);
  gap:14px;
  margin:14px 0 0;
  padding:18px;
  border:1px solid rgba(20,19,42,.1);
  border-left:2px solid var(--gold);
  border-radius:9px;
  background:linear-gradient(135deg, #fff, var(--paper-warm));
  box-shadow:0 8px 18px rgba(20,19,42,.035);
}
.page-blog-article .blog-detail-card .blog-info-card__icon {
  display:grid;
  width:30px;
  height:30px;
  place-items:center;
  border:0;
  border-radius:50%;
  background:var(--clay);
  color:var(--gold-lit);
}
.page-blog-article .blog-detail-card .blog-info-card__icon svg { width:14px; height:14px; }
.page-blog-article .blog-detail-card .blog-info-card p { margin:0; }

@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .page-blog-article .blog-content-section,
  .page-blog-article .blog-content-intro,
  .page-blog-article .blog-info-card { transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); }
  .page-blog-article .blog-content-section:hover { transform:translateY(-3px); box-shadow:0 19px 36px rgba(20,19,42,.075); border-color:rgba(217,195,154,.58); }
  .page-blog-article .blog-content-intro:hover { transform:translateY(-2px); box-shadow:0 16px 32px rgba(20,19,42,.07); }
  .page-blog-article .blog-info-card:hover { transform:translateX(4px); box-shadow:0 13px 24px rgba(20,19,42,.075); }
}
@media (prefers-reduced-motion:no-preference) {
  /* Keep content readable even before the observer runs; animate only on entry. */
  .blog-article[data-article-motion="true"] [data-article-reveal] { transition:opacity .56s var(--ease), transform .56s var(--ease); }
  .blog-article[data-article-motion="true"] [data-article-reveal].is-in-view { animation:blog-content-arrive .56s var(--ease) both; }
  @keyframes blog-content-arrive { from { opacity:.35; transform:translateY(16px); } to { opacity:1; transform:none; } }
}

@media (min-width:901px) {
  .page-blog-article .blog-reference-grid {
    grid-template-columns:minmax(0, 1fr) minmax(310px, .35fr) !important;
  }
  .page-blog-article .blog-reference-aside { grid-template-columns:minmax(0, 1fr) !important; }
  .page-blog-article .blog-detail-card .blog-hero__media {
    height:clamp(350px, 31vw, 520px) !important;
    aspect-ratio:auto;
  }
}

@media (max-width:620px) {
  .blog-reference-stage { padding:26px 0 34px; }
  .blog-reference-stage > .wrap { padding-inline:14px; }
  .page-blog-article .blog-article-breadcrumb {
    position:static;
    margin:0 4px 12px;
  }
  .page-blog-article .blog-detail-card .blog-hero { padding:12px 12px 0; }
  .page-blog-article .blog-detail-card .blog-hero__copy { padding:22px 4px 0; }
  .page-blog-article .blog-detail-card .blog-hero h1 { font-size:clamp(25px, 6.8vw, 31px) !important; }
  .page-blog-article .blog-detail-card .blog-prose h2 { font-size:clamp(22px, 6vw, 26px) !important; }
  .page-blog-article .blog-detail-card .blog-prose h3 { font-size:clamp(18px, 5vw, 21px) !important; }
  .page-blog-article .blog-detail-card .blog-hero__lede,
  .page-blog-article .blog-detail-card .blog-prose { font-size:15px !important; }
  .page-blog-article .blog-detail-card .blog-article__meta {
    gap:7px 13px;
    margin-top:16px;
    font-size:12px;
  }
  .page-blog-article .blog-detail-card .blog-article__meta svg { width:15px; height:15px; }
  .page-blog-article .blog-detail-card .blog-prose { gap:14px; padding:24px 16px 28px; }
  .page-blog-article .blog-content-intro,
  .page-blog-article .blog-content-section { padding:20px 16px; border-radius:9px; }
  .page-blog-article .blog-section-heading { grid-template-columns:20px minmax(0, 1fr); gap:9px; margin-bottom:15px; padding-bottom:12px; }
  .page-blog-article .blog-section-mark { width:17px; height:17px; }
  .page-blog-article .blog-detail-card .blog-info-card { grid-template-columns:31px minmax(0, 1fr); gap:11px; padding:14px; }
  .page-blog-article .blog-detail-card .blog-info-card__icon { width:26px; height:26px; }
  .page-blog-article .blog-reference-aside { gap:14px; }
  .blog-enquiry-card,
  .page-blog-article .blog-reference-aside .blog-related,
  .page-blog-article .blog-reference-aside .blog-service-links { padding:18px; border-radius:10px; }
  .blog-enquiry-card input,
  .blog-enquiry-card textarea { font-size:16px; }
  .blog-enquiry-card button { min-height:52px; }
}