/* ============================================================
   module.css — shared layout system for CampusFlo MODULE pages
   Built on global.css tokens. Gives every module page the same
   shell (header, hero, alternating feature rows, connected band,
   FAQ, footer) so they're consistent by construction.
   Each page adds ONLY its own mockup CSS on top.
   ============================================================ */

/* ---- dark page header ---- */
.ph{background:#22364E;border-bottom:1px solid rgba(255,255,255,.06)}
.ph-in{display:flex;align-items:center;gap:26px;height:64px}
.ph nav{display:flex;gap:26px;margin-left:8px}
.ph nav a{font-size:14.5px;font-weight:600;color:rgba(255,255,255,.78)}
.ph nav a:hover{color:#fff}
.ph .r{margin-left:auto;display:flex;align-items:center;gap:16px}
.ph .r .login{font-size:14.5px;font-weight:600;color:rgba(255,255,255,.85)}

/* ---- hero shell ---- */
.mhero{background:radial-gradient(120% 90% at 82% -10%,#33506F 0%,var(--ink) 55%);color:#fff;padding:64px 0 80px;overflow:hidden;position:relative}
.mhero .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(92,123,166,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(92,123,166,.07) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(85% 80% at 65% 35%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(85% 80% at 65% 35%,#000 30%,transparent 80%)}
.mhero .in{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:50px;align-items:center}
.crumb{font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(255,255,255,.5);margin-bottom:18px}
.crumb a{color:inherit}.crumb a:hover{color:var(--cyan-bright)}
.mhero h1{font-size:clamp(34px,4.8vw,54px);color:#fff;margin:18px 0 0;letter-spacing:-.025em}
.mhero .sub{font-size:18px;color:rgba(255,255,255,.74);margin:20px 0 0;max-width:520px}
.mhero .sub b{color:#fff}
.mhero .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.mhero .micro{font-family:'JetBrains Mono',monospace;font-size:13px;color:rgba(255,255,255,.5);margin-top:16px}

/* ---- glass-screen + floating-chip mockup primitives (reusable) ---- */
.glass-screen{background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.16);border-radius:18px;backdrop-filter:blur(14px);box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden}
.gs-tb{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);font-size:12.5px;color:rgba(255,255,255,.65);font-weight:600}
.gs-tb .live{margin-left:auto;font-family:'JetBrains Mono';font-size:10px;color:var(--green);display:inline-flex;align-items:center;gap:5px}
.gs-tb .live i{width:6px;height:6px;border-radius:50%;background:var(--green)}
.gs-bd{padding:16px;display:grid;gap:9px}
/* .mchip — floating glass badge for product-page mockups. Namespaced away from
   global.css's inline pill `.chip` (homepage Sales/Inventory) which it used to
   clobber via position:absolute, causing chip overlap/clipping. */
.mchip{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;background:rgba(34,54,78,.92);border:1px solid rgba(92,123,166,.32);backdrop-filter:blur(8px);padding:9px 13px;border-radius:11px;font-size:12px;font-weight:700;color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.mchip svg{width:15px;height:15px;color:var(--green)}

/* ---- alternating feature rows (the module-page signature) ---- */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;padding:72px 0;border-bottom:1px solid var(--hairline)}
.frow:nth-child(even) .ftext{order:2}
.ftext .kicker{margin-bottom:16px}
.ftext h2{font-size:clamp(24px,3vw,33px);letter-spacing:-.02em}
.ftext p.lead{font-size:17px;color:var(--muted);margin-top:14px}
.flist{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:11px}
.flist li{display:flex;gap:11px;font-size:15px;color:var(--text)}
.flist li svg{width:20px;height:20px;color:var(--cyan);flex:none;margin-top:2px}
.fvis{background:linear-gradient(160deg,#22364E,#22364E);border-radius:18px;padding:26px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;min-height:300px;display:flex;align-items:center;justify-content:center}
.fvis .glow{position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(61,90,128,.34),transparent 70%);filter:blur(46px);top:-50px;right:-30px}

/* ---- compatibility / "works with" grid ---- */
.hw{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:42px}
.hwc{background:var(--card);border:1px solid var(--hairline);border-radius:14px;padding:22px;text-align:center;box-shadow:var(--shadow-sm)}
.hwc .hi{width:46px;height:52px;margin:0 auto 12px;display:grid;place-items:center;color:#fff;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(135deg,var(--cyan),var(--blue))}
.hwc .hi svg{width:22px;height:22px}
.hwc b{display:block;font-size:14px;color:var(--ink);font-weight:800}
.hwc span{font-size:12px;color:var(--muted);font-family:'JetBrains Mono'}

/* ---- connected-flow band ---- */
.conn{background:radial-gradient(120% 100% at 80% 0%,#15384e,#22364E);color:#fff;border-radius:20px;margin:0 24px;padding:54px 28px;text-align:center;border:1px solid rgba(92,123,166,.2)}
.conn .flow{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;margin-top:30px}
.cnode{display:flex;flex-direction:column;align-items:center;gap:10px;width:140px}
.cnode .cn{width:58px;height:65px;display:grid;place-items:center;color:#fff;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(135deg,var(--cyan),var(--blue))}
.cnode .cn svg{width:24px;height:24px}
.cnode b{font-size:14px;color:#fff}
.cnode span{font-size:11.5px;color:rgba(255,255,255,.55);font-family:'JetBrains Mono'}
.carr{width:46px;color:var(--cyan-bright);display:grid;place-items:center}.carr svg{width:22px;height:22px}

/* ---- FAQ ---- */
.faq{max-width:800px;margin:42px auto 0}
.faq details{border:1px solid var(--hairline);border-radius:12px;margin-bottom:12px;background:var(--card);box-shadow:var(--shadow-sm)}
.faq summary{padding:18px 20px;font-weight:800;font-size:16px;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .cv{width:20px;height:20px;color:var(--cyan);transition:transform .25s var(--ease-out);flex:none}
.faq details[open] summary .cv{transform:rotate(180deg)}
.faq details .a{padding:0 20px 18px;color:var(--muted);font-size:14.5px}

/* ---- stat strip (3 metric tiles, reusable) ---- */
.vstat{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.vs{background:var(--card);border:1px solid var(--hairline);border-radius:16px;padding:26px;text-align:center;box-shadow:var(--shadow-sm)}
.vs b{display:block;font-size:30px;color:var(--ink);font-weight:800;letter-spacing:-.02em}
.vs b .u{font-size:16px;color:var(--cyan);font-weight:700}
.vs span{font-size:13.5px;color:var(--muted);margin-top:4px;display:block}

/* ---- dark footer ---- */
.ftr2{background:#08141F;color:rgba(255,255,255,.62);padding:48px 0 28px;margin-top:80px}
.ftr2 .fg{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
.ftr2 a{color:rgba(255,255,255,.62);font-size:14px}.ftr2 a:hover{color:var(--cyan-bright)}
.ftr2 .fl{display:flex;gap:22px;flex-wrap:wrap}
.ftr2 .fb{border-top:1px solid rgba(255,255,255,.08);margin-top:26px;padding-top:20px;font-family:'JetBrains Mono';font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ---- responsive ---- */
@media(max-width:900px){
  .mhero .in,.frow{grid-template-columns:1fr;gap:36px}
  .frow:nth-child(even) .ftext{order:0}
  .hw{grid-template-columns:1fr 1fr 1fr}
  .ph nav{display:none}
  .conn .flow{gap:14px}
}
@media(max-width:560px){.hw{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================================================
   Global fixes (2026-06-28):
   1. Remove breadcrumbs from every page (user request).
   2. Clear the fixed 71px header — bump every page hero's top
      padding so its content never sits under the top menu.
   Loaded in <head>; !important overrides the per-page body styles.
   ============================================================ */
/* EloERP hid breadcrumbs globally here at its own user's request. CampusFlo
   is a 35-module hub-and-spoke site whose plan calls for visible crumbs with a
   BreadcrumbList item URL on every level, so the override is not carried over.
   The padding-top list below names EloERP page classes that do not exist in
   this repo; it is inert, left only so the origin of the rule stays legible. */
.ac-hero, .cr-hero, .db-hero, .hr-hero, .inv-hero, .mf-hero, .pos-hero, .pu-hero, .sl-hero,
.il-hero, .il-chero, .ab-hero, .cs-hero, .ig-hero, .prhero, .rs-hero, .se-hero, .zhero,
.or-hero, .solhero {
  padding-top: clamp(102px, 11vw, 120px) !important;
}

/* ============================================================
   MODULE PAGE — shared blocks (added for CampusFlo)
   Every /module/ page uses these, so the per-page <style> block
   only ever carries that page's own screen mock-up.
   ============================================================ */

/* breadcrumb (module.css's inherited .crumb was display:none — see note above) */
.mp-crumb{font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(255,255,255,.5)}
.mp-crumb a{color:inherit}
.mp-crumb a:hover{color:var(--orange-lt)}
.mp-crumb span{margin:0 7px;opacity:.5}

/* section heading inside a module page */
.mp-sec{padding:66px 0;border-bottom:1px solid var(--hairline)}
.mp-sec:last-of-type{border-bottom:0}
.mp-sec > h2{font-size:clamp(22px,2.9vw,30px);letter-spacing:-.02em;margin-bottom:12px}
.mp-sec > .lead{font-size:16.5px;color:var(--muted);line-height:1.65;max-width:68ch;margin-bottom:30px}

/* "the rules it enforces" — constraint cards */
.mp-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mp-rule{background:var(--card);border:1px solid var(--hairline);border-radius:14px;padding:20px;box-shadow:var(--shadow-sm)}
.mp-rule b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:5px}
.mp-rule p{font-size:13.5px;color:var(--muted);line-height:1.55}
@media(max-width:900px){.mp-rules{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.mp-rules{grid-template-columns:1fr}}

/* "how it works in your country" */
.mp-var{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.mp-v{background:var(--card);border:1px solid var(--hairline);border-radius:14px;padding:22px;box-shadow:var(--shadow-sm)}
.mp-v .flag{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cyan);background:rgba(61,90,128,.1);
  border:1px solid rgba(61,90,128,.22);padding:4px 10px;border-radius:99px;display:inline-block;margin-bottom:12px}
.mp-v ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.mp-v li{display:flex;gap:10px;font-size:14px;color:var(--text);line-height:1.5}
.mp-v li i{width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none;margin-top:8px}
@media(max-width:760px){.mp-var{grid-template-columns:1fr}}

/* "what it prints" + "who sees what" */
.mp-cols{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.mp-cols h3{font-size:18px;margin-bottom:12px}
.mp-cols ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.mp-cols li{display:flex;gap:11px;font-size:14.5px;color:var(--text);line-height:1.55}
.mp-cols li svg{width:17px;height:17px;color:var(--cyan);flex:none;margin-top:3px}
.mp-cols li b{color:var(--ink)}
@media(max-width:760px){.mp-cols{grid-template-columns:1fr;gap:32px}}

/* related modules */
.mp-rel{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mp-rel a{display:block;background:var(--card);border:1px solid var(--hairline);border-radius:14px;
  padding:20px;box-shadow:var(--shadow-sm);transition:transform .24s var(--ease-out),box-shadow .24s,border-color .24s}
.mp-rel a:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--cyan)}
.mp-rel b{display:block;font-size:15px;color:var(--ink);margin-bottom:4px}
.mp-rel span{font-size:13.5px;color:var(--muted);line-height:1.5}
@media(max-width:760px){.mp-rel{grid-template-columns:1fr}}

/* generic dark screen mock rows, shared by several module pages */
.mp-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;
  border-radius:9px;font-size:13px;color:rgba(255,255,255,.84)}
.mp-line:nth-child(odd){background:rgba(255,255,255,.045)}
.mp-line .k{color:rgba(255,255,255,.56);font-size:12.5px}
.mp-tag{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 9px;border-radius:99px;flex:none;
  background:rgba(46,158,107,.26);color:#7FD0AC}
.mp-tag.w{background:rgba(232,118,58,.24);color:#F5B183}
.mp-tag.a{background:rgba(196,80,63,.3);color:#F3A79C}
.mp-tag.n{background:rgba(92,123,166,.28);color:#B9CBE4}

/* ============================================================
   EDUCATION-SYSTEM PAGE — shared blocks
   These pages are English pages ABOUT a country, not locales:
   no hreflang is involved and none should be added.
   ============================================================ */
.es-ladder{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.es-step{background:var(--card);border:1px solid var(--hairline);border-radius:12px;
  padding:14px 16px;box-shadow:var(--shadow-sm);flex:1 1 150px;min-width:150px;position:relative}
.es-step .yr{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cyan);font-weight:700}
.es-step b{display:block;font-size:15px;color:var(--ink);margin-top:5px}
.es-step span{font-size:12.5px;color:var(--muted);display:block;margin-top:3px;line-height:1.45}
.es-step.exam{border-color:rgba(232,118,58,.4);background:rgba(232,118,58,.05)}
.es-step.exam .yr{color:var(--orange)}

.es-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.es-fact{background:var(--card);border:1px solid var(--hairline);border-radius:14px;padding:22px;box-shadow:var(--shadow-sm)}
.es-fact h3{font-size:16px;margin-bottom:10px}
.es-fact ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.es-fact li{display:flex;gap:10px;font-size:14px;color:var(--text);line-height:1.5}
.es-fact li i{width:6px;height:6px;border-radius:50%;background:var(--cyan);flex:none;margin-top:8px}
@media(max-width:900px){.es-facts{grid-template-columns:1fr}}

.es-vocab{overflow-x:auto;border:1px solid var(--hairline);border-radius:14px;background:var(--card);margin-top:8px}
.es-vocab table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:520px}
.es-vocab th,.es-vocab td{text-align:start;padding:12px 18px;border-bottom:1px solid var(--hairline)}
.es-vocab thead th{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);background:var(--bg)}
.es-vocab tbody tr:last-child td{border-bottom:0}
.es-vocab td:first-child{color:var(--muted)}
.es-vocab td:last-child{color:var(--ink);font-weight:700}

.es-mods{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px}
.es-mod{display:block;background:var(--card);border:1px solid var(--hairline);border-radius:14px;
  padding:20px;box-shadow:var(--shadow-sm);transition:transform .24s var(--ease-out),box-shadow .24s,border-color .24s}
a.es-mod:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--cyan)}
.es-mod b{display:block;font-size:15px;color:var(--ink);margin-bottom:6px}
.es-mod p{font-size:13.5px;color:var(--muted);line-height:1.55}
@media(max-width:760px){.es-mods{grid-template-columns:1fr}}

.es-stream{background:radial-gradient(120% 110% at 80% 0%,#2E4763,var(--ink));color:#fff;
  border-radius:var(--r-card);padding:36px;margin-top:8px}
.es-stream h3{color:#fff;font-size:21px;margin-bottom:10px}
.es-stream > p{font-size:15.5px;color:rgba(255,255,255,.72);line-height:1.65;max-width:66ch}
.es-stream .two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.es-stream .col{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:13px;padding:20px}
.es-stream .col b{display:block;font-size:14.5px;color:#fff;margin-bottom:10px}
.es-stream .col ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.es-stream .col li{font-size:13.5px;color:rgba(255,255,255,.72);line-height:1.5}
@media(max-width:700px){.es-stream .two{grid-template-columns:1fr}}