/* ═══════════════════════════════════════════════════════════════════════════
   ACADEMIC LICENCE PAGE — page-unique rules
   2026 design system — Geomage Website (www.geomage.com)

   Loaded by frontend/academic-license.html ALONGSIDE main.css. Only what the
   design-system components do NOT already provide lives here:

     · .netmap*  — the partner-university world map, its pins and legend
     · .terms / .term — the academic-terms checklist
     · .res*     — the "resources" row under the application steps
     · .acad-apply .flow__grid — the narrower rail the application steps sit on

   Everything else on the page is a component: .hero (+ the shared
   .hero__inner--narrow modifier), .intro, .section-head, .diff, .fam,
   .pkg (+ .pkgs__grid--2), .flow, .cta, and the header/footer includes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ACADEMIC NETWORK MAP ────────────────────────────────────────────────── */
.netmap { background: var(--bg); }
.netmap__wrap {
  position: relative; max-width: 1000px; margin: 0 auto;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); box-shadow: 0 24px 70px rgba(0,0,0,.22);
}
.netmap__wrap img { width: 100%; display: block; }

/* Pins. The concept positions each one with an inline style; the six
   coordinates live here instead, one modifier per partner institution. */
.netmap__pin {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 0 3px rgba(254,106,0,.25);
}
.netmap__pin::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 2px solid rgba(254,106,0,.5);
  animation: pinpulse 2.2s ease-out infinite;
}
@keyframes pinpulse {
  0%   { transform: scale(.5);  opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}
.netmap__pin--ipn       { left: 22.5%; top: 40.5%; }  /* Instituto Politécnico Nacional, Mexico */
.netmap__pin--olmeca    { left: 24.2%; top: 41.5%; }  /* Universidad Olmeca, Mexico */
.netmap__pin--vast      { left: 79.4%; top: 39.4%; }  /* Vietnam Academy of Science & Technology */
.netmap__pin--uan       { left: 53.7%; top: 59.6%; }  /* Universidade Agostinho Neto, Angola */
.netmap__pin--bucharest { left: 57.2%; top: 23.6%; }  /* University of Bucharest, Romania */
.netmap__pin--belgrade  { left: 55.7%; top: 23.3%; }  /* University of Belgrade, Serbia */

.netmap__legend { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; margin-top: 26px; }
.netmap__uni { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); }
.netmap__uni b { color: var(--text-dark); font-weight: 600; }
.netmap__uni::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }

/* ── ACADEMIC TERMS ──────────────────────────────────────────────────────── */
.terms { max-width: 840px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.term {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 18px 20px; font-size: 13.5px; line-height: 1.6; color: var(--text);
}
.term svg {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px;
  stroke: #16a34a; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.term strong { color: var(--text-dark); }

/* ── APPLICATION STEPS + RESOURCES ───────────────────────────────────────── */
/* The application rail is narrower than the container, so it lines up with the
   .res__grid underneath it and with the map above. */
.acad-apply .flow__grid { max-width: 1000px; margin: 0 auto; }

.res__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1000px; margin: 34px auto 0; }
.res {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 18px; text-decoration: none; cursor: pointer;
  transition: all .22s var(--ease);
}
.res:hover { border-color: var(--orange); background: var(--bg-white); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.res__icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-md);
  background: var(--orange-light); border: 1px solid var(--orange-border);
  display: flex; align-items: center; justify-content: center;
}
.res__icon svg { width: 18px; height: 18px; stroke: var(--orange); fill: none; stroke-width: 1.8; }
.res__t { display: block; font-weight: 700; font-size: 13.5px; color: var(--text-dark); margin-bottom: 3px; line-height: 1.3; }
.res__d { display: block; font-size: 12px; color: var(--text-light); line-height: 1.5; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .netmap__pin::after { animation: none !important; }
}
@media (max-width: 980px) {
  .terms { grid-template-columns: 1fr; }
  .res__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .netmap__legend { flex-direction: column; align-items: flex-start; }
}