/* ══════════════════════════════════════════════════════════════
   CONTINENT.CSS
   Shared styles for continent pages (africa, europe, asia, etc.)
   ══════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#08111a;--bg-soft:#0d1823;--text:rgba(255,245,232,.94);--text-sec:rgba(255,230,205,.67);--text-faint:rgba(240,170,80,.48);--font-heading:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;--font-body:"Avenir Next","Segoe UI","Trebuchet MS",sans-serif}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);background-image:radial-gradient(circle at 16% 2%,rgba(240,170,80,.05),transparent 30%),radial-gradient(circle at 88% 0%,rgba(240,170,80,.04),transparent 34%),linear-gradient(180deg,#0d1823 0%,#08111a 54%,#060d14 100%);color:var(--text);line-height:1.6;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,220,170,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,220,170,.03) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(circle at center,black 35%,transparent 92%);opacity:.20}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ── 4-Layer Liquid Glass (Apple iOS 26 style) ── */
.lg-surface {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 22px;
  background: transparent;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 0 0 0.5px rgba(240,170,80,0.07),
    0 8px 24px -8px rgba(0,0,0,0.4),
    0 2px 6px -2px rgba(0,0,0,0.3);
  transition: box-shadow 0.25s cubic-bezier(0.32,0.72,0,1),
              transform 0.3s cubic-bezier(0.32,0.72,0,1);
}
.lg-surface:hover {
  box-shadow:
    0 0 0 0.5px rgba(240,170,80,0.12),
    0 12px 32px -8px rgba(0,0,0,0.5),
    0 4px 10px -2px rgba(0,0,0,0.35);
}
/* Layer 0 - backdrop refraction (SVG displacement = Chrome-only, graceful fallback) */
.lg-effect {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  backdrop-filter: blur(2px) saturate(180%) brightness(1.06) contrast(1.04) url(#lg-refract);
  -webkit-backdrop-filter: blur(2px) saturate(180%) brightness(1.06) contrast(1.04);
}
/* Layer 1 - tint (visible base color, works on any background) */
.lg-tint {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(8,17,26,0.12);
  transition: background 0.25s cubic-bezier(0.32,0.72,0,1);
}
/* Layer 2 - shine (lit bezel: bright top edge, dark bottom = convex surface) */
.lg-shine {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(240,170,80,0.10),
    inset 0 0 8px 0 rgba(240,170,80,0.06),
    inset 0 3px 6px -3px rgba(240,170,80,0.28),
    inset 0 -3px 6px -3px rgba(0,0,0,0.3);
}
/* Noise grain (pseudo-element on container) */
.lg-surface::before {
  content: '';
  display: block;
  position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  opacity: 0.035; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
/* Content above all material layers */
.lg-surface > :not(.lg-effect):not(.lg-tint):not(.lg-shine):not(.card-overlay) {
  position: relative;
  z-index: 3;
}
/* Hover glow on tint */
.lg-surface:hover > .lg-tint {
  background: rgba(12,22,34,0.18);
}
@media (prefers-reduced-motion: reduce) {
  .lg-surface, .lg-surface:hover { transition: none !important; }
}
@media (hover: none), (pointer: coarse) {
  .lg-effect {
    backdrop-filter: blur(2px) saturate(180%) brightness(1.06) contrast(1.04);
    -webkit-backdrop-filter: blur(2px) saturate(180%) brightness(1.06) contrast(1.04);
  }
}

/* ── Hero ── */
.hero{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:100px 24px 60px;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;opacity:.22;pointer-events:none}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,17,26,.65) 0%,rgba(8,17,26,.25) 35%,rgba(8,17,26,.50) 70%,rgba(8,17,26,.96) 92%,#08111a 100%);pointer-events:none}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(64px);opacity:.4;pointer-events:none;z-index:1}
.hero::before{width:320px;height:320px;left:-80px;top:70px;background:rgba(240,170,80,.05)}
.hero::after{width:280px;height:280px;right:-60px;bottom:80px;background:rgba(240,170,80,.04)}
.hero-shell{width:min(100%,860px);display:grid;gap:16px;justify-items:center;text-align:center;position:relative;z-index:2}
.hero-kicker{font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(240,170,80,.65);font-weight:600}
.hero-title{font-family:var(--font-heading);font-size:clamp(2rem,5vw,3.2rem);font-weight:700;color:#fff5e6;margin:0;letter-spacing:.02em;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.hero-sub{color:var(--text-sec);font-size:clamp(.92rem,1.6vw,1.08rem);max-width:560px;line-height:1.7}

/* ── Divider ── */
.section-divider{position:relative;height:80px;overflow:hidden}
.section-divider::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(80%,600px);height:1px;background:linear-gradient(90deg,transparent,rgba(240,170,80,.14) 20%,rgba(240,170,80,.22) 50%,rgba(240,170,80,.14) 80%,transparent)}
.section-divider::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(40%,300px);height:1px;background:linear-gradient(90deg,transparent,rgba(240,170,80,.07) 30%,rgba(240,170,80,.07) 70%,transparent);filter:blur(1px)}

/* ── Country cards ── */
.section-cards{padding:14px clamp(16px,4vw,60px) 60px}
.section-head{text-align:center;margin-bottom:32px}
.section-head h2{font-family:var(--font-heading);font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:8px;color:rgba(255,245,232,.94)}
.section-head p{color:var(--text-sec);font-size:.95rem;max-width:560px;margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:28px;max-width:900px;margin:0 auto}
.card{position:relative}
.card:hover{transform:translateY(-4px)}
.card-img{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:#060d14}
.card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.18) 100%)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card-img img{transform:scale(1.05)}
.card-flag{position:absolute;top:12px;left:12px;font-size:1.6rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));z-index:1}
.card-body{padding:20px}
.card-name{font-family:var(--font-heading);font-size:1.42rem;font-weight:700;margin-bottom:4px;color:rgba(255,245,232,.94)}
.card-tagline{color:var(--text-sec);font-size:.88rem;margin-bottom:14px}
.card-stats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.stat{padding:4px 10px;background:rgba(240,170,80,.05);border-radius:8px;font-size:.74rem;color:var(--text-sec);border:1px solid rgba(240,170,80,.07)}
.stat b{color:rgba(255,220,170,.90);font-weight:600}
.card-link{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:600;color:rgba(255,230,205,.70);transition:gap .2s,color .2s;position:relative;z-index:2}
.card-link:hover{gap:10px;color:rgba(255,245,232,.94)}
.card>a.card-overlay{position:absolute;inset:0;z-index:4}

/* ── Themed tiles ── */
.themed-section{padding:14px clamp(16px,4vw,60px) 60px;max-width:1080px;margin:0 auto}
.themed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.themed-tile{padding:20px 16px;text-align:center;transition:transform .2s cubic-bezier(.32,.72,0,1);display:block}
.themed-tile:hover{transform:translateY(-2px)}
.themed-tile .icon{display:block;font-size:1.6rem;margin-bottom:8px;opacity:.6}
.themed-tile .name{font-weight:600;font-size:.9rem;margin-bottom:4px;color:rgba(255,220,170,.90)}
.themed-tile .teaser{font-size:.78rem;color:var(--text-sec);line-height:1.4}

/* ── Editorial ── */
.editorial{padding:14px clamp(16px,4vw,60px) 60px;max-width:780px;margin:0 auto}
.editorial h2{font-family:var(--font-heading);font-size:clamp(1.6rem,3vw,2rem);margin-bottom:18px;text-align:center;color:rgba(255,225,180,.92)}
.editorial p{color:var(--text-sec);font-size:.92rem;line-height:1.75;margin-bottom:16px}
.editorial p:last-child{margin-bottom:0}

/* ── Back to top ── */
.back-top{position:fixed;right:26px;bottom:26px;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:18px;color:rgba(255,235,210,.75);background:rgba(8,17,26,.12);backdrop-filter:blur(2px) saturate(180%) brightness(1.06) contrast(1.04);-webkit-backdrop-filter:blur(2px) saturate(180%) brightness(1.06) contrast(1.04);border:none;box-shadow:0 0 0 .5px rgba(240,170,80,.07),0 8px 24px -8px rgba(0,0,0,.4),0 2px 6px -2px rgba(0,0,0,.3),inset 0 0 0 1px rgba(240,170,80,.10),inset 0 2px 4px -2px rgba(240,170,80,.22),inset 0 -2px 4px -2px rgba(0,0,0,.25);z-index:110;transition:transform .25s cubic-bezier(.32,.72,0,1),opacity .25s,background .2s;opacity:0;pointer-events:none;visibility:hidden}
.back-top.is-visible{opacity:1;pointer-events:auto;visibility:visible}
.back-top:hover{transform:translateY(-3px);background:rgba(240,170,80,.18);color:#fff5e6}

/* ── Accessibility ── */
.skip-link{position:absolute;top:-50px;left:0;background:rgba(240,170,80,.18);color:#fff5e6;padding:8px 16px;z-index:99999;border-radius:0 0 8px 0;font-weight:600;font-size:14px;text-decoration:none;transition:top .2s}
.skip-link:focus{top:0}
:focus-visible{outline:2px solid rgba(240,170,80,.55);outline-offset:3px;border-radius:4px}

/* ── Responsive ── */
@media(max-width:768px){.hero{min-height:70vh;padding:80px 18px 48px}.grid{grid-template-columns:1fr;gap:18px}.card-body{padding:14px}.card-name{font-size:1.15rem}.themed-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.themed-grid{grid-template-columns:1fr 1fr}.hero-kicker{font-size:.7rem;letter-spacing:.18em}}