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

   This is the SIXTH page on the `.gde` system (after ids 10, 11, 12, 13, 14)
   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__vs` / `.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 on the site's single most important
                      editorial 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; THIRTEEN of them cut the page into thirteen
                      identical grey slabs with no sense of which mattered
     three tables     12x3, 7x4 and 13x3. At 390px all three COMPRESSED rather
                      than scrolled (scrollWidth == clientWidth == 366) — the
                      machine comparison, the tray/nozzle chart and the hub map
                      were the three least readable things on the page
     horizontal       documentElement.scrollWidth - clientWidth = 14px at 390px.
     overflow         The page rocked sideways on a phone.
     scannable elems  4 lists, 0 cards, 0 callouts, 0 stat band, 0 images
     navigation       none. 13 sections, 0 anchors, 0 contents list — reaching
                      "Where India makes jewellery" meant scrolling past 9
                      other sections
     page height      9,018px desktop / 15,561px mobile
     schema           WebPage + BreadcrumbList + a 6-question FAQPage. Nothing
                      declared what the body IS, and the page that exists to
                      introduce the whole catalogue enumerated no products.

   WHAT THIS FILE ADDS, and nothing else:

     1. A contents panel with real anchor chips. A pillar page is the one page
        on the site a reader arrives at without knowing which section they
        want. 13 sections and no way to jump was the single biggest usability
        defect measured. 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. `scroll-margin-top` on every anchored block. The theme header is
        `position: sticky`; without this every chip drops the reader at a
        heading hidden behind it. Values re-used from glossary-premium.css,
        which measured the scrolled header at 68px below 768 and up to 182px
        above it.

     3. The prose-measure fix inside widened blocks, scoped. Trap recorded on
        page 13: `.gde__block:has(.gde__vs)` / `:has(.gde__spec)` widen 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. This page has three table blocks and
        real prose in each, so the fix is not optional here. Scoped to
        `.gde--pillar` for the same reason glossary-premium.css scoped its
        copy: 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 one.

     4. A 3-across range grid, because six equipment lines in the 2-column
        `.gde__cards` leaves an orphan.

   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 / a / table + class + id.

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

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

/* THE TRAP THIS AVOIDS — see note 3 in the header. Prose inside a block that
   was widened for a table goes back on the prose measure; only the table keeps
   the extra room. */
.gde--pillar .gde__block:has(.gde__vs) > p,
.gde--pillar .gde__block:has(.gde__spec) > p,
.gde--pillar .gde__block:has(.pil__nav) > p,
.gde--pillar .gde__block:has(.pil__range) > 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. */
.pil__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 .pil__toc p {
  margin: 0 0 .9rem;
  font-size: .95rem;
  color: var(--skt-muted);
}

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

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

/* cms-premium.css draws its own list markers; the chips are their own markers.
   `::before` is cleared rather than `list-style` alone because the theme uses
   a generated bullet on CMS lists. */
.page-cms.rich-text .pil__nav li::before,
.page-cms.rich-text .pil__nav li::marker {
  content: none;
}

.page-cms.rich-text .pil__nav a {
  display: inline-flex;
  align-items: center;
  padding: .45rem .9rem;
  border: 1px solid var(--skt-pink-border);
  border-radius: 999px;
  background: #fff;
  color: var(--skt-ink);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.page-cms.rich-text .pil__nav a:hover,
.page-cms.rich-text .pil__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--pillar .gde__block[id] {
  scroll-margin-top: 5.5rem;
}

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

/* ---------- Range grid ----------
   Six equipment lines. `.gde__cards` is 2-across, which leaves the sixth card
   alone on its row; three across fills the block and keeps each card's spec
   list at a readable width. */
.pil__range {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}

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

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

/* ---------- The four-column tray chart ----------
   guide-premium.css gives a scrolled `.gde__spec` a 34rem minimum on a phone,
   which is right for three columns of short cells. The tray chart has FOUR, and
   two of them carry two product links each; at 34rem it wrapped to three words
   per line and stopped being a chart. 46rem is the width at which every cell
   holds its size band on one line. 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.pil__wide {
    min-width: 46rem;
  }
}

/* ---------- 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 machine
   comparison shows the X4 Pro Plus column and the Pro Mini column sits entirely
   off-screen with no indication it is there. On a page whose first job is
   "which of these do I buy", a reader who does not know to swipe sees half the
   answer and concludes that is the whole answer.

   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 — rather than scrolling away with
   the content the way a plain static element would. */
@media (max-width: 767.98px) {
  .gde--pillar .gde__scroll {
    padding-bottom: 1.5rem;
  }

  .gde--pillar .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. On a 15,000px phone page the reader
   who followed a chip needs a way back that is not 8 flicks of the thumb.
   Understated on purpose — it must not read as the section's conclusion. */
.page-cms.rich-text .pil__back {
  margin: 1.75rem 0 0;
  font-size: .85rem;
}

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

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

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

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

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