/* ============================================================================
   Jewellery Manufacturing Machinery in Mumbai and SEEPZ (id_cms=8) — hub layout
   ----------------------------------------------------------------------------
   Loaded from `cms/page.tpl` AFTER guide-premium.css, the way page 11 layers
   compare-premium.css, page 14 layers glossary-premium.css and page 7 layers
   pillar-premium.css. LOAD ORDER IS LOAD-BEARING: the width rules below
   override guide-premium.css rules at equal specificity.

   This is the SEVENTH page on the `.gde` system (after ids 10, 11, 12, 13, 14
   and 7) and it takes almost everything unchanged — the h1 fix
   (`body#cms:has(.gde)`), the 832px cap lift (`.page-cms.rich-text:has(.gde)`),
   the hero, the stat band, the scroll-wrapped `.gde__spec` tables,
   `.gde__caveats`, `.gde__cards` + `.gde__spec-list`, `.gde__callout`,
   `.gde__faq`, `.gde__more` and the reveal transitions. guide-premium.js is
   loaded unchanged too: it reads each scrolling table's label from the nearest
   heading above it, and its counter leaves non-numeric stat values alone.

   MEASURED ON THE LIVE PAGE BEFORE THIS EXISTED (puppeteer through the origin
   with the Cloudflare bypass, 1440px and 390px):

     reading measure  832px capped by cms-premium.css at 1440px — ~464px of
                      empty right-hand page
     page title       h1 24px desktop / 21.57px mobile (page.tpl ships it with
                      class `h4`) under Playfair h2s at 32px — the title was the
                      SMALLEST heading on the page
     h2 treatment     cms-premium.css draws a full-width hairline under every
                      CMS h2; five of them cut the page into five grey slabs
     the one table    6 rows x 2 columns, and the second column carries the full
                      57-word head-office postal address. At 390px it COMPRESSED
                      rather than scrolled (scrollWidth == clientWidth == 366),
                      so the address — the single most useful fact on a location
                      page — was squeezed into a ~200px column
     scannable elems  2 lists, 0 cards, 0 callouts, 0 stat band, 0 images
     navigation       none. 5 sections, 0 anchors, 0 contents list
     page height      3,593px desktop / 4,848px mobile
     schema           WebPage + BreadcrumbList + a 3-question FAQPage. NO
                      LocalBusiness — head-jsonld.tpl gates both office nodes on
                      `page_name` being index/contact/stores, so the one page
                      whose entire subject is the Mumbai office and its address
                      published neither. That was the biggest GEO defect here.

   WHAT THIS FILE ADDS, and nothing else:

     1. A contents panel with real anchor chips, and `scroll-margin-top` on
        every anchored block so a chip does not drop the reader behind the
        sticky header. Values re-used from glossary-premium.css, which measured
        the scrolled header at 68px below 768 and up to 182px above it.
        The chips are plain <a href="#..."> in the stored body (`id` survives
        HTMLPurifier — Tools.php sets Attr.EnableID = true), so navigation
        works with CSS and JS both blocked.

     2. `.hub__areas`, a 3-across grid of the Mumbai clusters served. This is
        the one component a LOCATION page needs and no guide does: a reader
        checking "do you cover Andheri" wants to find their own district in one
        glance, not read a sentence listing six of them. `.gde__cards` is
        2-across, which leaves an orphan on an odd count.

     3. The prose-measure fix inside widened blocks, scoped. Trap recorded on
        page 13: `.gde__block:has(.gde__spec)` widens the whole block to 62rem
        so the table gets room, and every <p> in it widens too — measured at 117
        characters per line against the 65-75 target guide-premium.css sets for
        itself. Scoped to `.gde--hub` for the same reason glossary-premium.css
        and pillar-premium.css scoped their copies: the same defect exists on
        pages 10-13, but guide-premium.css is shared with those live pages and
        fixing it there is its own change to verify, not a side effect of this.

     4. The mobile swipe affordance on scrolling tables, and the back-to-
        contents and sources treatments. All three are lifted verbatim from
        pillar-premium.css.

   KNOWN DUPLICATION, recorded rather than hidden: items 1, 3 and 4 are the same
   rules pillar-premium.css carries under `.gde--pillar`. They are copied rather
   than shared because the alternative — widening pillar-premium.css's selectors
   — edits a file live page 7 depends on and would force a re-verification of
   that page as a side effect of shipping this one. If a third page ever wants
   them, promote the common set into guide-premium.css and re-verify pages 7-14
   together, as one deliberate change.

   MARKUP CONSTRAINT, unchanged from guide-premium.css: the HTML lives in the
   database and is re-purified on every back-office save (PS_USE_HTMLPURIFIER =
   1, default doctype). HTMLPurifier strips <section>, data-* and aria-*;
   `class` and `id` both survive. Keep the body to
   div / p / h2 / h3 / ul / ol / li / span / strong / em / a / table + class + id.

   PALETTE: the pink/white/ink tokens guide-premium.css already defines. No new
   colours.
   ========================================================================== */

/* ---------- Widths ----------
   The contents panel and the areas grid need more than the 46rem prose
   measure, on the same grounds the tables did. */
.gde--hub .gde__block:has(.hub__nav),
.gde--hub .gde__block:has(.hub__areas) {
  max-width: 62rem;
}

/* THE TRAP THIS AVOIDS — see note 3 in the header. Prose inside a block that
   was widened for a table or a grid goes back on the prose measure; only the
   wide thing itself keeps the extra room. */
.gde--hub .gde__block:has(.gde__vs) > p,
.gde--hub .gde__block:has(.gde__spec) > p,
.gde--hub .gde__block:has(.hub__nav) > p,
.gde--hub .gde__block:has(.hub__areas) > p {
  max-width: var(--gde-measure);
}

/* ---------- Contents panel ----------
   Deliberately quiet: a tinted card rather than anything that competes with
   the stat band directly above it. It is navigation, not a headline. */
.hub__toc {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--skt-pink-border);
  border-radius: 18px;
  background: var(--skt-pink-tint);
}

.page-cms.rich-text .hub__toc p {
  margin: 0 0 1rem;
  font-size: .95rem;
  color: var(--skt-muted);
}

.page-cms.rich-text .hub__nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-cms.rich-text .hub__nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-cms.rich-text .hub__nav li::before,
.page-cms.rich-text .hub__nav li::marker {
  content: none;
}

.page-cms.rich-text .hub__nav a {
  display: inline-block;
  padding: .45rem .85rem;
  border: 1px solid var(--skt-pink-border);
  border-radius: 999px;
  background: #fff;
  color: var(--skt-ink);
  font-size: .9rem;
  line-height: 1.3;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.page-cms.rich-text .hub__nav a:hover,
.page-cms.rich-text .hub__nav a:focus-visible {
  background: var(--skt-pink);
  border-color: var(--skt-pink);
  color: #fff;
  text-decoration: none;
}

/* ---------- Anchor landing ----------
   Measured in glossary-premium.css against the live sticky header in its
   `is-scrolled` state, the only state a jump link can land in: 68px below
   768px, up to 182px above it. 5.5rem / 12.5rem leaves ~18px of clearance
   above the heading rather than butting it against the header.
   Re-measure if the header layout changes. */
.gde--hub .gde__block[id] {
  scroll-margin-top: 5.5rem;
}

@media (min-width: 768px) {
  .gde--hub .gde__block[id] {
    scroll-margin-top: 12.5rem;
  }
}

/* ---------- Areas grid ----------
   The Mumbai clusters served. Three across on desktop so a reader scanning for
   their own district covers all of them in one glance; `.gde__cards` is
   2-across and leaves an orphan on an odd count. */
.hub__areas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}

@media (max-width: 991.98px) {
  .hub__areas {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .hub__areas {
    grid-template-columns: 1fr;
  }
}

/* ---------- The address table ----------
   guide-premium.css gives a scrolled `.gde__spec` a 34rem minimum on a phone.
   This page's service table has only two columns, but the right-hand one
   carries the full postal address; at 34rem that address wrapped to three words
   a line. 40rem is where each row's label holds on one line and the address
   reads as an address. It still scrolls inside its wrapper — the page body
   never moves sideways. */
@media (max-width: 767.98px) {
  .page-cms.rich-text .gde__scroll .gde__spec.hub__wide {
    min-width: 40rem;
  }
}

/* ---------- Scroll affordance on the tables ----------
   guide-premium.js makes each scrolling table keyboard-reachable and announces
   it to a screen reader, but a SIGHTED phone user gets nothing: the table shows
   its first column and the rest sits off-screen with no indication it is there.

   Drawn in CSS rather than written into the body, for the usual reason: it is
   false on desktop, where the tables do not scroll, and the body is one stored
   string shared by every viewport.

   `position: sticky; left: 0` on a block-level pseudo-element inside the
   horizontal scroller pins the hint to the LEFT EDGE OF THE SCROLLPORT, so it
   stays put while the table moves under it. */
@media (max-width: 767.98px) {
  .gde--hub .gde__scroll {
    padding-bottom: 1.5rem;
  }

  .gde--hub .gde__scroll::after {
    content: "Swipe the table sideways to see every column \2192";
    position: sticky;
    left: 0;
    display: block;
    width: 100vw;
    max-width: 100%;
    margin-top: .6rem;
    font-size: .8rem;
    line-height: 1.3;
    color: var(--skt-muted);
  }
}

/* ---------- Back-to-contents links ----------
   One per section, after the last element. Understated on purpose — it must
   not read as the section's conclusion. */
.page-cms.rich-text .hub__back {
  margin: 1.75rem 0 0;
  font-size: .85rem;
}

.page-cms.rich-text .hub__back a {
  color: var(--skt-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--skt-pink-border);
}

.page-cms.rich-text .hub__back a:hover,
.page-cms.rich-text .hub__back a:focus-visible {
  color: var(--skt-pink-dark);
  border-bottom-color: var(--skt-pink);
}

/* ---------- Sources ----------
   A hub page that cites market figures should show the citations, and an
   answer engine quoting the SEEPZ export share should be able to see where it
   came from. Small, grey, and last. */
.page-cms.rich-text .hub__sources {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .85rem;
  color: var(--skt-muted);
}

.page-cms.rich-text .hub__sources li {
  margin: 0 0 .5rem;
  padding: 0 0 0 1.1rem;
  position: relative;
  list-style: none;
}

.page-cms.rich-text .hub__sources li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 0;
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: var(--skt-pink-border);
}