/* ===========================
   Nordgrim — site.css (updated)
   =========================== */

:root{
  --bg:#0a0d10; --panel:#11161c; --text:#eef2f6; --muted:#9ea7b3;
  --gold:#e5b567; --pine:#1f5c4f; --ring:rgba(229,181,103,.35);
  /* Define consistent nav button height */
  --nav-btn-height: 44px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:18px/1.7 "Cinzel", Inter, serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,[role=button]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* ---------- NAV ---------- */
.nav{
  position:absolute; top:20px; left:50%; transform:translateX(-50%); 
  width:100%; max-width:1800px; height:180px;
  display:flex; align-items:center;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0));
  z-index:20;
}
.nav .inner{display:flex;align-items:center;justify-content:space-between;width:100%}
.brand{display:flex;align-items:center;gap:16px;font-weight:800;letter-spacing:.5px;font-family:"Cinzel", Inter, serif}
.logoimg{width:250px;height:250px;border-radius:8px;object-fit:cover;box-shadow:none}
.navlinks{display:flex;gap:18px;opacity:.95;align-items:stretch}

/* Make all nav items exactly the same height */
.navlinks > * {
  height: var(--nav-btn-height) !important;
  display: flex !important;
  align-items: center !important;
}


.navlinks a{
  font-weight:600;
  padding: 0 16px;
  background: transparent;
  border-radius: 12px;
  backdrop-filter: none;
  transition: all .2s ease;
  box-sizing: border-box;
  box-shadow: none;
  color: #000;
  font-family:"Cinzel", Inter, serif;
  text-shadow: 0px 0px 8px rgba(255,255,255,.85);
}
.navlinks a:hover{
  opacity:1;
  background: rgba(255,255,255,.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
}

/* ---------- Custom language dropdown ---------- */
.lang-dd{
  position:relative;
  height: var(--nav-btn-height) !important;
}
.lang-btn{
  height: 100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px;
  padding:0 12px;
  border:none;
  background:transparent;
  border-radius:12px;
  backdrop-filter:none;
  cursor:pointer;
  font-weight:600;
  color:#000;
  -webkit-appearance:none;
  appearance:none;
  transition: all .2s ease;
  box-sizing: border-box;
  box-shadow: none;
  min-width: 50px;
  font-family:"Cinzel", Inter, serif;
}
.lang-btn:hover{
  background: rgba(255,255,255,.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
}
.lang-btn span{color:inherit}
.lang-btn .caret{
  width:0;height:0;border:5px solid transparent;border-top-color:#000;
  margin-left:6px;transform:translateY(1px)
}
.lang-btn #langLabel{
  display: none !important;
}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 4px);display:none;min-width:180px;
  background:var(--panel);border:1px solid rgba(255,255,255,.2);border-radius:12px;
  padding:6px;box-shadow:0 12px 30px rgba(0,0,0,.5);z-index:30;
  backdrop-filter: blur(10px);
  font-family:"Cinzel", Inter, serif;
}
.lang-dd.open .lang-menu{display:block}
.lang-menu li{list-style:none;display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:8px;cursor:pointer;user-select:none}
.lang-menu li:hover{background:rgba(255,255,255,.1)}
.flag{
  width:32px;height:22px;display:inline-block;border-radius:3px;
  box-shadow:0 0 0 1px rgba(255,255,255,.5);background:#222;background-size:cover;background-position:center;
  flex-shrink:0;
}
.flag-sv{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='112'%3E%3Crect width='160' height='112' fill='%23006AA7'/%3E%3Crect x='48' width='16' height='112' fill='%23FECC00'/%3E%3Crect y='48' width='160' height='16' fill='%23FECC00'/%3E%3C/svg%3E")
}
.flag-en{
  background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30"%3E%3CclipPath id="t"%3E%3Cpath d="M30,15h30v15zv15H0zH0V0zv0h60z"/%3E%3C/clipPath%3E%3Cpath d="M0,0h60v30H0z" fill="%2301289A"/%3E%3Cpath d="M0,0l60,30M60,0L0,30" stroke="%23fff" stroke-width="6"/%3E%3Cpath d="M0,0l60,30M60,0L0,30" stroke="%23C8102E" stroke-width="4" clip-path="url(%23t)"/%3E%3Cpath d="M30,0v30M0,15h60" stroke="%23fff" stroke-width="10"/%3E%3Cpath d="M30,0v30M0,15h60" stroke="%23C8102E" stroke-width="6"/%3E%3C/svg%3E')
}

/* ---------- HERO ---------- */
.hero{
  position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden;
  background:#000 url(/assets/hero-bg.jpg) left top/cover no-repeat fixed;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,.1) 70%, rgba(0,0,0,.2) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.15));
  pointer-events:none;
}
.center{
  position:relative;z-index:2;text-align:center;padding:24px 20px;
  display:flex;flex-direction:column;gap:22px;align-items:center
}
.title{font:800 clamp(34px,6vw,68px)/1.1 "Cinzel", Inter, serif;letter-spacing:.5px;text-shadow:2px 2px 8px rgba(255,255,255,.8);color:#000}
.subtitle{opacity:.9;max-width:760px;font-size:clamp(18px,2.2vw,22px);text-shadow:2px 2px 8px rgba(255,255,255,.8);color:#000;font-family:"Cinzel", Inter, serif}
.logoMark{display:none}

/* IP + buttons */
.ipwrap{
  display:flex;gap:12px;align-items:center;background:rgba(17,22,28,.7);
  border:1px solid rgba(255,255,255,.16);padding:12px 14px;border-radius:14px;backdrop-filter:blur(6px);
  box-shadow:0 8px 24px rgba(0,0,0,.35);flex-wrap:wrap;justify-content:center;
}
.ip{font-size:20px;font-weight:700;letter-spacing:.4px;font-family:"Cinzel", Inter, serif}
.btn{
  padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(135deg,rgba(229,181,103,.25),rgba(31,92,79,.25));
  color:var(--text);cursor:pointer;font-weight:700;transition:transform .12s ease, box-shadow .12s ease, background .2s ease;
  white-space:nowrap;
  font-family:"Cinzel", Inter, serif;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.btn:active{transform:translateY(0) scale(.99)}
.btn.copied{background:linear-gradient(135deg,rgba(31,92,79,.6),rgba(229,181,103,.6));box-shadow:0 8px 26px rgba(0,0,0,.4)}

/* Tags */
.pills{display:none}

/* ---------- INFO SECTION ---------- */
.info{padding:84px 0;background:linear-gradient(to bottom, rgba(255,255,255,.02), transparent)}

/* Info section heading alignment */
.info h2 {
  max-width: 1400px;
  margin: 0 auto 48px auto !important;
  padding: 0 20px;
}

/* New Card Layout - Increased spacing and better aspect ratios */
.cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px 72px; /* Increased gaps for better spacing */
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 20px;
}

/* First row - large cards */
.card-fullimage:nth-child(1),
.card-fullimage:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Third card - container for 3 small cards */
.card-fullimage:nth-child(3) {
  grid-column: 1 / span 2; /* Span both columns */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 72px; /* Match the main grid gap */
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

.card-fullimage:nth-child(3):hover {
  transform: none;
  box-shadow: none;
}

/* Individual small cards within the wrapper */
.card-fullimage:nth-child(3) > * {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Card image containers - closer to 16:9 ratio */
.card-image {
  height: clamp(220px, 20vw, 320px); /* Better 16:9-ish ratio */
  border-radius: 20px;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
  position: relative;
}

/* Small card images */
.card-fullimage:nth-child(3) .card-image {
  height: clamp(140px, 14vw, 200px); /* Smaller, maintains ratio */
}

.card-image:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}

/* Update existing card structure */
.card-fullimage {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Legacy card hover - only apply to image part now */
.card-fullimage:hover {
  transform: none;
  box-shadow: none;
}

.card-fullimage-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  transition: transform .3s ease;
}

.card-image:hover .card-fullimage-bg {
  transform: scale(1.05);
}

.card-fullimage-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.1) 0%,
    rgba(0,0,0,.3) 60%,
    rgba(0,0,0,.8) 100%
  );
}

/* Updated content positioning - now below cards */
.card-fullimage-content {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  padding: 0;
  color: var(--text);
  z-index: 2;
  text-align: left;
}

.card-fullimage-content h3 {
  margin: 0 0 12px 0;
  font-family: "Cinzel", Inter, serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: var(--text);
  text-shadow: none;
}

/* Smaller headings for the 3 small cards */
.card-fullimage:nth-child(3) .card-fullimage-content h3 {
  font-size: clamp(20px, 2.5vw, 24px);
  margin: 0 0 8px 0;
}

.card-fullimage-content p {
  margin: 0 0 20px 0;
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.6;
  opacity: 0.9;
  text-shadow: none;
  font-family: "Cinzel", Inter, serif;
  color: var(--muted);
}

/* Smaller text for the 3 small cards */
.card-fullimage:nth-child(3) .card-fullimage-content p {
  font-size: clamp(13px, 1.3vw, 15px);
  margin: 0 0 16px 0;
}

.card-fullimage .btn {
  background: linear-gradient(135deg, var(--gold), rgba(229,181,103,.8));
  border: 1px solid rgba(255,255,255,.3);
  color: #000;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 12px;
  transition: all .2s ease;
  text-decoration: none;
  display: inline-block;
  font-family: "Cinzel", Inter, serif;
  align-self: flex-start;
  font-size: clamp(14px, 1.4vw, 16px);
}

/* Smaller buttons for the 3 small cards */
.card-fullimage:nth-child(3) .btn {
  padding: 10px 20px;
  font-size: clamp(13px, 1.2vw, 14px);
}

.card-fullimage .btn:hover {
  background: linear-gradient(135deg, var(--gold), var(--gold));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(229,181,103,.4);
}

/* Remove old card styles */
.small-cards-row {
  display: none;
}

.card-large {
  display: none;
}

.card-small {
  display: none;
}

/* ========== RESPONSIVE BREAKPOINTS ========== */

/* Large screens - maintain quality */
@media (max-width: 1400px) {
  .cards-grid {
    gap: 72px 64px;
  }
  
  .card-fullimage:nth-child(3) {
    gap: 64px;
  }
}

/* CRITICAL: Stack at 1200px to prevent squishing */
@media (max-width: 1200px) {
  .cards-grid {
    grid-template-columns: 1fr; /* Single column for all cards */
    gap: 64px;
    max-width: 800px;
  }
  
  /* Make the third card (small cards container) stay in grid */
  .card-fullimage:nth-child(3) {
    grid-column: 1; /* Reset span */
    grid-template-columns: repeat(3, 1fr); /* Keep 3 columns for small cards */
    gap: 56px;
  }
  
  /* Larger images when in single column */
  .card-image {
    height: clamp(280px, 35vw, 400px);
  }
  
  .card-fullimage:nth-child(3) .card-image {
    height: clamp(160px, 18vw, 220px);
  }
}

/* Tablet - small cards go to 2 columns */
@media (max-width: 900px) {
  .cards-grid {
    gap: 56px;
    max-width: 700px;
  }
  
  .card-fullimage:nth-child(3) {
    grid-template-columns: repeat(2, 1fr); /* 2 columns for small cards */
    gap: 48px;
  }
  
  .card-image {
    height: clamp(260px, 40vw, 360px);
  }
  
  .card-fullimage:nth-child(3) .card-image {
    height: clamp(180px, 30vw, 260px);
  }
}

/* Mobile - everything single column */
@media (max-width: 600px) {
  .cards-grid {
    gap: 48px;
    max-width: 100%;
    padding: 0 16px;
  }
  
  .card-fullimage:nth-child(3) {
    grid-template-columns: 1fr; /* Single column for small cards too */
    gap: 40px;
  }
  
  .card-image {
    height: clamp(200px, 50vw, 280px);
  }
  
  .card-fullimage:nth-child(3) .card-image {
    height: clamp(180px, 45vw, 240px);
  }
  
  .info h2 {
    padding: 0 16px;
    margin: 0 auto 32px auto !important;
  }
}

/* Very small mobile */
@media (max-width: 400px) {
  .cards-grid {
    gap: 40px;
  }
  
  .card-fullimage:nth-child(3) {
    gap: 32px;
  }
  
  .card-image {
    height: clamp(160px, 55vw, 220px);
  }
  
  .card-fullimage:nth-child(3) .card-image {
    height: clamp(150px, 50vw, 200px);
  }
}

/* ---------- FOOTER ---------- */
.footer{padding:44px 0;opacity:.8;font-size:15px;text-align:center;font-family:"Cinzel", Inter, serif}

/* Utility */
.hidden{display:none}

/* Wide screens - ensure 1800px width is applied */
@media (min-width: 1401px) {
  .cards-grid {
    max-width: 1800px;
    gap: 80px 72px;
  }
  
  .card-fullimage:nth-child(3) {
    gap: 72px;
  }
  
  .info h2 {
    max-width: 1800px;
  }
  
  .container {
    max-width: 1800px;
  }
  
  .nav {
    max-width: 1800px;
  }
  
  /* Increase card heights for wide screens */
  .card-image {
    height: clamp(280px, 22vw, 420px); /* Increased from 320px to 420px */
  }
  
  .card-fullimage:nth-child(3) .card-image {
    height: clamp(180px, 16vw, 280px); /* Increased from 200px to 280px */
  }
}

/* Tablet adjustments */
@media (max-width: 1024px) and (min-width: 769px) {
  .logoimg{width:180px;height:180px}
  .nav{height:140px; top:15px;}
}

/* Mobile adjustments */
@media (max-width: 768px) {
  :root {
    --nav-btn-height: 38px;
  }
  .nav{height:120px; top:10px;}
  .logoimg{width:120px;height:120px}
  .navlinks{gap:12px;flex-wrap:wrap}
  .navlinks a{
    padding:0 12px;
    font-size:14px;
  }
  .lang-btn{
    padding:0 12px;
    font-size:14px;
  }
  .lang-btn .caret{
    border-width:4px;
  }
  .flag{
    width:24px;
    height:16px;
  }
  .ipwrap{
    padding:10px 12px;
    gap:8px;
  }
  .ip{
    font-size:16px;
  }
  .btn{
    padding:10px 14px;
    font-size:14px;
  }
}

/* Very narrow screens - smaller logo */
@media (max-width: 480px) {
  :root {
    --nav-btn-height: 34px;
  }
  .nav{height:100px; top:8px;}
  .logoimg{width:100px;height:100px}
  .brand{gap:12px;font-size:14px}
  .navlinks{gap:8px}
  .navlinks a{
    padding:0 10px;
    font-size:12px;
  }
  .lang-btn{
    padding:0 10px;
    font-size:12px;
    gap:4px;
  }
  .lang-btn .caret{
    border-width:4px;
    margin-left:3px;
  }
  .flag{
    width:20px;
    height:14px;
  }
}

/* Extra narrow screens - very compact */
@media (max-width: 320px) {
  :root {
    --nav-btn-height: 30px;
  }
  .logoimg{width:80px;height:80px}
  .nav{height:90px; top:5px;}
  .brand{font-size:12px}
  .navlinks a{
    padding:0 8px;
  }
  .lang-btn{
    padding:0 8px;
  }
  .flag{
    width:18px;
    height:12px;
  }
}