/*
 * WARD LANDING PAGE — /bin-cleaning/{ward}
 *
 * These 45 pages are generated from the coverage data, and until now they looked it: a bare
 * column of inline-styled markup with none of the site's design language on it. This gives
 * them the same visual grammar as the rest of the site — the navy interior hero and the
 * elevated card from page.php (so a ward reads as a sibling of /locations/coventry), the
 * price-card idiom from the homepage, and the pill row from the hero.
 *
 * SELF-CONTAINED BY NECESSITY. The classes this borrows from visually — .bf-svc-card,
 * .bf-svc-head, .bf-postcode-pill — live in home-sections.css, which is enqueued ONLY on the
 * front page. Referencing them here would style nothing. Everything below is therefore
 * defined locally against the global tokens in blueprint.css, which is the same reason
 * pages.css exists for the contact and commercial templates.
 */

/* ---------------------------------------------------------------------------
 * The one rule that is not optional.
 *
 * GeneratePress gives .inside-article a WHITE background, which paints a white box over the
 * dark bands and hides white text inside it. home-sections.css carries its own copy of this
 * for the homepage and pages.css for the bespoke templates; a new template that forgets it
 * looks broken in a way that is very hard to attribute. See the same note in pages.css.
 * ------------------------------------------------------------------------ */
.bf-ward .bf-section .inside-article,
.bf-ward .bf-section .grid-container.inside-article {
    background: transparent;
}

.bf-ward .bf-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 32px);
}

/* ==========================================================================
   HERO — same navy gradient and scrim as the location pages (page.php), so a
   ward page is visibly part of that family rather than a stray template.
   Taller than a location hero because it carries real content, not just a title.
   ========================================================================== */
.bf-ward-hero {
    position: relative;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    padding: 40px 0 104px;          /* the extra bottom room is what the card below pulls up into */
    overflow: hidden;
}
.bf-ward-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.55) 100%);
    z-index: 1;
}
.bf-ward-hero > * { position: relative; z-index: 2; }

/* blueprint.css sets h1-h6 to navy with no !important, so every heading that sits on a dark
   band has to say white explicitly. Specificity is enough — no !important needed. */
.bf-ward-hero h1 {
    color: #fff;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    font-weight: 800;
    line-height: 1.12;
    margin: 0 0 16px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.bf-ward-hero .bf-ward-sub {
    color: #e2e8f0;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    font-weight: 300;
    line-height: 1.65;
    max-width: 46em;
    margin: 0 0 26px;
}
.bf-ward-hero .bf-ward-sub strong { color: #fff; font-weight: 600; }

/* Breadcrumb. Deliberately quiet — it is for orientation and for Google, not a feature. */
.bf-ward-crumbs {
    font-size: 0.85rem;
    color: #94a3b8;
    margin: 0 0 20px;
}
.bf-ward-crumbs a { color: #cbd5e1; text-decoration: none; border-bottom: 1px solid transparent; }
.bf-ward-crumbs a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.5); }
.bf-ward-crumbs span[aria-hidden] { opacity: 0.5; margin: 0 6px; }

/* The "we cover this" badge. Green rather than the hero's usual glass pill, because on this
   page that fact IS the headline — the visitor came to find out whether we come to them. */
.bf-ward-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.88rem;
    color: #fff;
    background: rgba(36, 179, 53, 0.22);
    border: 1px solid rgba(36, 179, 53, 0.55);
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    margin-bottom: 18px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.bf-ward-badge i { color: #4ade80; }

/* Stat chips — the facts that differ ward by ward, which is what stops these pages being
   doorway pages. Glass on the hero rather than the old flat grey boxes. */
.bf-ward-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.bf-ward-stat {
    flex: 1 1 190px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.bf-ward-stat b {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
}
.bf-ward-stat .bf-ward-stat-codes {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.3px;
}
.bf-ward-stat span {
    display: block;
    font-size: 0.8rem;
    color: #cbd5e1;
    margin-top: 5px;
    letter-spacing: 0.2px;
}

/* ==========================================================================
   SECTION HEADS — the eyebrow / heading / standfirst rhythm used site-wide.
   ========================================================================== */
.bf-ward-head { text-align: center; max-width: 44em; margin: 0 auto 38px; }
.bf-ward-head.is-left { text-align: left; margin-left: 0; }
.bf-ward-eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--brand-secondary);
    margin-bottom: 10px;
}
.bf-ward-head h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 800;
    color: var(--brand-primary);
    line-height: 1.2;
    margin: 0 0 12px;
}
.bf-ward-head p {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0;
}

/* ==========================================================================
   THE BOOKING CARD — lifted over the hero exactly as page.php lifts its content
   card, so the seam between the two templates is invisible.
   ========================================================================== */
.bf-ward-booking { background: var(--brand-background); padding: 0 0 80px; }
/* The closing CTA jumps back up here. The header is sticky, so without this the anchor lands
   underneath it and the visitor sees the middle of the form rather than the top of it — the
   same 120px offset the homepage's section anchors use. */
#bf-ward-book { scroll-margin-top: 120px; }
.bf-ward-booking-card {
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    padding: clamp(20px, 4vw, 45px);
    margin-top: -64px;              /* pairs with the hero's 104px bottom padding */
    position: relative;
    z-index: 3;
}

/* ==========================================================================
   PRICING — the homepage's service-card idiom, rebuilt locally.
   ========================================================================== */
.bf-ward-pricing { background: var(--brand-surface); padding: 80px 0; }
.bf-ward-prices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 26px;
}
/* Flex column with the price pushed to the bottom. "One-Off Commercial Bin Clean" wraps to two
   lines where the others take one, and in a plain block card that shunted its £25.00 a whole
   line below the other three — a price row that does not line up reads as careless on the one
   section of the page whose entire job is to look trustworthy about money. */
.bf-ward-price {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 28px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.bf-ward-price .bf-ward-amount { margin-top: auto; }
.bf-ward-price:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
    border-color: rgba(36, 179, 53, 0.4);
}
.bf-ward-price-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-pill);
    background: rgba(36, 179, 53, 0.1);
    color: var(--brand-secondary);
    font-size: 1.25rem;
    margin-bottom: 16px;
}
.bf-ward-price h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--brand-primary);
    margin: 0 0 10px;
}
.bf-ward-price .bf-ward-amount {
    font-family: var(--font-heading);
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--brand-primary);
    line-height: 1.1;
}
.bf-ward-price .bf-ward-amount small {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
    margin-top: 6px;
}
.bf-ward-note {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    max-width: 44em;
    margin: 30px auto 0;
}

/* ==========================================================================
   NEARBY AREAS — a pill row like the hero's area picker. The old two-column
   bulleted list read as a sitemap; these read as places you can go.
   ========================================================================== */
.bf-ward-nearby { background: var(--brand-background); padding: 80px 0; }
.bf-ward-pills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.bf-ward-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    padding: 11px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--brand-primary);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.bf-ward-pill i { color: var(--brand-secondary); font-size: 0.85rem; }
.bf-ward-pill:hover {
    border-color: var(--brand-secondary);
    color: var(--brand-secondary);
    transform: translateY(-2px);
}

/* ==========================================================================
   "AREAS WE COVER IN <TOWN>" — appended to each town page, and the thing that
   stops the ward pages being orphans. Sits inside the town page's existing
   white content card, so it is styled for a light surface with a rule above
   it rather than as another full-width band.
   ========================================================================== */
.bf-ward-links {
    margin: 44px 0 8px;
    padding-top: 34px;
    border-top: 1px solid var(--border-color);
}
.bf-ward-links h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 800;
    color: var(--brand-primary);
    margin: 0 0 10px;
}
.bf-ward-links p {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.65;
    max-width: 46em;
    margin: 0 0 22px;
}
.bf-ward-links-grid { display: flex; flex-wrap: wrap; gap: 10px; }
/* Left-aligned here, unlike the centred row on a ward page: this one sits in a body of text
   and a centred block in the middle of prose reads as a mistake. */
.bf-ward-links-grid .bf-ward-pill { font-size: 0.92rem; padding: 9px 16px; }

@media (max-width: 768px) {
    .bf-ward-links { margin-top: 32px; padding-top: 26px; }
}

/* ==========================================================================
   CLOSING BAND — one navy strip back to the town page, matching the site's
   final-CTA rhythm so the page ends rather than just stopping.
   ========================================================================== */
.bf-ward-cta {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    padding: 66px 0;
    text-align: center;
}
.bf-ward-cta h2 {
    color: #fff;                     /* blueprint's navy heading colour again */
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 800;
    margin: 0 0 12px;
}
.bf-ward-cta p {
    color: #cbd5e1;
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 40em;
    margin: 0 auto 26px;
}
.bf-ward-cta .btn { margin: 0 6px 10px; }
.bf-ward-cta .bf-ward-cta-ghost {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.45);
    color: #fff;
}
.bf-ward-cta .bf-ward-cta-ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
}

/* ==========================================================================
   MOBILE. The hero loses its horizontal scrim (which only makes sense across a
   wide copy column) and the card's upward pull is reduced, because at 390px a
   -64px lift eats the whole first heading.
   ========================================================================== */
@media (max-width: 768px) {
    .bf-ward-hero { padding: 28px 0 88px; }
    .bf-ward-hero::before {
        background: linear-gradient(to bottom, rgba(15, 23, 42, 0.8) 0%, rgba(15, 23, 42, 0.6) 100%);
    }
    .bf-ward-stat { flex: 1 1 100%; }
    .bf-ward-booking-card { margin-top: -52px; }
    .bf-ward-pricing,
    .bf-ward-nearby { padding: 56px 0; }
    .bf-ward-booking { padding-bottom: 56px; }
    .bf-ward-cta { padding: 52px 0; }
}

/* Motion is a progressive enhancement; AOS already respects this, the CSS should too. */
@media (prefers-reduced-motion: reduce) {
    .bf-ward-price,
    .bf-ward-pill { transition: none; }
    .bf-ward-price:hover,
    .bf-ward-pill:hover { transform: none; }
}