/* "More on <country>" cards (src/client/country-links.mjs), shared by all four pages. It lives in assets/, not
   src/client/: the build serves everything under /src/client/* as text/javascript, and with nosniff a
   browser then refuses it as a stylesheet.
   Each view keeps one accent from the Virya palette: briefs ember, atlas night, earnings saffron,
   procurement green. */
.country-links { display:grid; gap:10px; min-width:0; }
.country-links-title { margin:0; color:#C8431F; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.country-links-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; }
.country-link { --accent:#14173A; --accent-soft:rgba(20,23,58,.08);
  position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; min-width:0;
  padding:14px 14px 14px 16px; border:1px solid #DED6C6; border-radius:12px; overflow:hidden;
  background:linear-gradient(135deg,#FFFDF8 0%,#FBF6EC 100%); color:#14173A; text-decoration:none;
  box-shadow:0 1px 0 rgba(20,23,58,.04); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.country-link::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--accent); }
.country-link:hover { transform:translateY(-2px); border-color:var(--accent); box-shadow:0 12px 28px rgba(20,23,58,.12); }
.country-link:focus-visible { outline:3px solid rgba(242,169,59,.55); outline-offset:2px; }
.country-link-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:var(--accent-soft); color:var(--accent); flex:none; }
.country-link-icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.country-link-text { display:grid; gap:2px; min-width:0; }
.country-link-title { font-size:14px; font-weight:700; letter-spacing:-.01em; line-height:1.25; }
.country-link-blurb { color:#5B5A6E; font-size:12px; line-height:1.35; }
.country-link-arrow { color:var(--accent); font-size:18px; font-weight:700; transition:transform .18s ease; }
.country-link:hover .country-link-arrow { transform:translateX(4px); }
.cl-briefs { --accent:#C8431F; --accent-soft:rgba(228,87,46,.12); }
.cl-atlas { --accent:#1E2250; --accent-soft:rgba(30,34,80,.09); }
.cl-earnings { --accent:#B7791F; --accent-soft:rgba(242,169,59,.18); }
.cl-rfp { --accent:#1B7A4B; --accent-soft:rgba(27,122,75,.12); }
/* Carousel (landing page country panel): one card with the next peeking in, snap per card. */
.country-links-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.country-links-steps { display:flex; gap:6px; }
.country-links-step { width:30px; height:30px; display:grid; place-items:center; padding:0; border:1px solid #DED6C6; border-radius:99px; background:#FFFDF8; color:#14173A; font-size:18px; line-height:1; cursor:pointer; transition:background .15s,border-color .15s,color .15s; }
.country-links-step:hover:not(:disabled) { background:#14173A; border-color:#14173A; color:#fff; }
.country-links-step:disabled { opacity:.35; cursor:default; }
.country-links-step:focus-visible { outline:3px solid rgba(242,169,59,.55); outline-offset:2px; }
.country-links.carousel .country-links-grid { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:84%; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-left:2px; padding:2px 2px 8px; scrollbar-width:none; }
.country-links.carousel .country-links-grid::-webkit-scrollbar { display:none; }
.country-links.carousel .country-link { scroll-snap-align:start; grid-template-columns:auto 1fr; align-content:start; padding:13px 14px 13px 16px; }
.country-links.carousel .country-link-arrow { display:none; }
.country-links.carousel .country-link:hover { transform:none; }
.country-links.carousel .country-links-title { display:inline-flex; align-items:center; gap:7px; }
.country-links-dots { margin-top:2px; }
.country-links-dots .virya-dot { width:18px; height:16px; }
@media (prefers-reduced-motion: reduce) { .country-link, .country-link-arrow { transition:none; } .country-link:hover { transform:none; } }