/* ============================================================
   Reports Catalogue — /reports/
   Reuses existing components:
     · gateway cards  (home.css  .gw-card / .gw-emblem / .gw-kicker / .gw-go)
     · region & sector cards (report-landing.css  .ls-grid / .ls-card)
     · section heads (style.css  .section-head / .eyebrow / .section-title)
   This file only adds the page chrome + the client-side reveal states.
   ============================================================ */

body.rep-page { background: var(--cream); }
.rep-page .site-header {
  background: rgba(244, 241, 234, 0.9);
  border-bottom: 1px solid rgba(194, 160, 76, 0.38);
}

/* ---------- Compact navy hero (same gradient language as other pages) ---------- */
.rep-hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 120% at 80% 0%, var(--navy-soft) 0%, var(--navy) 48%, var(--navy-deep) 100%);
  color: #fff; padding: 40px 0 46px;
}
.rep-hero .container { position: relative; z-index: 2; }
/* reuse the homepage world map (styles inherited from home.css .hero-world),
   placed behind the header content and kept subtler than the homepage hero */
.rep-hero .hero-world {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: min(740px, 66%); height: auto; z-index: 1; pointer-events: none; opacity: .9;
  -webkit-mask-image: linear-gradient(95deg, transparent 6%, rgba(0,0,0,.5) 40%, #000 72%);
          mask-image: linear-gradient(95deg, transparent 6%, rgba(0,0,0,.5) 40%, #000 72%);
}
@media (max-width: 880px) { .rep-hero .hero-world { width: 120%; right: -22%; opacity: .5; } }
@media (max-width: 600px) { .rep-hero .hero-world { display: none; } }
/* Available-market highlight: very subtle red contour on China, Germany & the UK.
   Restrained — signals availability without dominating the calm gold linework. */
.rep-hero .hero-world .w-cn {
  fill: rgba(180, 60, 55, 0.05);
  stroke: #cf4d45;
  stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round;
  opacity: 0.42;
  filter: drop-shadow(0 0 3px rgba(207, 77, 69, 0.45));
}
.rep-hero .rb-breadcrumb { margin-bottom: 12px; }
.rep-hero h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.06; margin: 0 0 4px;
}
.rep-hero .lead { font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,.82); max-width: 620px; margin: 8px 0 12px; }
.rep-hero .rep-note { font-size: 0.82rem; line-height: 1.5; color: rgba(255,255,255,.55); max-width: 620px; margin: 0; }

/* ---------- Steps ---------- */
.rep-step { padding: 56px 0; scroll-margin-top: 90px; }
.rep-step + .rep-step { padding-top: 10px; }
.rep-step .section-head { margin-bottom: 32px; }
.is-hidden { display: none !important; }

/* ---------- Step 1: country cards (reuse .gw-card as selectable buttons) ---------- */
button.gw-card { width: 100%; text-align: left; font: inherit; cursor: pointer; }
.rep-page .gw-card { min-height: 232px; }              /* no night-map artwork here */
.rep-page .gw-card .gw-kicker,
.rep-page .gw-card h3,
.rep-page .gw-card p { max-width: none; }               /* free the full width */
.rep-page .gw-card.is-selected {
  border-color: rgba(194,160,76,.65);
  box-shadow: 0 26px 54px rgba(15,28,48,.42), 0 0 0 1px rgba(194,160,76,.4);
  transform: translateY(-4px);
}
.rep-page .gw-card.is-selected .gw-go { gap: 12px; }

/* ---------- Step 2: region groups (reuse .ls-grid / .ls-card) ---------- */
.rep-region-group { display: none; }
.rep-region-group.is-active { display: grid; }

/* selectable region/sector cards rendered as <button> reuse the ls-card look */
button.ls-card { width: 100%; text-align: left; font: inherit; cursor: pointer; }
.ls-card.soon { cursor: default; }
.ls-card.is-selected { border-color: transparent; box-shadow: var(--shadow); transform: translateY(-4px); }
.ls-card.is-selected::before { width: 100%; }

@media (max-width: 760px) {
  .rep-step { padding: 44px 0; }
  .rep-hero { padding: 32px 0 38px; }
}

/* Briefing process (request-hub repositioning) */
.rep-process { background: #fff; padding: 56px 0 40px; }
.rep-process .section-title { font-size: 1.6rem; margin-bottom: 26px; }
.rep-proc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rep-proc { background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 22px 22px 20px; }
.rep-proc .n {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--navy); color: var(--gold-soft); font-family: var(--serif); font-size: 1rem; font-weight: 600;
  margin-bottom: 12px;
}
.rep-proc h3 { font-family: var(--serif); font-size: 1.2rem; color: var(--navy); margin: 0 0 6px; }
.rep-proc p { font-size: 0.9rem; line-height: 1.55; color: var(--grey-text); margin: 0; }
@media (max-width: 760px) { .rep-proc-grid { grid-template-columns: 1fr; gap: 12px; } }