/* RedRoute Removals — area/location detail pages (/areas/<slug>/index.html,
   generated by scripts/build-area-pages.mjs, one shared template + one
   data file — see that script for the AREAS array).

   Reuses, unmodified:
   - .svcd-hero (no-media variant), .svcd-breadcrumb, .svcd-section /
     .svcd-h2 / .svcd-section__head / .svcd-section__lede, .svcd-edit-why,
     .svcd-chip / .svcd-price-combo__chips, .about-cta  — all from
     ../service-detail.css
   - .services-mega__grid / __item / __icon / __label / __arrow (the
     header mega-menu's icon-grid) and .faq__list / .faq__item / .faq__question /
     .faq__answer (accordion, bound sitewide by about-animation.js) — both
     global in ../styles.css

   This file only adds what those don't: the .area-page container-width
   mirror, the neighbourhood/nearby-area chip (a small local copy of
   areas.css's .areas-map__chip — duplicated rather than linking that
   ~470-line, mostly-unrelated stylesheet just for one component), and
   the small per-borough map frame. */

.area-page .container.svcd-hero__container--left{
  margin-left: 0;
  max-width: var(--container-w);
}

.areas-map__chip{
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--grey-border);
  border-radius: 999px;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
a.areas-map__chip:hover,
a.areas-map__chip:focus-visible{
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
.area-chip-row{
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Services grid: the mega-menu's label is nowrap by design (a narrow
   dropdown); here it runs the full section width, so let longer service
   names (e.g. "Furniture Dismantling & Assembly") wrap instead of
   assuming they always fit on one line. */
.area-services .services-mega__label{ white-space: normal; }

.area-map-frame{
  margin-top: 28px;
  max-width: 640px;
  height: 380px;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--grey-border);
  background: var(--grey-light);
}
.area-map-frame__fallback{
  display: block;
  padding-top: 140px;
  text-align: center;
  font-family: var(--font-text);
  font-size: 0.9rem;
  color: var(--text-secondary);
}
/* Same desaturation as areas-we-cover.html's main map, for one visual
   language between the two. */
.area-map-frame .leaflet-tile-pane{
  filter: grayscale(1) contrast(0.85) brightness(1.22);
}

@media (max-width: 640px){
  .area-services .services-mega__grid{ grid-template-columns: 1fr; }
}
@media (max-width: 900px){
  .area-map-frame{ height: 260px; }
}

/* ============================================================
   Area page layout v2 (.area-page--v2) — one shared template for
   every London borough page: hero with side map, borough selector,
   services list + boxes photo, Why RedRoute with the seated worker
   photo, routes, FAQ framed by the RedRoute tape strips, final CTA.
   Scoped to .area-page--v2 so nothing above changes for any page
   still on the old markup.
   ============================================================ */
.area-page--v2{ overflow-x: clip; }

/* ---------- Hero ---------- */
.area-hero{ padding-bottom: 72px; }
.area-hero__grid{
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center;
  gap: 72px;
}
.area-hero__copy .hero__eyebrow{ margin-bottom: 24px; }
.area-page--v2 h1.area-hero__heading{
  font-weight: 800;
  font-size: clamp(2.6rem, 3.9vw, 4.4rem);
  line-height: 1.03;
  letter-spacing: -0.025em;
  text-wrap: initial;
}
.area-hero__heading .h1-accent{ display: block; }
.area-hero__sub{
  margin-top: 26px;
  max-width: 560px;
  font-family: var(--font-text);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.area-hero__copy .svcd-hero__trust{ max-width: 560px; }
.area-hero__tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.area-hero__tabs .areas-map__chip{ padding: 7px 15px; font-size: 0.8rem; }
.area-page--v2 .area-map-frame{
  margin-top: 0;
  max-width: none;
  height: 460px;
  border-radius: 14px;
}

/* ---------- Borough selector ---------- */
.area-boroughs{ padding: 8px 0 88px; background: var(--white); }
.area-boroughs__label{
  margin-bottom: 18px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.area-boroughs__list{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.area-boroughs__list .areas-map__chip{ min-height: 40px; }
/* Selector centred on the page: label and pill rows both centred. */
.area-page--v2 .area-boroughs .container.svcd-hero__container--left{
  margin-left: auto;
  margin-right: auto;
}
.area-boroughs__label{ text-align: center; }
.area-boroughs__list{ justify-content: center; }
.area-boroughs__list .areas-map__chip.is-active{
  background: var(--red-tint);
  border-color: var(--red);
  color: var(--red);
  font-weight: 600;
}
.area-boroughs__list a.areas-map__chip.is-active:hover{
  background: var(--red-tint);
  color: var(--red);
}

/* ---------- Services: two-column list + isolated boxes photo ---------- */
.area-services__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 64px;
}
.area-svc-list{
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 48px;
}
.area-svc-list li{ break-inside: avoid; }
.area-svc-list a{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--grey-soft);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--black);
  transition: color 0.2s var(--ease);
}
.area-svc-list a:hover{ color: var(--red); }
.area-svc-list svg{ flex-shrink: 0; width: 20px; height: 20px; color: var(--red); }
.area-services__media{
  /* Same colour as the section, painted inside the .reveal wrapper's own
     stacking context — otherwise the blend below has nothing to
     multiply against and the photo's white rectangle shows. */
  background: var(--grey-light);
}
.area-services__media img{
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
  margin-left: auto;
  /* The photo is shot on white; multiply lets the section's light-grey
     show through so there's no visible rectangle behind the boxes. */
  mix-blend-mode: multiply;
}

/* ---------- Why RedRoute ---------- */
.area-why{ padding-bottom: calc(5.5vw + 88px); }
.area-why__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 72px;
}
.area-why__photo{
  display: block;
  margin-top: 36px;
  width: clamp(320px, 30vw, 440px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
/* Desktop only: nudge the photo right, off the heading's left edge. */
@media (min-width: 901px){
  .area-why__photo{ margin-left: 96px; }
}
.area-why__rows{ display: flex; flex-direction: column; gap: 40px; }
.area-why__row{ display: flex; align-items: flex-start; gap: 20px; }
.area-why__icon{ flex-shrink: 0; width: 26px; height: 26px; color: var(--red); }
.area-why__icon svg{ width: 100%; height: 100%; }
.area-why__title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--black);
}
.area-why__text{
  margin-top: 8px;
  max-width: 34rem;
  font-family: var(--font-text);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ---------- Tape separators (the real Скотч 1 / Скотч 2 artwork,
   stored trimmed as assets/faq-tape-top.png / faq-tape-bottom.png).
   Zero-height seam between two sections; the strip is centred on the
   seam and stretched to 110vw so its ends run off both edges. The
   neighbouring sections get extra padding for the strip's half-height
   (width-ratio height + the lift from rotate()). ---------- */
.area-tape{ position: relative; z-index: 3; height: 0; pointer-events: none; }
.area-tape img{
  position: absolute;
  top: 0;
  left: 50%;
  width: 110vw;
  max-width: none;
  height: auto;
  user-select: none;
}
.area-tape--one img{ transform: translate(-50%, -50%) rotate(-2.5deg); }
.area-tape--two img{ transform: translate(-50%, -50%) rotate(1.5deg); }
.area-faq{ padding-top: calc(5.5vw + 80px); padding-bottom: calc(7vw + 72px); }
.area-cta.about-cta{ padding-top: calc(7vw + 96px); }
.area-cta .about-cta__bg{ opacity: 0.1; }

/* FAQ block centred on the page (text stays left-aligned): the section
   container is re-centred instead of hugging the left like the others,
   and the heading + accordion share one 1000px column inside it. */
.area-page--v2 .area-faq .container.svcd-hero__container--left{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
.area-faq .svcd-section__head,
.area-faq__list{
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.area-faq .faq__list{ margin-top: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  .area-hero__grid,
  .area-services__grid,
  .area-why__grid{ gap: 48px; }
}
@media (max-width: 900px){
  .area-hero{ padding-bottom: 56px; }
  .area-hero__grid,
  .area-services__grid,
  .area-why__grid{ grid-template-columns: 1fr; }
  .area-hero__grid{ margin-top: 28px; }
  .area-page--v2 .area-map-frame{ height: 340px; }
  .area-boroughs{ padding-bottom: 64px; }
  .area-services__media img{ margin: 0 auto; max-width: 520px; }
  .area-why__photo{ width: min(100%, 400px); }
}
@media (max-width: 560px){
  .area-svc-list{ columns: 1; }
  .area-page--v2 .area-map-frame{ height: 280px; }
  .area-boroughs__list{ gap: 8px; }
  .area-boroughs__list .areas-map__chip{ padding: 8px 14px; min-height: 36px; font-size: 0.8rem; }
  .area-why__rows{ gap: 30px; }
  .area-page--v2 .area-faq .container.svcd-hero__container--left{ padding-left: 20px; padding-right: 20px; }
  .area-hero__copy .svcd-hero__actions .btn{ width: 100%; justify-content: center; }
}