/* ==========================================================================
   Gleaming — Blog article page (Figma desktop 1256:12425 / mobile 1256:15905)
   ========================================================================== */

/* Page background: like the blog listing, everything outside the hero band is
   pure white while the band itself is the #FCFCFC page tone. */
body {
  background: var(--color-white);
}

/* --------------------------------------------------------------------------
   Hero band — full-bleed #FCFCFC card behind the header, radius 40, two 3D
   blue stars clipped at the right edge (Figma group 1256:12435 — identical to
   the blog/contact hero decor, rendered flattened at 604x432).
   -------------------------------------------------------------------------- */
.article-hero {
  position: relative;
  height: 432px;
  margin-top: -174px; /* navbar 96 + secondary bar 78 */
  padding-top: 174px;
  background: var(--color-page-bg);
  border-radius: var(--radius-card); /* all four corners rounded in the design */
  overflow: hidden;
}

.article-hero__stars {
  position: absolute;
  top: 0;
  /* keep the star group aligned with the 1440px-max design canvas */
  right: max(0px, calc((100% - 1440px) / 2));
  /* asset is 604x512 (bottom tip reconstructed for mobile); the band's
     overflow clips it at 432 on desktop, exactly like the Figma render */
  width: 604px;
  height: auto;
  pointer-events: none;
}

.article-hero__content {
  position: relative;
  padding-top: 52px; /* title top at y=226 (226 - 174 header) */
}

.article-hero__title {
  max-width: 603px;
  font-family: var(--font-heading);
  font-weight: 400;
  /* same hero-title style as the blog/contact pages (Frame 2087325831,
     verified 48/1.05 against their genuine Figma refs): 2 lines of 50.4px
     match the 603x100 Figma text box */
  font-size: 48px;
  line-height: 1.05;
  color: var(--color-black);
}

.article-hero__sub {
  max-width: 603px;
  margin-top: 12px;
  font-family: var(--font-heading);
  font-size: var(--text-md); /* 18px */
  line-height: var(--leading-body);
  color: #434343;
}

.article-hero__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px; /* tags row at y+151 (subtitle 27 + 12) */
}

.article-hero__tag {
  display: inline-flex;
  padding: 4px 8px;
  background: var(--color-primary-50);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: var(--leading-body); /* pill height 26 */
  color: var(--color-primary-400);
}

.article-hero__date {
  padding: 4px 8px;
  font-family: var(--font-alt);
  font-size: 12px;
  line-height: var(--leading-body);
  color: var(--color-black);
}

/* --------------------------------------------------------------------------
   Article lead image (Figma image 103: 1273x849 at y=484, radius 40)
   -------------------------------------------------------------------------- */
.article-figure {
  margin-top: 52px; /* band 432 → image 484 */
}

/* Figma places the image at x=86, 1273 wide — 6px in from the container's
   left edge, 1px short of its right edge. */
.article-figure img {
  width: calc(100% - 7px);
  margin-left: 6px;
  height: auto;
  border-radius: var(--radius-card);
}

/* --------------------------------------------------------------------------
   Article body — centered 846px rich-text column (x=297 in the 1440 frame).
   The divider (Line 1) runs from the column edge to the container right edge,
   hence the 3-track grid with the hr spanning tracks 2..3.
   -------------------------------------------------------------------------- */
.article-section {
  margin-top: 96px; /* image ends 1333 → text 1429 */
}

.article {
  position: relative;
  display: grid;
  grid-template-columns: 1fr min(846px, 100%) 1fr;
}

.article > * {
  grid-column: 2;
  min-width: 0;
}

.article p {
  font-family: var(--font-body);
  font-size: var(--text-base); /* 16px */
  line-height: var(--leading-body);
  color: var(--color-text-primary);
}

.article h2 {
  margin-top: 34px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.05; /* 34px */
  color: var(--color-black);
}

.article h3 {
  margin-top: 50px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2; /* 29px */
  color: var(--color-black);
}

.article h2 + h3 { margin-top: 19px; }
.article h2 + p { margin-top: 19px; }
.article h3 + p { margin-top: 10px; }

.article__divider {
  grid-column: 2 / -1; /* Figma Line 1: x=301 → 1359 (1058px wide) */
  width: calc(100% - 5px);
  margin: 24px 0 0 4px;
  border: none;
  border-top: 1px solid #D9D9D9;
}

.article__divider + h2 { margin-top: 26px; }

.article__image {
  width: 100%;
  height: auto;
  margin-top: 92px; /* last p ends 2244 → image 2336 */
  border-radius: var(--radius-card);
}

/* Floating text link right of the inline image (Figma 1256:12426 at
   x=1168, y=2526 — 1097px below the body top, 871px right of the column).
   Same stray node as the contact page's: Roboto 16, default text color. */
.article__aside {
  position: absolute;
  top: 1097px;
  right: 63px; /* aside right edge 63px in from the container's right edge */
  font-family: var(--font-alt);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-text-primary);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Mobile-variant article ("Cleaning Checklist" — GL2 mobile frame 1256:15905
   shows a different article than the desktop frame). Only blog-article.html
   carries the --m twin elements, so none of these selectors can match on the
   standard blog-post pages that share this stylesheet. Hidden ≥768px; the
   <768px block below swaps them in and hides the desktop twins.
   -------------------------------------------------------------------------- */
.article-hero__title--m,
.article-hero__sub--m,
.article--m {
  display: none;
}

/* --------------------------------------------------------------------------
   Latest posts — 3 cards 412x404 (pad 20, thumb 372x200, tags, Read more)
   -------------------------------------------------------------------------- */
.related {
  margin-top: 193px; /* article image ends 3182 → heading 3375 */
}

.related__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 72px;
  line-height: var(--leading-tight); /* 86px */
  text-align: center;
  color: var(--color-black);
}

.related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 44px; /* heading ends 3461 → cards 3505 */
}

.related__grid > li {
  display: flex;
}

.related-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px;
  background: var(--color-card-bg);
  border-radius: var(--radius-card);
  box-shadow: 0 20px 40px rgba(30, 44, 162, 0.06);
}

.related-card__media {
  width: 100%;
  height: auto;
  aspect-ratio: 372 / 200;
  object-fit: cover;
  border-radius: 20px;
}

.related-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 24px; /* thumb ends 220 → content 244 */
}

.related-card__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 28px; /* GL2 related cards use the larger title style */
  line-height: 30px; /* truth: glyphs 3753, pill 3791 → card 404 tall, posts end 3909 */
  color: var(--color-black);
}

.related-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.related-card__tag {
  display: inline-flex;
  padding: 4px 8px;
  background: var(--color-primary-50);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm); /* 14px — pill height 29 */
  line-height: var(--leading-body);
  color: var(--color-primary-400);
}

.related-card__date {
  padding: 4px 8px;
  font-family: var(--font-alt);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-black);
}

.related-card__more {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-top: 34px; /* tags end 71 → button 105 */
  padding: 4px 0;
  font-family: var(--font-alt);
  font-size: var(--text-md); /* 18px */
  line-height: var(--leading-body);
  color: var(--color-primary-400);
}

.related-card__more img {
  width: 24px;
  height: 24px;
}

/* --------------------------------------------------------------------------
   Our services — centered 72px title, 4 cards 305x341, page-control dots
   (same construct as the blog listing page, Figma 1256:12496)
   -------------------------------------------------------------------------- */
.services {
  margin-top: 149px; /* posts end 3909 → section 4058 */
}

.services__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 72px;
  line-height: var(--leading-tight); /* 86px */
  text-align: center;
  color: var(--color-black);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 89px; /* title 86 → cards 175 */
}

.services__grid > li {
  display: flex;
}

/* shared .card overrides (Figma card 305x341, pad 32/24) */
.svc-card {
  flex: 1;
  gap: 0;
  padding: 32px 24px;
  box-shadow: 0 24px 48px -12px rgba(30, 44, 162, 0.10);
}

.svc-card .card__title { margin-top: 16px; }
.svc-card .card__text { margin-top: 16px; }

.svc-card .link-more {
  margin-top: auto;
  padding-top: 24px;
  align-self: flex-start;
}

.services__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 67px;
  margin-top: 23px;
}

.services__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #BCC0E4;
}

.services__dot.is-active {
  background: var(--color-primary-400);
}

/* --------------------------------------------------------------------------
   Ready-to-book CTA — gradient panel (1280x441, pad 79/83); glass 3D broom
   entering from the top-right + two glass sparkles mid-panel (same decor
   cluster as the blog/contact CTA, rendered flattened at 536x441).
   -------------------------------------------------------------------------- */
.article-cta {
  margin-top: 200px;    /* services 4664 → cta 4864 */
  margin-bottom: 189px; /* gap to footer (collapses with footer's 80px margin) */
}

.article-cta__panel {
  position: relative;
  overflow: hidden;
  min-height: 441px;
  border-radius: var(--radius-card);
  background: linear-gradient(112.7deg, var(--color-primary-400) 28%, #A0ABFF 100%);
  padding: 79px 83px;
}

.article-cta__decor {
  position: absolute;
  top: 0;
  right: 0;
  width: 536px;
  height: 441px;
}

.article-cta__content {
  position: relative;
  /* Figma box is 602 but Chrome's Inter measures line 1 at 602.9px — one
     extra px stops "offers" wrapping a line early (same fix as blog.css) */
  max-width: 606px;
}

.article-cta__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
  color: var(--color-white);
}

.article-cta__text {
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: var(--text-md); /* 18px */
  line-height: 1.115; /* 20px — matches the tight Figma leading */
  color: var(--color-white);
}

.article-cta__btn {
  margin-top: 44px;
  width: 343px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--color-primary-400);
}

/* ==========================================================================
   Tablet 768–1023 — hamburger header (96px), compressed grids
   ========================================================================== */
@media (max-width: 1023px) {
  .article-hero {
    margin-top: -96px; /* mobile navbar only */
    padding-top: 96px;
    /* the 3-line 48px title needs more room than the fixed 432px band;
       29px matches the desktop gap under the tag row */
    height: auto;
    min-height: 432px;
    padding-bottom: 29px;
  }

  .article-hero__content {
    padding-top: 120px;
  }

  .article-hero__title {
    max-width: 55%; /* keep the headline clear of the star decor */
  }

  .article-hero__stars {
    right: 0;
    width: min(604px, 55vw);
    height: auto;
  }

  .article-section {
    margin-top: 72px;
  }

  .article__aside {
    display: none;
  }

  .related {
    margin-top: 140px;
  }

  .related__title {
    font-size: 56px;
  }

  .related__grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 40px;
  }

  .services {
    margin-top: 140px;
  }

  .services__title {
    font-size: 56px;
  }

  .services__grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 48px;
  }

  .article-cta {
    margin-top: 140px;
  }

  .article-cta__panel {
    padding: 64px 40px;
  }

  .article-cta__title {
    font-size: 44px;
  }

  .article-cta__content {
    max-width: 60%;
  }

  /* scale the decor down (same 45% treatment as the blog page's identical
     construct) so it stays clear of the text/button at tablet widths */
  .article-cta__decor {
    width: 45%;
    height: auto;
  }
}

/* ==========================================================================
   Mobile < 768 — matches the 402px frame (1256:15905)
   ========================================================================== */
@media (max-width: 767px) {
  /* hero: band 392 tall, title box at y=164 (cap 169 in the cropped truth —
     the old 446/123 values had the 54px iOS status bar baked in) */
  .article-hero {
    height: 392px;
    min-height: 0;      /* the ≤1023 block's min-height:432 must not win here */
    padding-bottom: 0;  /* ditto its 29px bottom padding */
  }

  .article-hero__content {
    padding-top: 69px; /* 165 - navbar 96 */
    transform: translateX(-1px); /* Chrome's Cabinet ink sits 1px right of Figma's */
  }

  .article-hero__title {
    /* Figma box is 259x102: at 32/1.05 the text wraps to exactly 3 lines of
       33.6px in 259px (title 219..320, lede at 332, tags at 392 as designed);
       28px would only make 2 lines here */
    max-width: 259px;
    font-size: 32px;
    line-height: 34px; /* truth caps at 169/203/237 */
  }

  .article-hero__sub {
    max-width: 259px;
    font-size: var(--text-base); /* 16px — truth line 1 measures 238px */
    line-height: 25px; /* truth ink rows y285/y312 */
  }

  .article-hero__meta {
    margin-top: 10px; /* truth pill top y339 */
  }

  /* both pills render their labels in Roboto on mobile (truth "Tag one" is
     ~11% narrower than Inter's measure) */
  .article-hero__tag,
  .related-card__tag {
    font-family: var(--font-alt);
  }

  /* star group 300x295 at x=169, y=43 in the 402 frame. The asset covers
     group columns 0..604-of-726 and rows 61..573-of-714 at desktop scale, so
     at the mobile scale factor (295.19/714.24 = 0.4132) it renders 249.7px
     wide with its top edge 25px below the group top (43 + 25 = 68) and its
     right edge 16.7px past the band's right-edge clip — matching the design's
     own right-side crop of the small star. */
  .article-hero__stars {
    top: 15px; /* truth star cluster spans y 28-217 (was 68 with status bar) */
    right: -17px;
    width: 249.7px;
    height: auto;
  }

  /* lead image 362x241 at y=486, flush with the 20px margins */
  .article-figure {
    margin-top: 40px;
  }

  .article-figure img {
    width: 100%;
    margin-left: 0;
    border-radius: 20px;
  }

  /* article body at y=731 (lead image ends 673) */
  .article-section {
    margin-top: 59px;
  }

  .article h2 {
    margin-top: 30px;
    font-size: 24px;
    line-height: 1.17; /* 28px lines */
  }

  .article h3 {
    margin-top: 40px;
    font-size: 20px;
    line-height: 1.2;
  }

  .article h2 + h3 { margin-top: 10px; }
  .article h2 + p { margin-top: 22px; }
  .article h3 + p { margin-top: 10px; }

  .article__divider {
    width: 100%;
    margin: 31px 0 0;
  }

  .article__divider + h2 { margin-top: 40px; }

  .article__image {
    margin-top: 82px;
    border-radius: 20px;
  }

  /* --- mobile-variant article swap (blog-article.html only) --- */
  .article-hero__title--m { display: block; }
  .article-hero__title--m + .article-hero__title { display: none; }
  .article-hero__sub--m { display: block; }
  .article-hero__sub--m + .article-hero__sub { display: none; }
  .article--m { display: grid; }
  .article--m + .article { display: none; }

  /* the mobile frame's article body is plain rich text: Roboto, 18px copy,
     bold Roboto headings (24/20/18) — all scoped to the variant */
  .article--m p {
    max-width: 357px; /* Figma's box wraps "significantly" one line early */
    font-family: var(--font-alt);
    font-size: var(--text-md); /* 18px */
    line-height: 22px;
  }

  .article--m .article__p-loose--m {
    font-size: 20px; /* the standfirst paragraph is one step larger */
    line-height: 24px;
  }

  .article--m h2 {
    margin-top: 31px;
    font-family: var(--font-alt);
    font-weight: 500;
    font-size: 23px; /* truth: "Complete Office Cleaning" 258 wide, pitch 28 */
    line-height: 1.2;
  }

  .article--m h2 + p { margin-top: 21px; }

  .article--m h3 {
    margin-top: 41px; /* truth cap y1167 */
    font-family: var(--font-alt);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
  }

  .article--m h4 {
    margin-top: 9px;
    font-family: var(--font-alt);
    font-weight: 500;
    font-size: var(--text-md); /* 18px */
    line-height: 1.2;
    color: var(--color-black);
  }

  .article--m h4 + p { margin-top: 10px; }

  /* Latest posts: centered 32px title, stacked 382-tall cards */
  .related {
    margin-top: 143px;
  }

  .related__title {
    font-size: 32px;
  }

  .related__grid {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 32px;
  }

  .related-card__media {
    aspect-ratio: 322 / 200;
    border-radius: 16px;
    /* the mobile frame squeezes the full 371x201 rendition into 322x200
       rather than cropping it */
    object-fit: fill;
  }

  /* mobile card title is the smaller regular style: 24/30 Cabinet 400 keeps
     "Green/Eco-Friendly Cleaning" on one line (truth width 276, cap y2224,
     pill top y2261 → line box 30) */
  .related-card__title {
    font-weight: 400;
    font-size: 23px; /* truth: 275 wide, cap band 16.5 */
    line-height: 30px;
  }

  .related-card__more {
    margin-top: 12px; /* tags end 71 → button 83 */
  }

  /* services: centered 32px title, stacked cards, no dots */
  .services {
    margin-top: 173px;
  }

  .services__title {
    font-size: 32px;
  }

  .services__grid {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 26px;
  }

  .svc-card {
    padding: 16px 24px;
  }

  .svc-card .card__title {
    font-size: 24px;
  }

  .svc-card .card__text {
    font-size: var(--text-base); /* 16px/24 — truth text pitch is 24 */
  }

  /* In the mobile frame the Book link is pinned 40px off the card bottom
     (pad 16 + line 24) while the card heights are hand-set per card —
     margin-top:auto (inherited) + these min-heights reproduce that. The
     four services cards are identical on every page sharing this sheet. */
  .svc-card .link-more {
    padding-top: 0;
  }

  .services__grid > li:nth-child(1) .svc-card { min-height: 243px; }
  .services__grid > li:nth-child(2) .svc-card { min-height: 255px; }
  .services__grid > li:nth-child(3) .svc-card { min-height: 261px; }
  .services__grid > li:nth-child(4) .svc-card { min-height: 259px; }

  .services__dots {
    display: none;
  }

  /* CTA: tall panel (362x718, pad 79/31), star mid-panel, broom bottom-left */
  .article-cta {
    margin-top: 142px;
    /* Figma gap to the footer is 160: the footer brings 80px margin-top which
       collapses with any margin here, so use margin 160 (not 80+80) */
    margin-bottom: 160px;
  }

  .article-cta__panel {
    min-height: 718px;
    padding: 79px 31px;
    /* Figma's gradient handles scale with the node: on the tall mobile panel
       the desktop 112.7deg axis becomes ~94deg (fitted against the truth) */
    background: linear-gradient(94deg, var(--color-primary-400) 28%, #A0ABFF 100%);
  }

  .article-cta__content {
    max-width: 288px;
  }

  .article-cta__title {
    font-size: 32px;
  }

  .article-cta__text {
    margin-top: 16px;
  }

  .article-cta__btn {
    margin-top: 44px;
    width: auto;
    min-width: 192px;
  }

  /* The mobile frame composes the decor differently (sparkles sit further
     left/up relative to the broom), so swap in the mobile node's own export
     (1001:9085, clipped to the panel, gradient backdrop baked): it registers
     at exactly panel-relative (0, 314) at full panel width. */
  .article-cta__decor {
    content: url("../../assets/img/blog-article/m-cta-decor.png");
    top: 314px;
    bottom: auto;
    left: 0;
    right: auto;
    width: 100%;
    height: auto;
  }
}