/* ============================================================
   GATEWAY PAGES — shared layer
   Loaded only by /china-business/, /germany-business/ and
   /united-kingdom-business/ after the country stylesheet.

   Contains: the quiet orientation map, the partner network
   block and the stacked advisory rows. No new design language —
   every value comes from the existing tokens.
   ============================================================ */

/* ---------- Map: orientation only, nothing routes ---------- */
.gw-map-wrap .province,
.gw-map-wrap .de-state,
.gw-map-wrap .uk-region { cursor: default; }

.gw-map-wrap { position: relative; }
.gw-map-wrap svg { width: 100%; height: auto; display: block; }

.gw-map-note {
  margin: 16px 0 0; font-size: 0.78rem; line-height: 1.5;
  color: var(--grey-text); max-width: 42ch;
}

/* small name-only tooltip (replaces the former large region card) */
.gw-tip {
  position: fixed; z-index: 70; pointer-events: none;
  left: -9999px; top: -9999px;
  padding: 7px 13px; border-radius: 6px;
  background: var(--navy); color: #fff;
  border: 1px solid rgba(194,160,76,.5);
  font-family: var(--sans); font-size: 0.82rem; font-weight: 500;
  letter-spacing: .01em; white-space: nowrap;
  box-shadow: 0 8px 22px rgba(16,28,48,.28);
  opacity: 0; transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
}
.gw-tip.show { opacity: 1; transform: translateY(0); }

/* ---------- Partner network ---------- */
.gw-partners { background: var(--cream); padding: 52px 0 76px; }
.gw-partners .section-head { margin-bottom: 32px; }

/* The partner list carries the actual value, so it gets the wider column. */
.gw-pn-grid {
  display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: 44px; align-items: start;
}
.gw-pn-map { position: sticky; top: 96px; }
.gw-pn-list { display: flex; flex-direction: column; gap: 16px; }

/* ---------- Partner card ---------- */
.pn-card {
  position: relative; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px 20px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
/* visual emphasis only — transform and shadow do not affect layout flow */
.pn-card:hover,
.pn-card:focus-within {
  border-color: rgba(194,160,76,.45);
  box-shadow: var(--shadow-sm);
}

.pn-head { display: flex; gap: 16px; align-items: flex-start; }

/* logo slot — carries the real logo later, a monogram until then */
.pn-logo {
  flex: none; width: 56px; height: 56px; border-radius: 10px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--navy); border: 1px solid rgba(194,160,76,.35);
  font-family: var(--serif); font-size: 1.15rem; font-weight: 600;
  color: var(--gold-soft); letter-spacing: .04em;
}
.pn-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; background: #fff; }

/* Wide wordmarks (roughly 4:1 and wider) are unreadable in a square tile.
   They get a wider slot instead of being shrunk into nothing. */
.pn-logo--wide { width: 124px; border-radius: 8px; }
/* A full lockup carries a two-line wordmark under the mark. In the 56px
   tile that wordmark renders about 10px tall for both lines together and
   simply disappears. This variant is as tall as it needs to be for the
   lines to read, roughly 17px each. `align-items: flex-start` on .pn-head
   means only this card's head grows, nothing shifts sideways. */
.pn-logo--lockup { width: 124px; height: 88px; border-radius: 8px; }
@media (max-width: 760px) { .pn-logo--lockup { width: 108px; height: 76px; } }
@media (max-width: 760px) { .pn-logo--wide { width: 104px; } }

.pn-id { min-width: 0; }
.pn-name {
  font-family: var(--serif); font-size: 1.24rem; font-weight: 600;
  color: var(--navy); margin: 2px 0 6px; line-height: 1.18;
}
.pn-name a { color: inherit; text-decoration: none; }
.pn-name a:hover { color: var(--gold); }

.pn-meta {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 0.76rem; color: var(--grey-text);
}
.pn-cat {
  font-size: 0.66rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--gold);
  border: 1px solid rgba(194,160,76,.4); border-radius: 20px; padding: 3px 10px;
}
.pn-sep { color: var(--line); }

.pn-desc {
  margin: 14px 0 0; font-size: 0.89rem; line-height: 1.58; color: var(--grey-text);
}

.pn-actions { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.pn-link {
  display: inline-flex; align-items: center; gap: 7px;
  /* comfortable touch target: the link is the card's only action */
  min-height: 44px; padding: 11px 0;
  font-size: 0.83rem; font-weight: 600; letter-spacing: .02em;
  color: var(--navy); text-decoration: none;
  transition: gap .22s ease, color .22s ease;
}
.pn-link:hover { gap: 11px; color: var(--gold); }
.pn-link .ext { width: 13px; height: 13px; flex: none; }
.pn-link.is-pending { color: var(--grey-text); cursor: default; font-weight: 500; }
.pn-link.is-pending:hover { gap: 7px; color: var(--grey-text); }

/* placeholder marker — removed together with the placeholder content */
.pn-flag {
  position: absolute; top: 14px; right: 16px;
  font-size: 0.62rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--grey-text);
  border: 1px dashed var(--line); border-radius: 4px; padding: 3px 8px;
}

/* ---------- Collaboration detail ----------
   Always in the DOM so it is never hover-only. The button toggles
   it everywhere; on pointer devices hover and focus also reveal it. */
.pn-toggle {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; padding: 8px 0; cursor: pointer;
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--grey-text);
  transition: color .22s ease;
  min-height: 44px;                /* comfortable touch target */
}
.pn-toggle:hover { color: var(--gold); }
.pn-toggle .chev { transition: transform .25s ease; width: 12px; height: 12px; }
.pn-card[data-open="1"] .pn-toggle .chev { transform: rotate(180deg); }

.pn-detail {
  overflow: hidden; max-height: 0;
  transition: max-height .32s ease, margin-top .32s ease;
  margin-top: 0;
}
/* Opens on the button only. Hover deliberately does NOT open the panel:
   changing a card's height on mouse-over shifts every card below it. */
.pn-card[data-open="1"] .pn-detail { max-height: 460px; margin-top: 6px; }

.pn-detail-inner {
  background: var(--cream); border-left: 2px solid var(--gold);
  padding: 16px 18px; border-radius: 0 6px 6px 0;
}
.pn-dl { margin: 0; display: grid; gap: 12px; }
.pn-dl > div { display: grid; gap: 3px; }
.pn-dl dt {
  font-size: 0.64rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--gold);
}
.pn-dl dd { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--navy); }
.pn-quote {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
  font-family: var(--serif); font-size: 1rem; line-height: 1.45;
  color: var(--navy); font-style: italic;
}

/* ---------- Advisory: stacked rows instead of three wide modules ---------- */
.cbg-adv-grid--rows { grid-template-columns: 1fr; gap: 14px; }
.cbg-adv-grid--rows .cbg-adv-card {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 6px 22px; align-items: center; padding: 22px 26px;
}
/* the gold accent becomes a vertical rule so it reads as part of the row */
.cbg-adv-grid--rows .cbg-adv-card::before {
  width: 2px; height: 38px; margin: 0;
  grid-column: 1; grid-row: 1 / span 2; align-self: center;
}
.cbg-adv-grid--rows .adv-num {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 700;
  letter-spacing: .22em; color: var(--gold);
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
}
.cbg-adv-grid--rows .cbg-adv-card h3 { margin: 0; grid-column: 3; grid-row: 1; }
.cbg-adv-grid--rows .cbg-adv-card p { margin: 4px 0 0; grid-column: 3; grid-row: 2; }
.cbg-adv-grid--rows .adv-go {
  grid-column: 4; grid-row: 1 / span 2; align-self: center; white-space: nowrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .gw-pn-grid { grid-template-columns: 1fr; gap: 34px; }
  .gw-pn-map { position: static; }
}
@media (max-width: 760px) {
  .gw-partners { padding: 60px 0 64px; }
  .gw-pn-list { gap: 14px; }
  .pn-card { padding: 20px 18px 18px; }
  .pn-head { gap: 13px; }
  .pn-logo { width: 48px; height: 48px; font-size: 1rem; }
  .pn-name { font-size: 1.12rem; }
  .pn-flag { position: static; display: inline-block; margin-bottom: 10px; }

  .cbg-adv-grid--rows .cbg-adv-card {
    grid-template-columns: 1fr; gap: 6px; padding: 20px 18px 18px;
  }
  .cbg-adv-grid--rows .cbg-adv-card::before {
    width: 34px; height: 2px; grid-column: 1; grid-row: auto; margin-bottom: 10px;
  }
  .cbg-adv-grid--rows .adv-num,
  .cbg-adv-grid--rows .cbg-adv-card h3,
  .cbg-adv-grid--rows .cbg-adv-card p,
  .cbg-adv-grid--rows .adv-go { grid-column: 1; grid-row: auto; }
  .cbg-adv-grid--rows .adv-go { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .pn-card, .pn-detail, .pn-toggle .chev, .gw-tip { transition: none; }
}

/* ---------- Partner locations on the map ----------
   One marker per partner, invisible until its card is hovered or focused.
   The map itself stays quiet; the light only appears on intent. */
.pn-markers { pointer-events: none; }
.pn-marker { opacity: 0; transition: opacity .3s ease; }
.pn-marker.is-lit { opacity: 1; }
.pm-halo { fill: rgba(194,160,76,.20); }
.pm-dot  { fill: var(--gold); stroke: var(--white); stroke-width: 1.1; }

.pn-marker.is-lit .pm-halo {
  animation: pmPulseOnce 1.3s ease-out 1;   /* one short impulse, then still */
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes pmPulseOnce {
  0%   { opacity: 0; transform: scale(.55); }
  45%  { opacity: 1; transform: scale(1.16); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pn-marker { transition: none; }
  .pn-marker.is-lit .pm-halo { animation: none; opacity: .8; }
}

/* ============================================================
   MAP CAMERA  (js/map-camera.js)
   Shared by the China, Germany and UK maps. gateway.css loads after
   the per-country stylesheets, and these selectors carry the wrapper,
   so they win over the country rules without !important.
   ============================================================ */

/* The map window. The camera narrows the viewBox, so whatever then
   falls outside the frame has to be clipped here at the svg viewport
   or it spills across the heading and the partner cards. Clipping
   happens before the drop-shadow filter runs, so each map's resting
   silhouette shadow still falls outside the box exactly as before.
   The radius only becomes visible once a zoomed map fills the frame. */
.gw-map-wrap { isolation: isolate; }
.gw-map-wrap svg {
  overflow: hidden;
  border-radius: var(--radius);
}

/* While the camera zooms, map-camera.js keeps --cam-sw on the svg at
   viewBoxWidth/fullWidth. Multiplying every stroke by it holds each
   line at its at-rest thickness on screen, so borders never fatten
   as the camera moves in. The base numbers mirror the country files. */
.gw-map-wrap .province { stroke-width: calc(0.45px * var(--cam-sw, 1)); }
.gw-map-wrap .province:hover,
.gw-map-wrap .province.is-hover,
.gw-map-wrap .province.is-active { stroke-width: calc(1.1px * var(--cam-sw, 1)); }

.gw-map-wrap .de-state,
.gw-map-wrap .uk-region { stroke-width: calc(0.5px * var(--cam-sw, 1)); }
.gw-map-wrap .de-state:hover,
.gw-map-wrap .de-state.is-hover,
.gw-map-wrap .de-state.is-active,
.gw-map-wrap .uk-region:hover,
.gw-map-wrap .uk-region.is-hover,
.gw-map-wrap .uk-region.is-active { stroke-width: calc(0.9px * var(--cam-sw, 1)); }

.gw-map-wrap .pm-dot { stroke-width: calc(1.1px * var(--cam-sw, 1)); }

/* Place name beside the dot. Navy with a soft cream halo, so it reads
   on the landmass and on open water alike. The text element and its
   content are created by map-camera.js from its config. */
.gw-map-wrap .pm-label {
  font-family: var(--sans);
  font-size: calc(24px * var(--cam-sw, 1));
  font-weight: 600;
  letter-spacing: .02em;
  fill: var(--navy);
  stroke: rgba(244,241,234,.92);
  stroke-width: calc(5px * var(--cam-sw, 1));
  paint-order: stroke;
  dominant-baseline: central;
  opacity: 0;
  transition: opacity .3s ease .12s;
}
.gw-map-wrap .pn-marker.is-lit .pm-label { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .gw-map-wrap .pm-label { transition: none; }
}

/* the card whose location is showing gets the same quiet emphasis as hover */
.pn-card.is-located { border-color: rgba(194,160,76,.45); box-shadow: var(--shadow-sm); }

/* ---------- Wider map column for landscape maps ----------
   The China map is landscape (roughly 1.36:1), the Germany and UK maps are
   portrait. At the same column width China therefore renders barely half as
   tall and reads as "small". It gets an even split, and on large screens it
   may reach into the page margin — measured: 123px free at 1440px, 43px at
   1280px, which is why the bleed only starts at 1400px. */
@media (min-width: 1400px) {
  .gw-partners--wide-map .gw-map-wrap {
    width: calc(100% + 100px); margin-left: -100px;
  }
}
@media (max-width: 1020px) {
  .gw-partners--wide-map .gw-map-wrap { width: 100%; margin-left: 0; }
}

/* ---------- Partner list with no entries yet ---------- */
.pn-empty {
  background: var(--white); border: 1px dashed var(--line);
  border-radius: var(--radius); padding: 30px 28px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
}
.pn-empty p {
  margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--grey-text); max-width: 46ch;
}

/* ============================================================
   PARTNER-FIRST GATEWAYS
   The partner block is the page hero: gateway eyebrow, H1 and a
   short benefit line sit above the map and the partner list.
   ============================================================ */
.gw-partner-hero { padding-top: 44px; }
.gw-partner-hero .section-head { max-width: 760px; }
.gw-partner-hero h1.section-title { margin-bottom: 18px; }
.gw-partner-hero .section-lead { max-width: 66ch; }

/* ---------- Compact market overview (former country hero + "why") ---------- */
.gw-market { padding: 60px 0 64px; }
.gw-market .section-head { margin-bottom: 30px; }
.gw-market-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.gw-facts {
  margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 40px;
}
.gw-facts > div { display: grid; gap: 4px; }
.gw-facts dt {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.gw-facts dd {
  margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--navy);
}

@media (max-width: 900px) {
  .gw-market { padding: 46px 0 50px; }
  .gw-market-grid { grid-template-columns: 1fr; gap: 16px; }
  .gw-facts { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- Mobile: partners come before the map ----------
   The map is supporting material; on a phone it must not fill the
   first screen ahead of the actual partners. */
@media (max-width: 1020px) {
  .gw-pn-grid { gap: 30px; }
  .gw-pn-list { order: 1; }
  .gw-pn-map  { order: 2; }
}
@media (max-width: 760px) {
  .gw-partner-hero { padding-top: 32px; }
  .gw-map-wrap svg { max-height: 44vh; }
  .gw-map-note { margin-top: 12px; }
}

/* Content cards on these pages use the shared gateway ring; it lives in
   style.css now, together with the navigation's, so the same component
   is not styled twice. Nothing card-specific is left here. */