/* China on a Bike 2026 — wspólna warstwa: tokeny + komponent hero.
   Wczytywana przez oba shortcode'y. Zmiana koloru tutaj przechodzi
   jednocześnie na dashboard i na dziennik. */

.mmc,
.mmc-dash{
  /* Skala typografii. Jedno pokrętło: --mmc-scale. Ustawia je pole
     „Rozmiar tekstu" w panelu (Wyprawa 2026 → Ustawienia), a wszystkie
     stopnie poniżej same się dopasowują. Nic w tej wtyczce nie schodzi
     poniżej 13 px przy skali 1 — to podłoga czytelności. */
  --mmc-scale:1;

  --fs-2xs:calc(13px * var(--mmc-scale));
  --fs-xs:calc(14px * var(--mmc-scale));
  --fs-sm:calc(15px * var(--mmc-scale));
  --fs-md:calc(16px * var(--mmc-scale));
  --fs-base:calc(17px * var(--mmc-scale));
  --fs-lg:calc(19px * var(--mmc-scale));
  --fs-xl:calc(21px * var(--mmc-scale));
  --fs-2xl:calc(24px * var(--mmc-scale));
  --fs-3xl:calc(28px * var(--mmc-scale));
  --fs-4xl:calc(34px * var(--mmc-scale));
  --fs-5xl:calc(40px * var(--mmc-scale));
  --fs-6xl:calc(48px * var(--mmc-scale));

  --fs-hero:clamp(calc(36px * var(--mmc-scale)),5.4vw,calc(68px * var(--mmc-scale)));
  --fs-hero-sub:clamp(calc(23px * var(--mmc-scale)),2.8vw,calc(35px * var(--mmc-scale)));
  --fs-fig:clamp(calc(30px * var(--mmc-scale)),3.8vw,calc(44px * var(--mmc-scale)));

  --mmc-ink:#0C1B33;
  --mmc-ink2:#132747;
  --mmc-ink3:#1C3459;
  --mmc-porcelain:#FAFCFD;
  --mmc-porcelain2:#EFF4F9;
  --mmc-qing:#2C5F91;
  --mmc-qing-deep:#1E456C;
  --mmc-qing-wash:#E4EEF7;
  --mmc-cinnabar:#BE3A2B;
  --mmc-cinnabar-wash:#FBEBE8;
  --mmc-jade:#2C7A63;
  --mmc-jade-wash:#E5F2ED;
  --mmc-gold:#B9913C;
  --mmc-text:#101F35;
  --mmc-muted:#5A6E88;
  --mmc-muted2:#8496AB;
  --mmc-line:#D8E3EE;
  --mmc-line-soft:#E8EFF6;
  --mmc-shadow:0 1px 2px rgba(16,31,53,.05),0 12px 32px -12px rgba(16,31,53,.18);
  --mmc-shadow-lift:0 2px 4px rgba(16,31,53,.06),0 22px 44px -16px rgba(16,31,53,.26);
  --mmc-serif:"Noto Serif SC","Songti SC","SimSun",Georgia,serif;
  --mmc-brush:"Ma Shan Zheng","Noto Serif SC","Songti SC",serif;
  --mmc-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --mmc-r-lg:20px;
  --mmc-r-md:14px;
  --mmc-r-sm:10px;
  /* Offset dla przyklejonej nawigacji — ustawiany atrybutem shortcode'a,
     żeby nie chowała się pod stałym nagłówkiem Divi. */
  --mmc-navtop:0px;
}

/* ── Hero ───────────────────────────────────────────
   Panel, nie pas na całą szerokość — w budowniczym stron
   full-bleed zawsze kończy się walką z kontenerem sekcji. */

.mmc-hero{
  position:relative;
  border-radius:var(--mmc-r-lg);
  overflow:hidden;
  isolation:isolate;
  color:#EAF2FA;
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(44,95,145,.55) 0%, rgba(12,27,51,0) 62%),
    linear-gradient(168deg,var(--mmc-ink2) 0%,var(--mmc-ink) 58%,#0A1729 100%);
}
.mmc-hero::before{
  content:"";position:absolute;inset:0;opacity:.16;pointer-events:none;z-index:1;
  background-image:
    repeating-linear-gradient(45deg,rgba(160,200,240,.55) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(-45deg,rgba(160,200,240,.55) 0 1px,transparent 1px 26px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.25) 55%,transparent 88%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.25) 55%,transparent 88%);
}
.mmc-hero__inner{position:relative;z-index:3;padding:44px 36px 100px}
.mmc-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:start}

.mmc-hero__eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.mmc-hero__cn{font-family:var(--mmc-brush);font-size:var(--fs-2xl);color:var(--mmc-gold);letter-spacing:.14em;line-height:1}
.mmc-hero__rule{height:1px;flex:1;min-width:40px;max-width:110px;background:linear-gradient(90deg,rgba(185,145,60,.85),rgba(185,145,60,0))}
.mmc-hero__kicker{font-family:var(--mmc-mono);font-size:var(--fs-2xs);letter-spacing:.22em;text-transform:uppercase;color:#94B4D4}

.mmc-hero .mmc-hero__title{
  font-family:var(--mmc-serif);font-weight:900;
  font-size:var(--fs-hero);line-height:1;letter-spacing:-.025em;
  margin:0;color:#FBFDFF;
}
.mmc-hero .mmc-hero__title small{
  display:block;font-family:var(--mmc-brush);font-weight:400;
  font-size:var(--fs-hero-sub);color:#8FB6DA;letter-spacing:.2em;
  margin-top:13px;line-height:1;
}
.mmc-hero .mmc-hero__lead{margin:18px 0 0;color:#B7D0E6;line-height:1.6;font-size:var(--fs-base);max-width:56ch;line-height:1.55}

.mmc-hero__pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.mmc-hero .mmc-pill{
  font-family:var(--mmc-mono);font-size:var(--fs-xs);letter-spacing:.04em;
  padding:7px 13px;border-radius:999px;
  background:rgba(143,182,218,.13);border:1px solid rgba(143,182,218,.28);color:#CEE0F2;
}
.mmc-hero .mmc-pill b{color:#fff;font-weight:600}

/* Prawy panel: licznik na dashboardzie, statystyki w dzienniku. */
.mmc-hero__panel{
  min-width:330px;background:rgba(250,252,253,.055);
  border:1px solid rgba(143,182,218,.26);border-radius:var(--mmc-r-lg);
  padding:20px 22px 18px;
}
.mmc-hero__panel-label{
  font-family:var(--mmc-mono);font-size:var(--fs-2xs);letter-spacing:.22em;
  text-transform:uppercase;color:#8FB6DA;
}
.mmc-hero .mmc-hero__panel-foot{
  margin-top:15px;padding-top:13px;border-top:1px dashed rgba(143,182,218,.26);
  font-size:var(--fs-sm);color:#A9C6E1;line-height:1.5;
}
.mmc-hero .mmc-hero__panel-foot b{color:#EAF2FA;font-weight:600}

/* Liczby — licznik i statystyki dzielą tę samą typografię. */
.mmc-figs{display:flex;gap:10px;margin-top:13px;flex-wrap:wrap}
.mmc-fig{text-align:center;min-width:64px}
.mmc-hero .mmc-fig b{
  display:block;font-family:var(--mmc-mono);font-weight:700;
  font-size:var(--fs-fig);line-height:1;color:#fff;font-variant-numeric:tabular-nums;
}
.mmc-hero .mmc-fig span{
  display:block;margin-top:6px;font-size:var(--fs-2xs);letter-spacing:.13em;
  text-transform:uppercase;color:#7EA3C7;
}
.mmc-fig-sep{align-self:flex-start;font-family:var(--mmc-mono);font-size:var(--fs-4xl);color:rgba(143,182,218,.4);line-height:1.15}

/* Pieczęć */
.mmc-seal{
  position:relative;width:116px;height:116px;flex:none;
  border:3.5px solid var(--mmc-cinnabar);border-radius:9px;
  display:grid;grid-template-columns:1fr 1fr;place-items:center;
  transform:rotate(-7deg);background:rgba(190,58,43,.09);
  font-family:var(--mmc-brush);color:#E4574A;font-size:var(--fs-4xl);line-height:1;
}
.mmc-seal span{display:grid;place-items:center;width:100%;height:100%}
.mmc-seal::after{content:"";position:absolute;inset:4px;border:1px solid rgba(190,58,43,.4);border-radius:5px}
.mmc-hero__sealwrap{display:flex;justify-content:flex-end;margin-top:20px}

/* Fala 海水江崖 */
.mmc-hero__wave{position:absolute;left:0;right:0;bottom:-1px;height:92px;width:100%;z-index:2;pointer-events:none}

@media(max-width:820px){
  .mmc-hero__inner{padding:28px 20px 74px}
  .mmc-hero__grid{grid-template-columns:1fr;gap:24px}
  .mmc-hero__sealwrap{justify-content:flex-start;margin-top:2px}
  .mmc-seal{width:84px;height:84px;font-size:var(--fs-3xl)}
  .mmc-hero__panel{min-width:0}
  .mmc-hero__wave{height:58px}
  .mmc-fig{min-width:46px}
}
@media(prefers-reduced-motion:reduce){
  .mmc-hero *,.mmc-hero{animation:none!important;transition:none!important}
}