/* ─────────────────────────────────────────────────────────────────────
   MBK TOOLS — DOCUMENT COMPONENTS
   Shared screen styles for catalogue.html + brochure.html: cover, print
   CTA, stats intro, brands grid, TOC, chapter banners, category blocks,
   other-products, back matter, how-to-order, back cover.
   Print-only rules (page breaks, running header/footer, watermark
   visibility) live in css/print.css — this file is the on-screen half
   of the same components.
   ───────────────────────────────────────────────────────────────────── */

/* ── Watermark: print-only, invisible on screen ── */
.doc-watermark { display: none; }

/* ── Cover ── */
.doc-cover {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--navy-deep);
  overflow: hidden;
  padding: 160px var(--space-6) 80px;
}
.doc-cover__photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.doc-cover__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(rgba(14,20,38,0.85), rgba(14,20,38,0.94));
}
.doc-cover__cog {
  position: absolute; z-index: 1; top: 50%; right: -14%;
  width: 620px; height: 620px; color: rgba(200,101,27,0.14);
  transform: translateY(-50%) rotate(12deg);
  pointer-events: none;
}
.doc-cover__content { position: relative; z-index: 2; max-width: 640px; }
.doc-cover__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-orange);
  margin-bottom: var(--space-8);
}
/* Explicit width alongside height (not just width:auto) — inside a flex
   column, a replaced element with only `height` set falls back to its
   natural intrinsic width instead of deriving one from aspect-ratio. */
.doc-cover__logo { height: 76px; width: 145px; margin: 0 auto var(--space-6); display: block; }
.doc-cover__rule { width: 64px; height: 2px; background: var(--accent-orange); margin: 0 auto var(--space-6); border-radius: 1px; }
.doc-cover__title {
  font-family: var(--font-display); font-size: clamp(38px, 6vw, 64px); font-weight: 900;
  color: #fff; line-height: 1.03; letter-spacing: -0.03em; margin-bottom: var(--space-4);
}
.doc-cover__subtitle {
  font-family: var(--font-display); font-size: clamp(16px, 2vw, 20px); font-weight: 700;
  color: var(--accent-orange); margin-bottom: var(--space-3); line-height: 1.4;
}
.doc-cover__desc { font-size: 15px; color: rgba(255,255,255,0.55); max-width: 46ch; margin: 0 auto var(--space-14); line-height: 1.7; }
.doc-cover__meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-6);
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600; letter-spacing: 0.03em;
  color: rgba(255,255,255,0.42); padding-top: var(--space-8); border-top: 1px solid rgba(255,255,255,0.12);
  width: 100%;
}
.doc-cover__meta span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

/* ── Print CTA (screen only — sits directly under the cover) ── */
.doc-print-cta {
  background: var(--bg-page); text-align: center; padding: var(--space-10) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}
.print-btn { cursor: pointer; }
.doc-print-cta__cap { font-size: 13px; color: var(--text-tertiary); margin-top: var(--space-3); }

/* ── Stats intro copy (sits below the reused .stats-bar) ── */
.doc-stats-intro { max-width: 640px; margin: var(--space-10) auto 0; text-align: center; padding: 0 var(--space-6); }
.doc-stats-intro__tagline {
  font-family: var(--font-display); font-style: italic; font-size: 18px; font-weight: 700;
  color: var(--accent-orange); margin-bottom: var(--space-4);
}
.doc-stats-intro p { font-size: 15px; color: var(--text-secondary); line-height: 1.8; }
.doc-stats-intro__logo { height: 108px; width: 205px; display: block; margin: var(--space-14) auto 0; }

/* ── Brands We Stock ── */
.doc-brands__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8);
  margin-top: var(--space-10);
}
.doc-brand-group { padding-bottom: var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.doc-brand-group__label {
  font-family: var(--font-display); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-orange); display: block;
  padding-bottom: 8px; border-bottom: 2px solid rgba(200,101,27,0.25); margin-bottom: var(--space-2);
}
.doc-brand-group__list { font-size: 13.5px; color: var(--navy-ink); line-height: 1.85; margin-top: var(--space-2); }

/* ── Table of Contents ── */
.doc-toc__list { margin-top: var(--space-10); display: flex; flex-direction: column; }
.doc-toc__row {
  display: flex; align-items: baseline; gap: var(--space-4); padding: 15px 0;
  border-bottom: 1px solid var(--border-subtle); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.doc-toc__num { font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--accent-orange); width: 26px; flex-shrink: 0; }
.doc-toc__name { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--navy-ink); transition: color var(--dur-fast) var(--ease-out-quart); }
.doc-toc__row:hover .doc-toc__name { color: var(--accent-orange); }
.doc-toc__sub { margin: 6px 0 0 42px; font-size: 12.5px; color: var(--text-tertiary); line-height: 2; }

/* ── Chapter banners (photo header for major sections) ── */
.doc-chapter-banner {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  height: 220px; margin: var(--space-10) 0 var(--space-8);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  padding: var(--space-6) var(--space-8);
}
.doc-chapter-banner--sm {
  height: 80px; padding: 0 var(--space-6); flex-direction: row; align-items: center; justify-content: flex-start;
  margin: var(--space-10) 0 var(--space-6);
}
.doc-chapter-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.doc-chapter-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(14,20,38,0.35), rgba(14,20,38,0.62)); z-index: 1; }
.doc-chapter-banner__label {
  position: relative; z-index: 2; font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-orange); margin-bottom: 6px;
}
.doc-chapter-banner--sm .doc-chapter-banner__label { margin-bottom: 0; }
.doc-chapter-banner__title {
  position: relative; z-index: 2; font-family: var(--font-display); font-weight: 900; color: #fff;
  font-size: clamp(22px, 3vw, 32px); letter-spacing: -0.02em;
}
.doc-chapter-banner--sm .doc-chapter-banner__title {
  font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; margin-left: var(--space-3);
}

/* .doc-topic-page marks a named sub-topic (e.g. "Our Journey") that should
   always open on its own fresh printed page — see css/print.css. No effect
   on screen; it's a plain content flow there. */

/* ── Manifesto quote (About, brochure only) ── */
.doc-quote { border-left: 3px solid var(--accent-orange); padding-left: 22px; margin: var(--space-8) 0 var(--space-6); }
.doc-quote p { font-family: var(--font-display); font-size: clamp(19px,2.2vw,25px); font-weight: 700; color: var(--navy-ink); line-height: 1.45; letter-spacing: -0.01em; }
.doc-quote cite { display: block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--accent-orange); font-style: normal; }

/* ── Values list (About, brochure only) ── */
.doc-values { display: flex; flex-direction: column; margin-top: var(--space-8); }
.doc-value { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-4); padding: 20px 0; border-bottom: 1px solid var(--border-subtle); }
.doc-value:last-child { border-bottom: none; }
.doc-value__num { font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--accent-orange); padding-top: 2px; }
.doc-value__name { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--navy-ink); margin-bottom: 5px; }
.doc-value__desc { font-size: 13.5px; color: var(--text-secondary); line-height: 1.7; }

/* ── Timeline (About, brochure only) ── */
.doc-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-8); }
.doc-timeline__item { position: relative; padding-top: 16px; border-top: 2px solid rgba(200,101,27,0.25); break-inside: avoid; }
.doc-timeline__year { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent-orange); margin-bottom: 8px; text-transform: uppercase; }
.doc-timeline__item h4 { font-family: var(--font-display); font-size: 14.5px; font-weight: 700; color: var(--navy-ink); margin-bottom: 6px; }
.doc-timeline__item p { font-size: 12.5px; color: var(--text-secondary); line-height: 1.65; }

/* ── Global Presence (brochure only) ── */
.doc-country-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: var(--space-8); }
.doc-country { display: flex; align-items: center; gap: 12px; background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 14px 16px; }
.doc-country--hq { border-left: 3px solid var(--accent-orange); }
.doc-country__name { display: block; font-family: var(--font-display); font-size: 13.5px; font-weight: 700; color: var(--navy-ink); }
.doc-country__region { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
.doc-region-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-top: var(--space-8); }
.doc-region { text-align: center; background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 22px 14px; }
.doc-region__count { font-family: var(--font-display); font-size: 30px; font-weight: 900; color: var(--accent-orange); line-height: 1; margin-bottom: 6px; }
.doc-region__name { font-family: var(--font-display); font-size: 12.5px; font-weight: 700; color: var(--navy-ink); margin-bottom: 4px; }
.doc-region__list { font-size: 11px; color: var(--text-tertiary); line-height: 1.6; }

/* ── What We Supply grid (reuses .bento-card's inner visual language,
   not .bento's named-area layout — a document wants uniform card
   weight, not the homepage's asymmetric lg/md/sm marketing layout) ── */
.doc-supply-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-8); }
.doc-supply-grid .bento-card { min-height: 220px; }
.doc-supply-stat { text-align: center; margin-top: var(--space-8); font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--navy-ink); }
.doc-supply-stat span { color: var(--accent-orange); }
/* Sits between the intro paragraph and the grid rather than trailing
   after it — a trailing line has nowhere to go if the grid alone fills
   the rest of a printed page, so it strands itself on an otherwise-
   blank next page. */
.doc-supply-stat--lead { margin-top: var(--space-6); margin-bottom: var(--space-2); }

/* ── Catalogue category blocks ── */
.doc-cat { padding-top: var(--space-10); margin-top: var(--space-10); border-top: 1px solid var(--border-subtle); }
.doc-cat:first-of-type { padding-top: 0; margin-top: 0; border-top: none; }
.doc-cat__head { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-6); }
.doc-cat__icon {
  width: 44px; height: 44px; border-radius: var(--radius-md); flex-shrink: 0;
  background: rgba(200,101,27,0.1); border: 1px solid rgba(200,101,27,0.2);
  display: flex; align-items: center; justify-content: center; color: var(--accent-orange);
}
.doc-cat__label { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-orange); margin-bottom: 4px; }
.doc-cat__title { font-family: var(--font-display); font-size: 24px; font-weight: 900; color: var(--navy-ink); letter-spacing: -0.02em; line-height: 1.15; }
.doc-cat__desc { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-top: 6px; max-width: 62ch; }

/* .elec-badge is shared (style-v2.css); the surrounding grid/box/title
   layer is only defined inline on products.html, so it's repeated here
   for the Electrical category card on these standalone documents. */
.elec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.elec-box { background: #fff; border-radius: 14px; padding: 28px; border: 1px solid rgba(0,0,0,0.07); }
.elec-title { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-orange); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.elec-list { display: flex; flex-wrap: wrap; gap: 7px; }

.doc-cat__photo {
  width: 100%; height: 160px; object-fit: cover; display: block;
  border-radius: var(--radius-lg); margin-bottom: var(--space-6);
}

/* ── Other Products ── */
.doc-other-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.doc-other-item {
  background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  padding: 11px 14px; font-size: 13px; font-weight: 500; color: var(--text-secondary);
  display: flex; align-items: center; gap: 8px;
}
.doc-other-item::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-orange); flex-shrink: 0; }

/* ── Inside Back Cover ── */
.doc-backmatter { text-align: center; }
.doc-backmatter__title { font-family: var(--font-display); font-size: clamp(28px,4vw,42px); font-weight: 900; color: var(--navy-ink); letter-spacing: -0.02em; margin-bottom: var(--space-4); }
.doc-backmatter__sub { font-size: 15.5px; color: var(--text-secondary); max-width: 52ch; margin: 0 auto var(--space-10); line-height: 1.8; }
.doc-contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); max-width: 620px; margin: 0 auto; }
.doc-contact-row {
  display: flex; align-items: center; gap: 12px; background: var(--bg-sunken); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 16px 18px; text-align: left;
}
.doc-contact-row--wa { background: rgba(37,211,102,0.08); border-color: rgba(37,211,102,0.25); grid-column: 1 / -1; }
.doc-contact-row__icon {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; background: rgba(200,101,27,0.1); color: var(--accent-orange);
  display: flex; align-items: center; justify-content: center;
}
.doc-contact-row--wa .doc-contact-row__icon { background: rgba(37,211,102,0.16); color: #1a9e4f; }
.doc-contact-row__label { display: block; font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 2px; }
.doc-contact-row__val { font-size: 14.5px; font-weight: 600; color: var(--navy-ink); }

.doc-orange-strip {
  background: linear-gradient(135deg, var(--accent-orange) 0%, #A9530F 100%);
  color: #fff; text-align: center; padding: 20px var(--space-6); font-family: var(--font-display);
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.03em; margin-top: var(--space-14);
}

/* ── How to Order ── */
.doc-order-box {
  max-width: 640px; margin: 0 auto; border: 1.5px solid rgba(44,62,107,0.18); border-radius: var(--radius-lg);
  padding: var(--space-8); text-align: center;
}
.doc-order-box__label { font-family: var(--font-display); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-orange); margin-bottom: var(--space-6); }
.doc-order-steps { display: flex; flex-direction: column; gap: var(--space-4); text-align: left; margin-bottom: var(--space-8); }
.doc-order-step { display: flex; align-items: flex-start; gap: 14px; }
.doc-order-step__num {
  width: 26px; height: 26px; border-radius: 50%; background: var(--navy-ink); color: #fff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 12px; font-weight: 700;
}
.doc-order-step p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; padding-top: 3px; }
.doc-order-box__foot { padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.doc-order-box__foot img { height: 26px; width: 49px; margin-bottom: 6px; }
.doc-order-box__foot a { font-size: 13.5px; color: var(--navy-ink); font-weight: 600; }

/* ── Back Cover ── */
.doc-backcover {
  background: var(--navy-deep); color: #fff; text-align: center; padding: 120px var(--space-6);
  display: flex; flex-direction: column; align-items: center;
}
.doc-backcover__logo { height: 60px; width: 114px; margin-bottom: var(--space-6); display: block; }
.doc-backcover__tagline { font-family: var(--font-display); font-style: italic; font-size: 15px; font-weight: 600; color: var(--accent-orange); margin-bottom: var(--space-6); }
.doc-backcover__rule { width: 48px; height: 2px; background: rgba(200,101,27,0.5); margin-bottom: var(--space-8); border-radius: 1px; }
.doc-backcover__addr { font-size: 13.5px; color: rgba(255,255,255,0.62); line-height: 1.9; margin-bottom: var(--space-5); }
.doc-backcover__addr strong { display: block; color: rgba(255,255,255,0.85); font-family: var(--font-display); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }
.doc-backcover__contact { margin-top: var(--space-4); font-size: 14px; color: #fff; display: flex; flex-direction: column; gap: 8px; }
.doc-backcover__contact a { color: #fff; }
.doc-backcover__contact a:hover { color: var(--accent-orange); }
.doc-backcover__qr { margin-top: var(--space-10); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.doc-backcover__qr-box { width: 116px; height: 116px; background: #fff; border-radius: 10px; padding: 8px; overflow: hidden; }
.doc-backcover__qr-box canvas, .doc-backcover__qr-box img { width: 100% !important; height: 100% !important; }
.doc-backcover__qr-cap { font-size: 11.5px; color: rgba(255,255,255,0.5); }

/* ── Responsive ── */
@media (max-width: 860px) {
  .doc-brands__grid { grid-template-columns: repeat(2, 1fr); }
  .doc-contact-grid { grid-template-columns: 1fr; }
  .doc-other-grid { grid-template-columns: repeat(2, 1fr); }
  .doc-supply-grid { grid-template-columns: repeat(2, 1fr); }
  .doc-timeline { grid-template-columns: repeat(2, 1fr); }
  .doc-country-grid { grid-template-columns: repeat(2, 1fr); }
  .doc-region-grid { grid-template-columns: repeat(2, 1fr); }
  .doc-cover__cog { width: 440px; height: 440px; }
}
@media (max-width: 560px) {
  .doc-brands__grid { grid-template-columns: 1fr; }
  .doc-other-grid { grid-template-columns: 1fr; }
  .doc-supply-grid { grid-template-columns: 1fr; }
  .doc-timeline { grid-template-columns: 1fr; }
  .doc-country-grid { grid-template-columns: 1fr; }
  .doc-region-grid { grid-template-columns: 1fr; }
  .elec-grid { grid-template-columns: 1fr; }
  .doc-cover { padding: 128px var(--space-4) 64px; }
  .doc-cover__cog { display: none; }
  .doc-chapter-banner { height: 168px; padding: var(--space-4) var(--space-5); }
  .doc-backcover { padding: 88px var(--space-5); }
  .doc-order-box { padding: var(--space-6) var(--space-5); }
}