/* ============================================================
   v2 BLOG INDEX — PAGE HEAD (.bloghead)

   Loaded only by /blog-page/. Comes AFTER the Webflow shared
   stylesheet in the document head, which is load-bearing: this file
   replaces Webflow's .header/.heading-7 treatment and has to win.

   ------------------------------------------------------------
   WHAT THIS REPLACES, AND WHY

   The page opened with:

     .header    { background:#1f2a2e; height:500px;
                  margin-bottom:-218px; padding:86px 86px 0 }
     .heading-7 { color:#fff; text-align:center;
                  font-family:Poppins; font-size:49px }

   That is a 500px dark band containing two words. Three things are
   wrong with it and only one of them is size:

     · IT IS A HERO SHELL WITH NO HERO IN IT. Pricing and Junk Removal
       run heads about that tall, but they hold a headline, supporting
       copy, a CTA and a photograph. This held "OUR BLOG". A listing
       page's job is to get you to the list, and this spent half a
       screen not doing it.
     · POPPINS IS NOT IN THE v2 SYSTEM. Every rebuilt v2 page is
       Montserrat, and display headings are Montserrat 300 with -.04em
       tracking — see the long note on .shead__title in
       junk-removal.css. Poppins 700 is Webflow's default and appears
       nowhere in the v2 design.
     · THE NEGATIVE MARGIN WAS A LAYOUT HACK. height:500px paired with
       margin-bottom:-218px pulled the next section up underneath the
       band. That is why the band could not simply be made shorter —
       reducing the height moved the section below it too. This block
       replaces both rather than tuning either.

   ------------------------------------------------------------
   THE TREATMENT IS THE PAGE-HEAD FORM, NOT THE HERO FORM

   Left-aligned, Montserrat 300, on white, with a hairline under it
   and no band colour at all. It lands around 150px against the old
   500. The eyebrow uses #176928 rather than --accent-green #71B745,
   for the same reason the Before & After labels do: #71B745 is
   2.24:1 on a light background and fails AA outright, #176928 is
   6.20:1 on white. See the --after-ink note in junk-removal.css.

   A POST COUNT IS NOW SAFE TO ADD HERE AND IS NOT ADDED YET.

   It was left out because the list underneath rendered 4 of the 21
   posts and printing "21 posts" over it would have been a lie. The
   grid below now carries all 21, so that objection is gone — but the
   head was approved as eyebrow + title + line of copy, and adding a
   number changes an approved design. Add it when someone asks for it,
   not as a side effect of the list being fixed.

   THE SECTION BELOW IS NOW v2 TOO — see the .blogindex block at the
   bottom of this file. The dark Webflow band, the "POPULAR
   CATEGORIES" heading and the four-card collection list are gone,
   replaced by a grid of all 21 posts using card design C.
   ============================================================ */

/* THE GROUND IS THE TINT, NOT WHITE, AND THAT IS HALF THE FIX.

   The first version of this head was white, and the verdict was "a
   lot of white for no reason". Measured, its ink reached 16% of the
   band — the other 84% was blank paper with nothing to make it read
   as deliberate. On #F1F5F7 the head is a BAND rather than an
   absence, and the page already alternates white and tint down its
   whole length, so this borrows an existing move instead of
   inventing one. It costs no height. */
.bloghead {
  background: #F1F5F7;
  padding: clamp(34px, 4vw, 54px) 20px clamp(26px, 3vw, 38px);
  /* Webflow's .header carried margin-bottom:-218px to pull the next
     section up under it. Nothing here overlaps anything, so the
     override has to be explicit — the old value is on a class this
     element no longer uses, but stating 0 documents that the overlap
     was removed on purpose rather than lost. */
  margin: 0;
  border-bottom: 1px solid rgba(11, 18, 38, .14);
}

.bloghead__inner {
  max-width: 1200px;
  margin-inline: auto;
}

.bloghead__eyebrow {
  margin: 0 0 10px;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* 6.20:1 on white. Not --accent-green — see the header note. */
  color: #176928;
}

/* Same treatment as every other v2 display heading: Montserrat 300,
   tracking in em so it holds its proportion across the clamp, leading
   1.1. Deliberately smaller than the service-page heroes (which run
   60-68px) because this is a page head, not a hero. */
.bloghead__title {
  margin: 0;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 300;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -.04em;
  color: #0B1226;
  text-align: left;
}

/* THE LINE THAT FILLS THE WIDTH — this is direction D.

   "Our Blog" is eight characters. At any sane size it cannot span a
   1200 rail, so the head could never be fixed by making the title
   bigger; that was tried and it just makes a small word large. The
   width gets used by putting a real sentence under it instead, and
   the sentence is what takes the ink from 16% of the band to 79%.

   ⚠ 78ch IS A READING CAP, NOT A DECORATIVE ONE. The standing type
   rule on this project is that type blocks use the width and sit
   left, with no narrow centred columns — but a paragraph still stops
   being readable somewhere around 75-80 characters however wide the
   heading above it runs. 78ch at this size lands near 900px on a
   1440 screen, which uses the width without turning the line into a
   ruler. Do not remove the cap to "use more width"; that trades a
   legible paragraph for a wider one.

   ⚠ THE WORDING IS NEW COPY AND IS THE ONE THING HERE NOT DRAWN FROM
   THE SITE. Everything else in this head — "Blog", "Our Blog" — is
   the approved existing wording. This sentence was drafted for the
   lab and approved with the direction rather than on its own, so it
   is the first thing to change if it reads wrong. Keep it to two
   clauses and under ~150 characters or it wraps to three lines and
   the head grows past the 216px this direction is costed at.

   NO POST COUNT IN IT. The original reason — that the list below
   showed 4 of 21 and a number would contradict it — no longer holds,
   because the grid now carries all 21. It stays out because the head
   was approved without one, not because it would still be wrong. */
.bloghead__copy {
  margin: 16px 0 0;
  max-width: 78ch;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(15px, 1.35vw, 18.5px);
  line-height: 1.55;
  font-weight: 400;
  color: #4C5265;
}
/* The one emphasis in the line. 600 rather than 700: at 18.5px on a
   tint, 700 reads as a second heading rather than as stress. */
.bloghead__copy b {
  color: #0B1226;
  font-weight: 600;
}

@media (max-width: 700px) {
  .bloghead { padding-inline: 16px; }
  /* ch is measured on the element's own font-size, so the 78ch cap
     is already ~340px here and does nothing. Left explicit so it is
     obvious the cap was considered at this width, not forgotten. */
  .bloghead__copy { max-width: none; }
}

/* ============================================================
   BLOG INDEX — CARD GRID (.blogindex), card design B

   Replaces Webflow's .cms_grid / .collection-item-2. See the block
   comment on the section in blog-page/index.html for the full story,
   including the dead pagination that hid 17 of the 21 posts.

   ------------------------------------------------------------
   WHAT CHANGED FROM THE WEBFLOW CARD, ITEM BY ITEM

     Poppins            -> Montserrat, like the rest of v2
     centred            -> left-aligned. A centred title over three
                           lines is the hardest thing to scan in a
                           grid, because every line starts somewhere
                           different
     height:12rem       -> aspect-ratio 16/10, so the image holds its
                           composition instead of re-cropping at every
                           column width
     .cms_category      -> a label sized to its own word. The old one
       width:10rem         gave "Junk Removal" (110px of text) the
                           same 160px box as "General / Lifestyle"
                           (138px), so pills looked arbitrarily wide —
                           and there were only 22px of headroom before
                           the next category anyone added clipped
                           silently, since it carried overflow:hidden
                           with text-overflow:ellipsis
     gradient card      -> white card on white section, separated by a
       #006214->#001a3f    shadow. The old one was a dark card on a
                           dark photographic band and barely detached
                           from the page
     "READ BLOG" button -> gone. The whole card is the link and always
                           was, so the button was a second target for
                           one destination. Its space carries the
                           EXCERPT now, which is the only thing
                           telling six "Dumpster Rental..." titles
                           apart.

   ------------------------------------------------------------
   ⚠ THE CARD IS A GRID WITH THE EXCERPT AS THE FLEXIBLE ROW.

   Titles run 1-3 lines and 8 of the 21 posts have a short standfirst,
   so cards would otherwise finish at different heights and the "Read"
   line would wander up and down the row. The inner box is a flex
   column, the excerpt takes the slack, and .bcard__more is pushed by
   margin-top:auto — so every "Read" in a row sits on the same line
   whatever the title did above it.

   ⚠ THE IMAGE SCALES ON HOVER, THE CARD DOES NOT. Moving the card
   shifts how its neighbours line up across a 21-card grid; moving the
   image inside a clipped box moves nothing. The shadow does the
   lifting.
   ============================================================ */

.blogindex {
  background: #FFFFFF;
  padding: clamp(30px, 4vw, 56px) 20px clamp(40px, 5vw, 72px);
}

.blogindex__grid {
  max-width: 1200px;
  margin-inline: auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}

.bcard { --c: #0B1226; display: flex; }
.bcard.jr { --c: #0B1226; }
.bcard.dr { --c: #2F6FE5; }
.bcard.gl { --c: #176928; }

.bcard__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #FFFFFF;
  /* ⚠ REQUIRED, NOT TIDYING. The whole card is one <a>, so without
     this the browser's default link underline lands on the category,
     the date, the title, the excerpt and "Read" all at once — five
     underlined blocks per card, 21 times. The lab stylesheets carry a
     global `a{text-decoration:none}` reset and this file does not,
     which is exactly how it got missed. */
  text-decoration: none;
  color: inherit;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(11, 18, 38, .09);
  transition: box-shadow .22s ease;
}
.bcard__link:hover { box-shadow: 0 12px 28px rgba(11, 18, 38, .17); }
.bcard__link:focus-visible { outline: 3px solid #2F6FE5; outline-offset: 3px; }

/* The clip that the image scales inside. Its own element rather than
   overflow on the card, so the card's radius does not have to fight a
   transformed child. */
.bcard__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #F1F5F7;
}
.bcard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.bcard__link:hover .bcard__img { transform: scale(1.045); }

.bcard__in {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 16px 18px 18px;
}

.bcard__meta {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* The category colour, on a white card — so unlike the overlay card
   this one CAN print the label in it. */
.bcard__cat { color: var(--c); }
.bcard__dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(11, 18, 38, .28);
  flex: none;
}
.bcard__meta time {
  color: #4C5265;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;
  font-size: 12px;
}

/* An <h2> now, not a <span> — live marks every post title on this
   index as a heading, and on a listing page the titles are the
   keyword-bearing text. margin:0 keeps the card looking exactly as it
   did: a heading brings UA margins a span never had. */
/* "POPULAR CATEGORIES" — live's own heading above the post list,
   restored. It is a section label, not a filter: nothing on live sits
   under it but the posts themselves. Sized as a section eyebrow rather
   than a page heading, because at h2 weight it would compete with the
   21 post titles now marked up beneath it. */
.blogindex__catshead {
  /* Same 1200px rail and centring as .blogindex__grid below, or the
     heading hangs off the grid's left edge on wide screens. */
  max-width: 1200px;
  margin: 0 auto 18px;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #2F6FE5;
}

.bcard__t {
  display: block;
  margin: 0;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(15px, 1.25vw, 17.5px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: #0B1226;
}
.bcard__link:hover .bcard__t { color: #2F6FE5; }

.bcard__s {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  color: #4C5265;
}

/* margin-top:auto is what keeps every "Read" in a row on one line —
   see the note above. */
.bcard__more {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #2F6FE5;
}
.bcard__more svg {
  width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s ease;
}
.bcard__link:hover .bcard__more svg { transform: translateX(3px); }

@media (max-width: 980px) {
  .blogindex__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .blogindex__grid { grid-template-columns: 1fr; }
  .blogindex { padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .bcard__link, .bcard__img, .bcard__more svg { transition: none; }
  .bcard__link:hover .bcard__img { transform: none; }
  .bcard__link:hover .bcard__more svg { transform: none; }
}