/* =========================================================
   DANYAL ILYAS — AURORA STEEL (LUMEN • Focused)
   Unik, crispy UI • moderate shadows overall
   Skills: no shadow until click • darker hover + text color change
   Modal: responsive + shows full image/video (contain)
   EDU/XP: ryddig & synlig på ALLE enheter
   ========================================================= */

/* ---------------- 0) Tokens ---------------- */
:root{
  /* Colors */
  --bg:        #F7FAFF;
  --bg-soft:   #F1F5FA;
  --panel:     #FFFFFF;
  --ink:       #0F172A;
  --muted:     #5D677A;
  --line:      rgba(15, 23, 42, .10);

  --accent:      #3B6EA8;   /* steel blue */
  --accent-2:    #4EA3FF;   /* light sky */
  --accent-ink:  #1D2A40;
  --accent-dark: #2E4F7E;   /* darker steel for active */
  --accent-d1:   #244168;   /* even darker edge */

  /* Radii */
  --r: 16px;
  --r-lg: 20px;
  --round: 999px;

  /* Rails */
  --rail-w: 3px;
  --rail-w-lg: 4px;

  /* Glass */
  --glass: saturate(140%) blur(10px);

  /* Layered shadow system (kept moderate by default) */
  --umbra:   rgba(15,23,42,.22);
  --penumbra:rgba(15,23,42,.12);
  --ambient: rgba(15,23,42,.06);
  --ring:    rgba(15,23,42,.05);

  --elev-1:  0 1px 2px var(--ambient), 0 0 0 1px var(--ring);
  --elev-2:  0 6px 16px var(--penumbra), 0 2px 6px var(--ambient), 0 0 0 1px var(--ring);
  --elev-3:  0 14px 34px var(--penumbra), 0 6px 16px var(--ambient), 0 0 0 1px var(--ring);
  --elev-4:  0 24px 60px var(--umbra),    0 10px 24px var(--penumbra), 0 0 0 1px var(--ring);

  /* Accent glow (used sparingly) */
  --glow: 0 0 0 6px rgba(59,110,168,.10), 0 18px 40px rgba(59,110,168,.16);

  /* Inner highlight */
  --inner: inset 0 1px 0 rgba(255,255,255,.85);

  /* Type scale */
  --fs-base: 16px;
}

/* ---------------- 1) Base ---------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); font-size:var(--fs-base);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1000px 480px at 85% -12%, #E6EEFA 0%, transparent 60%),
    radial-gradient(900px 400px at 12% -8%, #E7F0FF 0%, transparent 58%),
    var(--bg);
}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block;height:auto}
.container{max-width:1200px;margin:0 auto;padding:0 5%}
::selection{background:rgba(78,163,255,.28)}
:focus-visible{outline:3px solid var(--accent-2); outline-offset:3px}

/* Subtil scrollbar */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(59,110,168,.35), rgba(78,163,255,.35));
  border-radius:10px; border:2px solid transparent; background-clip:padding-box;
}

/* Skip link */
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto; background:#fff;
  padding:.5rem .75rem; border-radius:8px; box-shadow:var(--elev-2); z-index:2000
}

/* ---------------- 2) Navbar ---------------- */
.navbar{
  position:sticky; top:0; height:70px; z-index:1000;
  background:rgba(255,255,255,.86);
  backdrop-filter: var(--glass);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:0 5%;
  box-shadow: var(--elev-1);
}
.nav-left{display:flex; align-items:center; gap:.75rem}
.logo-circle{
  width:44px;height:44px;border-radius:50%;
  background:conic-gradient(from 220deg, var(--accent), #2E5690 40%, #6fb3ff 80%, var(--accent));
  color:#fff; display:grid; place-items:center;
  font:800 1rem/1 "Cormorant Garamond",serif;
  box-shadow: var(--elev-1);
}
.logo-name{font:700 1.15rem/1 "Cormorant Garamond",serif}
.nav-right{display:flex; align-items:center}
.nav-right a{
  margin-left:1.4rem;opacity:.85;transition:transform .18s, opacity .18s, text-shadow .18s;
}
.nav-right a:hover{opacity:1; transform:translateY(-1px); text-shadow:0 1px 0 rgba(255,255,255,.8)}
.nav-toggle{display:none; background:transparent; border:0; padding:.5rem; border-radius:10px}
.nav-toggle:focus-visible{background:#fff}
.nav-toggle__bar{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0}

/* ---------------- 3) Hero ---------------- */
.hero{
  min-height:calc(100vh - 70px); padding:0 10%; padding-top:40px;
  display:flex; align-items:center; justify-content:center; gap:7rem;
}
.pill{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.6rem 1rem; border-radius:12px; font-weight:800;
  background:
    linear-gradient(180deg,#FFFFFF,#F4F7FC) padding-box,
    linear-gradient(135deg, rgba(59,110,168,.25), rgba(78,163,255,.25)) border-box;
  border:1px solid transparent; box-shadow: var(--elev-1), var(--inner);
  transition:.18s ease; font-size:.95rem;
}
.pill:hover{box-shadow: var(--elev-2); transform:translateY(-2px)}
.pill svg{width:20px; height:20px; flex:0 0 20px; fill:currentColor; opacity:.95}
.pill .handle,.pill .platform{font-weight:800}
.contact-pills{display:flex; gap:.8rem; flex-wrap:wrap}

.profile-arch{
  width:280px;height:380px;border-radius:280px 280px 0 0;overflow:hidden;
  background:linear-gradient(180deg,#E7EEF8,#FFFFFF);
  border:1px solid var(--line); box-shadow: var(--elev-2), var(--inner);
}
.profile-arch img{width:100%;height:100%;object-fit:cover}

.intro-text{max-width:640px}
.intro-text h1{
  margin:0; letter-spacing:.01em;
  font:700 clamp(3rem,8vw,5rem)/1.02 "Cormorant Garamond",serif;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.intro-text .firstname{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.intro-sub{margin:1.1rem 0 1.8rem; color:var(--muted); font-size:clamp(1.05rem,2.5vw,1.45rem)}
.contact-links{display:flex; gap:.8rem; flex-wrap:wrap}
.btn{
  padding:.6rem 1rem; border-radius:12px; font-weight:700;
  background:
    linear-gradient(180deg,#FFFFFF,#F4F7FC) padding-box,
    linear-gradient(135deg, rgba(59,110,168,.25), rgba(78,163,255,.25)) border-box;
  border:1px solid transparent; box-shadow: var(--elev-1), var(--inner);
  transition:.18s;
}
.btn:hover{box-shadow: var(--elev-2); transform:translateY(-2px)}

/* ---------------- 4) About + Focus + Skills ---------------- */
.about{
  background:
    radial-gradient(600px 260px at 85% 0, rgba(78,163,255,.12), transparent 60%),
    var(--bg-soft);
  padding:5.2rem 0 5.8rem
}
.about-content{max-width:820px; margin:0 auto}
.about-content h2{
  margin:0 0 1rem;
  font:700 clamp(2rem,5.6vw,2.75rem)/1.05 "Cormorant Garamond",serif;
}
.about-content p{margin:0 0 1.2rem; line-height:1.7; color:var(--muted)}

.focus-areas{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px; margin:10px 0 6px;
}
.focus-card{
  background:
    linear-gradient(180deg,#FFFFFF,#F7FAFF) padding-box,
    linear-gradient(135deg, rgba(59,110,168,.22), rgba(78,163,255,.22)) border-box;
  border:1px solid transparent; border-radius:18px;
  padding:16px 18px; box-shadow: var(--elev-1), var(--inner);
  transition:.18s ease;
}
.focus-card:hover{transform:translateY(-2px); box-shadow: var(--elev-2)}
.focus-card__title{margin:0 0 .2rem; font-weight:800; font-size:1.15rem}
.focus-card__title span{
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff;
  padding:2px 8px; border-radius:8px;
}
.focus-card__desc{margin:0; color:var(--muted); font-size:.95rem}

/* ---------------- SPECIAL: My Skills ---------------- */
.skills-title{
  margin:2.2rem 0 1rem;
  font:700 clamp(1.8rem,4.6vw,2.2rem)/1.06 "Cormorant Garamond",serif;
  position:relative; text-shadow:none;
}
.skills-title::after{
  content:""; display:block; width:72px; height:4px; margin-top:.4rem;
  border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 8px 20px rgba(78,163,255,.35);
}
.skills-cloud{
  display:flex; flex-wrap:wrap; gap:.8rem 1rem;
  padding:16px 18px; background:transparent; border:0; box-shadow:none; border-radius:16px;
}
.skills-cloud span{
  color:var(--ink);
  background:#FFFFFF;
  border:1px solid rgba(59,110,168,.24);
  border-radius:12px;
  font-weight:800; letter-spacing:.01em;
  padding:.48rem .9rem;
  box-shadow:none; text-shadow:none;
  transition:
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease,
    transform .08s ease,
    box-shadow .12s ease;
}
.skills-cloud span:hover{
  background:linear-gradient(180deg,#E3EEFF 0%, #D1E3FF 100%);
  color:var(--accent-ink);
  border-color:rgba(59,110,168,.50);
}
.skills-cloud span:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px rgba(78,163,255,.40);
}
.skills-cloud span:active{
  transform:translateY(1px);
  background:linear-gradient(180deg,var(--accent-dark) 0%, var(--accent-d1) 100%);
  color:#FFFFFF;
  border-color:var(--accent-d1);
  box-shadow:
    0 8px 22px rgba(15,23,42,.18),
    0 0 0 2px rgba(78,163,255,.18);
}
@media (hover:none){
  .skills-cloud span:hover{
    background:#FFFFFF; color:var(--ink); border-color:rgba(59,110,168,.24);
  }
}

/* ---------------- 5) Education — Timeline (forbedret synlighet) ---------------- */
.exp-edu-section{padding:5rem 0 3.8rem}
.exp-edu-section h2{
  font:700 clamp(2.2rem,6vw,3rem)/1.04 "Cormorant Garamond",serif;
  margin:0 0 1.4rem;
}

.timeline{
  position:relative; list-style:none; margin:0; padding-left:84px; /* litt bredere gutter */
}
.timeline::before{
  content:""; position:absolute; left:34px; top:0; bottom:0; width:var(--rail-w);
  background:linear-gradient(180deg,transparent,rgba(59,110,168,.65) 25%,rgba(78,163,255,.65) 75%,transparent);
  box-shadow:0 0 18px rgba(59,110,168,.18);
  border-radius:3px;
}
.timeline-year{
  display:inline-block; padding:.38rem .72rem; border-radius:12px;
  background:
    linear-gradient(180deg,#fff,#F3F6FB) padding-box,
    linear-gradient(135deg, rgba(59,110,168,.22), rgba(78,163,255,.22)) border-box;
  border:1px solid transparent; color:var(--accent);
  font:800 1rem/1.15 Inter, sans-serif; letter-spacing:.02em;
  box-shadow: var(--elev-1);
  margin:0 0 .6rem .2rem;
}
.timeline-item{
  position:relative; margin:0 0 1.6rem; padding-left:.2rem;
}
.timeline-item:last-child{margin-bottom:0}
.timeline-item::before{
  content:""; position:absolute; left:34px; top:38px;
  width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #6CB0FF, #3B6EA8 70%);
  box-shadow:0 0 0 4px #fff, 0 8px 16px rgba(59,110,168,.35);
}
.timeline-item::after{
  content:""; position:absolute; left:48px; top:45px;
  width:150px; height:2px;
  background:linear-gradient(90deg, rgba(59,110,168,.48), rgba(78,163,255,.28) 85%, transparent);
}

/* Kort med accent-stripe for bedre synlighet */
.timeline-content{
  position:relative;
  margin-left:180px;
  background:
    linear-gradient(180deg,#FFFFFF,#F8FBFF) padding-box,
    linear-gradient(135deg, rgba(59,110,168,.18), rgba(78,163,255,.18)) border-box;
  border:1px solid transparent; border-radius:16px;
  padding:16px 20px; box-shadow: var(--elev-1), var(--inner);
  transition:.18s ease;
}
.timeline-content::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, rgba(59,110,168,.85), rgba(78,163,255,.8));
  border-radius:16px 0 0 16px; opacity:.95;
}
.timeline-content:hover{transform:translateY(-2px); box-shadow: var(--elev-2)}
.timeline-content h3{margin:0 0 .35rem; font:800 1.08rem/1.22 Inter, sans-serif}
.timeline-content p{margin:0; color:var(--muted); font-size:1rem; line-height:1.6}

/* ---------------- 6) Work Experience (ryddigere) ---------------- */
.xp{position:relative; padding:3.8rem 6% 6rem}
.xp__wrap{max-width:1100px; margin:0 auto; position:relative}
.xp__kicker{text-transform:uppercase; letter-spacing:.22em; color:var(--muted); margin:0 0 .55rem; font:600 .9rem/1.2 Inter,sans-serif}
.xp__title{margin:0 0 2.4rem; font:700 clamp(2.2rem,6vw,3.4rem)/1.06 "Cormorant Garamond",serif}
.xp__rail{
  position:absolute; left:50%; transform:translateX(-50%);
  top:calc(3.8rem + 40px); bottom:2.2rem; width:var(--rail-w);
  background:linear-gradient(180deg,transparent,rgba(59,110,168,.52) 25%, rgba(78,163,255,.52) 75%, transparent);
  box-shadow:0 0 24px rgba(59,110,168,.16); border-radius:2px; pointer-events:none;
}
.xp__item{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:center;
  margin:0 0 2.2rem; opacity:0; transform:translateY(14px); transition:.45s;
}
.xp__item.is-in{opacity:1; transform:none}
.xp--left  .xp__card{grid-column:1}
.xp--right .xp__card{grid-column:2}
.xp__dot{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;
  background:var(--panel); border:2px solid rgba(59,110,168,.30);
  display:grid; place-items:center; box-shadow: var(--elev-1);
  pointer-events:none; z-index:2;
}
.xp__dot span{font:800 .92rem/1 Inter; color:var(--accent)}
.xp__when{
  position:absolute; top:50%; transform:translateY(-50%);
  padding:.44rem .86rem; border-radius:var(--round);
  background:
    linear-gradient(180deg,#FFFFFF,#F3F6FB) padding-box,
    linear-gradient(135deg, rgba(59,110,168,.22), rgba(78,163,255,.22)) border-box;
  border:1px solid transparent; color:var(--ink); font-weight:800;
  letter-spacing:.02em; box-shadow: var(--elev-1);
  white-space:nowrap; z-index:3;
}
.xp--left  .xp__when{ left:  calc(50% + 42px) }
.xp--right .xp__when{ right: calc(50% + 42px) }

/* Kort med accent-stripe for tydelighet */
.xp__card{
  position:relative;
  background:
    linear-gradient(180deg,#FFFFFF,#F8FBFF) padding-box,
    linear-gradient(135deg, rgba(59,110,168,.18), rgba(78,163,255,.18)) border-box;
  border:1px solid transparent; border-radius:16px;
  padding:16px 18px; box-shadow: var(--elev-1), var(--inner);
  transition:.18s ease;
}
.xp__card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, rgba(59,110,168,.85), rgba(78,163,255,.8));
  border-radius:16px 0 0 16px;
}
.xp__card:hover{box-shadow: var(--elev-2); transform:translateY(-1px)}
.xp__role{margin:0 0 .28rem; font:800 1.14rem/1.22 Inter}
.xp__place{color:#2C3B56; font-weight:800; margin-left:.18rem}
.xp__bullets{margin:.2rem 0 0; padding-left:1.05rem; color:var(--muted); line-height:1.62}
.xp__bullets li{margin:.3rem 0}

/* ---------------- 7) Projects ---------------- */
.projects-section{
  padding:5.4rem 0;
  background:
    radial-gradient(600px 260px at 15% 0, rgba(59,110,168,.10), transparent 60%),
    var(--bg-soft);
}
.projects-section h2{font:700 clamp(2rem,6vw,3rem)/1.06 "Cormorant Garamond",serif; margin:0 0 1.8rem}
.projects-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.4rem}
.project-card{
  appearance:none; border:0; text-align:left; width:100%;
  background:
    linear-gradient(180deg,#FFFFFF,#F8FBFF) padding-box,
    linear-gradient(135deg, rgba(59,110,168,.22), rgba(78,163,255,.22)) border-box;
  border:1px solid transparent; border-radius:var(--r);
  overflow:hidden; cursor:pointer; transition:.2s ease; box-shadow: var(--elev-1), var(--inner);
}
.project-card:hover{transform:translateY(-3px); box-shadow: var(--elev-2)}
.project-card .thumb{position:relative; height:clamp(150px,22vh,210px); background:#EAF0F8; border-bottom:1px solid var(--line)}
.project-card .thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.project-card .card-body{padding:1rem 1rem .9rem}
.project-card h3{margin:0 0 .4rem; font:700 1.25rem/1.2 "Cormorant Garamond",serif}
.project-card p{margin:0; color:var(--muted)}
.tags{display:block; margin-top:.75rem; font-size:.93rem; opacity:.9}

/* ---------------- 8) Modal — Polished + Responsiv (full media visible) ---------------- */
.modal{
  display:none; position:fixed; inset:0; z-index:2000;
  background: radial-gradient(120% 120% at 80% -10%, rgba(78,163,255,.18), transparent 40%),
              rgba(15,23,42,.36);
  backdrop-filter: blur(8px);
  justify-content:center; align-items:center; padding:1.2rem;
}
.modal.open, .modal[aria-hidden="false"]{display:flex}
.modal-content{
  position:relative;
  display:grid; gap:1.2rem; grid-template-columns:56% 44%;
  width:min(1100px, 96vw);
  height:clamp(560px, 82vh, 900px);
  height:clamp(560px, 82svh, 900px);
  height:clamp(560px, 82dvh, 900px);
  overflow:hidden;
  background:
    linear-gradient(180deg, #FFFFFF 0%, #F9FBFF 100%) padding-box,
    linear-gradient(135deg, rgba(59,110,168,.26), rgba(78,163,255,.26)) border-box;
  border:1px solid transparent; border-radius:18px; padding:1.2rem;
  color:var(--ink);
  box-shadow: var(--elev-3), var(--inner);
  animation: modalIn .2s ease-out;
  isolation:isolate;
}
.close{
  position:absolute; top:.7rem; right:.8rem;
  width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center;
  background:
    linear-gradient(180deg,#FFFFFF,#F4F7FC) padding-box,
    linear-gradient(135deg, rgba(59,110,168,.26), rgba(78,163,255,.26)) border-box;
  border:1px solid transparent; box-shadow: var(--elev-2), var(--inner);
  font-size:1.35rem; font-weight:800; cursor:pointer; color:var(--accent-ink);
  transition:.18s ease;
}
.close:hover{transform:translateY(-1px) rotate(4deg); box-shadow: var(--elev-3)}
.modal-media{min-height:280px}
.media-slider{
  position:relative; border-radius:14px; overflow:hidden;
  background:#0F172A; border:1px solid var(--line);
  height:100%; display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.media-track{width:100%; height:100%}
.media-slide{
  display:none; margin:0; width:100%; height:100%; align-items:center; justify-content:center;
}
.media-slide.is-active{display:flex}
.media-slide>img,.media-slide>video{width:100%; height:100%; object-fit:contain}
.media-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:
    linear-gradient(180deg,#FFFFFF,#F4F7FC) padding-box,
    linear-gradient(135deg, rgba(59,110,168,.26), rgba(78,163,255,.26)) border-box;
  border:1px solid transparent;
  box-shadow: var(--elev-2), var(--inner);
  width:44px; height:44px; border-radius:50%; cursor:pointer; display:grid; place-items:center;
  font-weight:800; user-select:none; transition:.18s ease;
}
.media-nav.prev{left:.6rem}
.media-nav.next{right:.6rem}
.media-nav:hover{transform:translateY(-50%) scale(1.06); box-shadow: var(--elev-3)}
.modal-info{overflow:auto; min-height:0}
.modal-info h2{margin:0 0 .6rem; font:700 1.8rem/1.15 "Cormorant Garamond",serif; text-shadow:0 1px 0 rgba(255,255,255,.7)}
.modal-info p{margin:.45rem 0; color:var(--muted)}
.modal-info a{color:var(--accent); font-weight:800}
.modal-info a:hover{text-decoration:underline}
.info-chips{display:flex; flex-wrap:wrap; gap:.45rem; margin:.4rem 0 .2rem}
.chip{
  padding:.28rem .58rem; border-radius:10px; font-weight:700; font-size:.86rem;
  background:
    linear-gradient(180deg,#FFFFFF,#F5F8FD) padding-box,
    linear-gradient(135deg, rgba(59,110,168,.22), rgba(78,163,255,.22)) border-box;
  border:1px solid transparent; box-shadow: var(--elev-1);
}

/* ---------------- 9) Contact ---------------- */
.contact-section{
  background:
    radial-gradient(700px 260px at 85% 0, rgba(59,110,168,.10), transparent 60%),
    var(--bg);
  padding:6rem 0
}
.contact-kicker{text-transform:uppercase; letter-spacing:.18em; color:var(--muted); margin-bottom:.45rem; font-size:.95rem}
.contact-title{
  margin:0 0 1rem; font:700 clamp(2.1rem,6vw,3.4rem)/1.06 "Cormorant Garamond",serif;
  background:linear-gradient(90deg,#0F172A,#3B4C6E); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.contact-lead{font-size:1.06rem; color:var(--muted); margin-bottom:1.4rem}
.contact-mail{font-size:1.02rem; margin-bottom:1rem}
.contact-mail a{border-bottom:1px dashed var(--line)}
.contact-mail a:hover{color:var(--accent); border-color:#C5D1E3}
.contact-links{display:flex; gap:1rem; flex-wrap:wrap}
.contact-link{display:flex; align-items:center; gap:.55rem; font-weight:800}
.contact-link svg{width:22px; height:22px; fill:currentColor}
.contact-link:hover{color:var(--accent)}
.contact-row{display:flex; gap:.6rem; align-items:center; margin-bottom:.6rem; font-size:1.05rem}
.contact-row .label {font-weight:700; color:var(--ink); min-width:70px}
.contact-row .contact-value {color:var(--muted); border-bottom:1px dashed var(--line)}
.contact-row .contact-value:hover {color:var(--accent); border-color:#C5D1E3}

/* ---------------- 10) Breakpoints — ekstra fokus på EDU/XP ---------------- */

/* XL Desktop (≥1400px) */
@media (min-width:1400px){
  :root{ --r:18px; --r-lg:22px; --fs-base:17px; --rail-w: var(--rail-w-lg) }
  .container{max-width:1280px}
  .hero{gap:8rem}
  .project-card{border-radius:var(--r-lg)}
  .skills-cloud{gap:1rem 1.2rem}
  .skills-cloud span{padding:.54rem 1rem}

  /* EDU/XP litt større */
  .timeline{padding-left:92px}
  .timeline::before{left:36px}
  .timeline-item::before{left:36px}
  .timeline-item::after{left:50px}
  .timeline-content{margin-left:190px; padding:18px 22px}
  .xp__rail{width:var(--rail-w-lg)}
}

/* Tablet portrait (600–900px) */
@media (max-width:900px) and (min-width:601px){
  :root{ --r:18px; --fs-base:16.5px }
  .nav-toggle{display:block}
  .nav-right{
    position:fixed; inset:70px 0 auto 0; background:rgba(255,255,255,.98);
    border-bottom:1px solid var(--line); padding:1rem 5%; display:none; flex-direction:column; gap:.6rem;
    box-shadow: var(--elev-2);
  }
  .nav-right.open{display:flex}
  .hero{flex-direction:column; gap:1.8rem; min-height:auto; padding:7rem 8% 3.5rem}
  .profile-arch{width:240px;height:330px; border-radius:240px 240px 0 0}
  .intro-text{text-align:center; max-width:600px}
  .contact-links{justify-content:center}

  /* EDU – mindre rail, kort tettere, men tydelig stripe */
  .timeline{padding-left:64px}
  .timeline::before{left:26px}
  .timeline-item::before{left:26px}
  .timeline-item::after{left:40px; width:120px}
  .timeline-content{margin-left:150px; padding:16px 18px}

  /* XP – fortsatt to kolonner, men større kort og tekst */
  .xp__item{gap:20px}
  .xp__role{font-size:1.12rem}
  .xp__card{padding:16px 18px}
}

/* Mobile (≤600px) – ren kortvisning for EDU/XP */
@media (max-width:600px){
  :root{ --r:18px; --fs-base:17.5px }
  body{ padding-bottom:env(safe-area-inset-bottom); }
  .navbar{
    height:64px; padding:0 max(5%, 16px);
    border-bottom:1px solid rgba(15,23,42,.08);
    backdrop-filter:var(--glass);
  }
  .logo-circle{width:40px;height:40px}
  .hero{
    flex-direction:column; gap:1.2rem;
    min-height:auto; padding:calc(64px + env(safe-area-inset-top)) 6% 2.6rem;
  }
  .profile-arch{width:220px;height:300px}
  .intro-text{text-align:center; max-width:560px}
  .intro-text h1{font-size:clamp(2.1rem,8.2vw,3rem); line-height:1.06; text-shadow:none}
  .intro-sub{font-size:1.04rem}
  .contact-links{justify-content:center}
  .pill{border-radius:14px; padding:.68rem 1rem}

  /* Skills – pilleform, 2 kolonner, større touch */
  .skills-cloud{gap:.7rem; padding:10px 2px}
  .skills-cloud span{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:calc(50% - .7rem);
    text-align:center;
    border-radius:var(--round);
    padding:.72rem 1rem;
    font-size:1.02rem;
  }
  .skills-cloud span:hover{
    background:linear-gradient(180deg,#D8E4FF 0%, #C3D5FF 100%);
  }
  .skills-cloud span:active{transform:translateY(1px) scale(.98)}

  /* EDU — fjern rail/dots/connector, vis kort + år-chip */
  .timeline{padding-left:0}
  .timeline::before{display:none}
  .timeline-item{padding-left:0; margin-bottom:1.1rem}
  .timeline-item::before,
  .timeline-item::after{display:none}
  .timeline-year{
    margin:0 0 .5rem 0; display:inline-block; font-size:1.02rem;
    box-shadow:var(--elev-1);
  }
  .timeline-content{
    margin-left:0; padding:14px 16px; border-radius:18px;
  }
  .timeline-content::before{width:5px} /* litt bredere stripe på mobil for synlighet */
  .timeline-content h3{font-size:1.08rem}
  .timeline-content p{font-size:1.02rem; line-height:1.58}

  /* XP — én kolonne, tydelig stripe, større spacing */
  .xp{padding:3.2rem 6% 4.6rem}
  .xp__rail, .xp__dot{display:none}
  .xp__item{display:block; margin:0 0 1.2rem; opacity:1; transform:none}
  .xp__when{
    position:static; transform:none; display:inline-block; margin:0 0 .6rem;
    padding:.46rem .9rem; font-size:1.02rem;
  }
  .xp__card{
    border-radius:18px; padding:16px 16px 14px;
  }
  .xp__card::before{width:5px} /* tydeligere stripe på mobil */
  .xp__role{font-size:1.12rem}
  .xp__bullets{font-size:1.02rem; line-height:1.6}

  /* Projects – større bildeflate, mykere hjørner */
  .projects-section{padding:4.8rem 0}
  .project-card{border-radius:18px}
  .project-card .thumb{height:clamp(148px,24vh,200px)}
  .project-card h3{font-size:1.1rem}

  /* Contact */
  .contact-section{padding:4.4rem 0}
}

/* ---------------- 11) Reduced motion ---------------- */
@media (prefers-reduced-motion:reduce){
  .xp__item, .timeline-item{transition:none; transform:none; opacity:1}
  .media-nav{transition:none}
  .skills-cloud span{transition:none}
}

/* ---------------- 12) Mobil Fullscreen Modal ---------------- */
@media (max-width:900px){
  .modal{padding:0}
  .modal-content{
    width:100vw;
    height:100vh; height:100svh; height:100dvh;
    border-radius:0; grid-template-columns:1fr; padding:0;
  }
  .modal-media{height:55vh; height:55svh; height:55dvh}
  @media (orientation:landscape){
    .modal-media{height:70vh; height:70svh; height:70dvh}
  }
  .modal-info{padding:1rem 1rem 1.2rem}
  .close{top:.7rem; right:.7rem; position:fixed; z-index:3}
}

/* ---------------- 13) Åpningsanimasjon ---------------- */
@keyframes modalIn{
  from{ transform: translateY(6px) scale(.98); opacity:.0 }
  to{   transform: none;                         opacity:1  }
}

/* ---------------- 14) Toggle cover for media-slider (valgfritt) ---------------- */
.media-slider.cover .media-slide>img,
.media-slider.cover .media-slide>video{ object-fit:cover }