/* assets/page-hub.css — shared by the Russian and the English storefront. /en/esim/ — the destination list's own layout. Tokens, type, buttons and
 * the shared chrome come from assets/site.css. Versioned by seo/stamp-assets.mjs. */

.hub{background:radial-gradient(900px 420px at 0% -10%,rgba(138,22,199,.08),transparent 60%),radial-gradient(820px 420px at 100% -10%,rgba(0,199,223,.08),transparent 58%),var(--bg)}

/* ---------- hero + search ---------- */
.hub-hero{padding:4px 0 22px}
.hub-hero .crumbs{margin:18px 0 18px}
.hub-hero h1{margin:0 0 8px;font-size:clamp(30px,4.6vw,48px);line-height:1.06;letter-spacing:-.03em}
.hub-hero .lead{margin:0 0 22px}
.hub-search{max-width:720px}
.hub-field{position:relative;display:flex;align-items:center;border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-2)}
.hub-field svg{position:absolute;left:18px;width:22px;height:22px;color:var(--muted);pointer-events:none}
.hub-field input[type=text]{min-height:62px;padding:0 54px 0 52px;border:0;border-radius:var(--r-xl);background:transparent;font-size:18px;font-weight:500}
.hub-field input[type=text]:focus{box-shadow:0 0 0 4px rgba(66,103,232,.16)}
.hub-clear{position:absolute;right:10px;width:40px;height:40px;border:0;border-radius:12px;background:#f1f3f8;color:var(--text);font-size:20px;line-height:1;cursor:pointer}
.hub-clear:hover{background:var(--accent-soft)}
.hub-count{min-height:22px;margin:10px 0 0;color:var(--muted);font-size:14px;font-weight:600}

/* ---------- popular ---------- */
.hub-body{padding-bottom:8px}
.hub-pop{margin:6px 0 30px}
.hub-pop h2{margin:0 0 14px;font-size:22px}
.hub-tiles{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}
.hub-tile{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 16px;border:1px solid var(--border);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--shadow-1);color:var(--text);font-weight:700;text-decoration:none;transition:box-shadow .15s ease,border-color .15s ease}
.hub-tile:hover{border-color:#c9d4f5;box-shadow:var(--shadow-2);color:var(--text)}
.hub-tile .flag{width:40px;height:30px;border-radius:6px}
@media (max-width:899px){.hub-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.hub-pop{margin:2px 0 22px}.hub-pop h2{font-size:20px;margin-bottom:12px}.hub-tiles{gap:8px}.hub-tile{min-height:52px;padding:8px 12px;gap:10px;font-size:15px;line-height:1.2}.hub-tile .flag{width:30px;height:22px;border-radius:5px}}
@media (max-width:359px){.hub-tile{padding:8px 10px;gap:8px;font-size:14px}.hub-tile .flag{width:26px;height:20px}}

/* ---------- A–Z jump letters ---------- */
.hub-az{position:sticky;top:68px;z-index:30;display:flex;gap:4px;overflow-x:auto;margin:0 0 18px;padding:10px 0;background:rgba(247,249,252,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);scrollbar-width:none}
.hub-az::-webkit-scrollbar{display:none}
.hub-az a,.hub-az span{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:36px;border-radius:9px;font-size:14px;font-weight:750}
.hub-az a{color:var(--text);text-decoration:none}
.hub-az a:hover{background:var(--accent-soft);color:#2f4fc4}
.hub-az span{color:#c0c6d3}
@media (max-width:899px){.hub-az{top:64px}}
/* Phones: the whole alphabet as a grid at the top — no hidden sideways scroll. */
@media (max-width:599px){
  .hub-az{position:static;border-bottom:0;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;overflow:visible;padding:0 0 14px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .hub-az a,.hub-az span{min-width:0;height:40px;border-radius:10px}
  .hub-az a{background:var(--surface);box-shadow:inset 0 0 0 1px var(--border)}
}

/* ---------- the list ---------- */
.az-group{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 14px;padding:14px 0;border-top:1px solid var(--border);scroll-margin-top:136px}
.az-group:first-child{border-top:0}
.az-group h2{margin:4px 0 0;font-size:26px;line-height:1;color:#2f4fc4}
.az-group .dest{display:grid;gap:6px 12px;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none;columns:auto}
.az-group .dest li{padding:0}
.az-group .dest a{display:flex;align-items:center;gap:11px;min-height:46px;padding:6px 10px;border:1px solid transparent;border-radius:12px;color:var(--text);font-weight:600;text-decoration:none}
.az-group .dest a::after{content:"→";margin-left:auto;padding-left:6px;color:var(--faint);font-weight:500}
.az-group .dest a:hover{border-color:var(--border);background:var(--surface);box-shadow:var(--shadow-1)}
.az-group .dest a:hover::after{color:var(--accent)}
.az-group .dest a span{min-width:0;line-height:1.25}
.az-group .dest .flag{width:28px;height:21px}
@media (max-width:999px){.az-group .dest{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){
  .az-group{grid-template-columns:1fr;gap:6px;scroll-margin-top:72px}
  .az-group h2{font-size:20px;margin:0 0 2px 10px}
  .az-group .dest{gap:2px 8px}
  .az-group .dest a{gap:9px;padding:6px 8px;font-size:15px}
  .az-group .dest a::after{display:none}
}
@media (max-width:359px){.az-group .dest{grid-template-columns:1fr}}

/* ---------- nothing matches ---------- */
.hub-empty{margin:10px 0 30px;padding:28px 20px;border:1px dashed var(--border-strong);border-radius:var(--r-l);background:var(--surface);text-align:center}
.hub-empty-title{margin:0 0 6px;font-size:18px;font-weight:750}
.hub-empty .note{margin:0 0 16px}

/* ---------- before you buy (the country pages' block; its own copy here) ---------- */
.cp-help{margin:48px 0 0;padding-top:34px;border-top:1px solid var(--border)}
.cp-help>h2{margin:0 0 18px}
.help-grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:899px){.help-grid{grid-template-columns:1fr}}
.help-card{padding:22px;border:1px solid var(--border);border-radius:var(--r-l);background:var(--surface)}
.help-card h3{margin:0 0 8px}
.help-card p{margin:0 0 12px;color:var(--muted);font-size:15px}
.help-card ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.help-card a{color:var(--accent);font-weight:650;text-decoration:none}
.help-card a::after{content:" →"}
.help-card a:hover{text-decoration:underline;text-underline-offset:3px}