/* ==========================================================================
   Erik Kjær Andersen – portfolio styles
   Colours and fonts match the old WordPress (Astra) theme.
   ========================================================================== */

:root {
  --navy: #2d3060;        /* header, footer, headings, borders */
  --orange: #f58200;      /* site name, active menu item */
  --sand: #d6b476;        /* page background */
  --sand-dark: #ccab6c;   /* darker panels behind info cards */
  --pink: #e30b5d;        /* buttons and links */
  --text: #1d1f3d;
  --radius: 20px;
  --content: 760px;       /* text column width */
  --wide: 960px;          /* galleries, home page grids */
  --heading-font: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --body-font: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--sand);
  color: var(--text);
  font: 15px/1.65 var(--body-font);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--pink); }
a:hover { color: var(--navy); }
strong { font-weight: 700; }
mark { background: none; color: var(--navy); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  font-weight: 400;
  color: var(--navy);
  line-height: 1.2;
  margin: 1.4em 0 .5em;
}
h1 { font-size: 2.6rem; text-align: center; }
h2 { font-size: 2.3rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.35rem; }
h5 { font-size: 1.1rem; }
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong { font-weight: 600; }
p, ul, ol { margin: 0 0 1em; }
ul ul { margin: 0; }
hr { border: 0; border-top: 2px solid rgba(45, 48, 96, .25); margin: 2.5em auto; max-width: var(--content); }

/* ---------- Header ---------- */
.site-header {
  background: var(--navy);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  position: sticky; top: 0; z-index: 50;
}
.header-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 12px 24px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.brand { grid-column: 2; text-align: center; text-decoration: none; line-height: 1.2; }
.brand-name { display: block; font-family: var(--heading-font); font-size: 1.7rem; color: var(--orange); letter-spacing: .02em; }
.brand-tagline { display: block; font-family: var(--heading-font); font-size: 1rem; color: var(--sand); }
.site-nav { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 28px; }
.site-nav a { color: #c9cbe8; text-decoration: none; font-size: .95rem; }
.site-nav a:hover, .site-nav a.active { color: var(--orange); }
.site-nav svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.menu-toggle { display: none; }

/* ---------- Page content ---------- */
.content { flex: 1; width: 100%; padding: 32px 20px 64px; }
.content > * { max-width: var(--content); margin-left: auto; margin-right: auto; }
section { max-width: var(--content); margin: 0 auto; }
section section { padding: 0; }
.content > section + section { margin-top: 2.5em; }
section > h4:first-child { text-align: center; margin-top: .4em; }

figure { margin-block: 0 1.5em; margin-inline: 0; }
.content > figure { margin-inline: auto; }
figure img, figure video, .content > video, .column > video {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
figcaption { text-align: center; font-size: .9rem; margin-top: .6em; }
.caption { text-align: center; font-size: .9rem; }

/* Side-by-side columns */
.columns { display: flex; gap: 28px; align-items: flex-start; margin-block: 1.5em; }
.column { flex: 1 1 0; min-width: 0; }
.column > :first-child { margin-top: 0; }
.column video { margin-bottom: 1.5em; }

/* Bordered info cards (Responsibilities / Overview / Team …) */
section:has(> .columns.cards) {
  background: var(--sand-dark);
  max-width: var(--wide);
  padding: 30px calc((var(--wide) - var(--content)) / 2);
}
.columns.cards { align-items: stretch; }
.columns.cards > .column {
  border: 4px solid var(--navy);
  border-radius: var(--radius);
  background: var(--sand);
  padding: 20px 24px 12px;
}
.columns.cards + .columns { /* the "Team" box under the two cards */
  border: 4px solid var(--navy);
  border-radius: var(--radius);
  padding: 20px 24px;
  align-items: center;
}
.columns.cards + .columns figure img { box-shadow: none; max-height: 260px; width: auto; margin: 0 auto; }
.columns.cards h3, .columns.cards + .columns h3 { margin: 0 0 .4em; font-size: 1.6rem; }

/* Image galleries */
.gallery {
  max-width: var(--wide) !important;
  display: flex; flex-wrap: wrap;
  gap: 16px;
  margin: 1em auto 2em;
}
.gallery figure { margin: 0; flex: 1 1 28%; min-width: 220px; }
.gallery img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; cursor: zoom-in; transition: transform .2s; }
.gallery img:hover { transform: scale(1.02); }
section:has(> .gallery) { max-width: var(--wide); }

/* YouTube (loads the real player only when clicked) */
.youtube {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  background: #000 center / cover no-repeat;
  cursor: pointer; margin: 0 auto 1.5em;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
.youtube::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 68px; height: 48px; transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath d='M66.5 7.7a8.5 8.5 0 0 0-6-6C55.2.3 34 .3 34 .3s-21.2 0-26.5 1.4a8.5 8.5 0 0 0-6 6C.1 13 .1 24 .1 24s0 11 1.4 16.3a8.5 8.5 0 0 0 6 6C12.8 47.7 34 47.7 34 47.7s21.2 0 26.5-1.4a8.5 8.5 0 0 0 6-6C67.9 35 67.9 24 67.9 24s0-11-1.4-16.3z' fill='%23f00'/%3E%3Cpath d='M45 24 27 14v20' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .15s;
}
.youtube:hover::after { transform: translate(-50%, -50%) scale(1.1); }
.youtube .yt-title {
  position: absolute; left: 0; right: 0; top: 0; padding: 12px 16px;
  color: #fff; font-weight: 700; font-size: 1rem;
  background: linear-gradient(rgba(0, 0, 0, .7), transparent);
}
.youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.youtube.playing::after, .youtube.playing .yt-title { display: none; }

/* Before / after comparison slider */
.compare {
  position: relative; overflow: hidden; margin: 1em auto .5em;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  user-select: none; touch-action: pan-y; cursor: ew-resize;
}
.compare img { width: 100%; pointer-events: none; }
.compare img:nth-of-type(2) { position: absolute; inset: 0; height: 100%; object-fit: cover; clip-path: inset(0 0 0 var(--pos, 50%)); }
.compare .handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; margin-left: -1.5px;
  background: #fff; pointer-events: none;
}
.compare .handle::after {
  content: '◂ ▸'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border: 3px solid #fff; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: 12px; letter-spacing: -1px;
  background: rgba(0, 0, 0, .25);
}
.compare .label {
  position: absolute; top: 50%; transform: translateY(-50%); padding: 4px 10px;
  background: rgba(255, 255, 255, .2); color: #fff; font-size: .8rem; text-transform: uppercase;
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.compare:hover .label { opacity: 1; }
.compare .label.before { left: 10px; }
.compare .label.after { right: 10px; }

/* Slideshow */
.slideshow { position: relative; max-width: var(--wide) !important; margin: 1em auto 2em; }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius); }
.slides::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; }
.slide figure { margin: 0; }
.slide img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: none; }
.slideshow .prev, .slideshow .next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: 0; font-size: 2.4rem; color: var(--navy); cursor: pointer; padding: 0 8px; line-height: 1;
}
.slideshow .prev { left: -44px; }
.slideshow .next { right: -44px; }
.dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(45, 48, 96, .35); cursor: pointer; }
.dots button.on { background: var(--navy); }

/* Buttons */
.buttons { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-block: 2.5em 0; }
.buttons + .buttons { margin-top: 14px; }
.button {
  display: inline-block; background: var(--pink); color: #fff; border: 0; border-radius: 2px;
  padding: .7em 1.4em; font: inherit; font-size: .95rem; text-decoration: none; cursor: pointer;
  transition: background .15s;
}
.button:hover { background: var(--navy); color: #fff; }

/* Media + text (image left, text right) */
.media-text { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; margin-block: 1.5em; }
.media-text h2 { margin-top: 0; }

/* Expandable sections (Articles page) */
details { border-bottom: 2px solid rgba(45, 48, 96, .25); padding: .6em 0; }
summary { cursor: pointer; font-family: var(--heading-font); font-size: 1.5rem; color: var(--navy); }
details[open] summary { margin-bottom: .6em; }

/* Audio */
audio { width: 100%; margin: .5em 0 1em; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(10, 11, 30, .92);
  display: grid; place-items: center; padding: 4vh 4vw; cursor: zoom-out;
}
.lightbox img { max-height: 92vh; width: auto; max-width: 100%; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.lightbox button {
  position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0;
  color: #fff; font-size: 3rem; cursor: pointer; padding: 0 16px;
}
.lightbox .lb-prev { left: 8px; }
.lightbox .lb-next { right: 8px; }
.lightbox .lb-close { top: 30px; right: 8px; left: auto; font-size: 2.2rem; }

/* ---------- Home page ---------- */
.page-home .content { padding: 0; }
.page-home .content > section {
  max-width: none; margin: 0; padding: 40px 20px 50px;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 6px 10px -6px rgba(0, 0, 0, .25);
}
.page-home section > * { max-width: var(--wide); margin-left: auto; margin-right: auto; }
.page-home h1 { margin-top: .4em; font-size: 2.4rem; }
.page-home .columns { gap: 22px; align-items: flex-start; }
.page-home .column { text-align: center; }
.page-home .column figure { margin-bottom: .9em; }
.page-home .column img { border-radius: 14px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; box-shadow: none; transition: transform .2s; }
.page-home .column a:hover img { transform: translateY(-3px); }
.page-home .column h4 { font-size: 1.2rem; margin: 0 0 .5em; line-height: 1.25; }
.page-home .column p { font-size: .9rem; }
.page-home section:first-child .column img { aspect-ratio: 16 / 9; object-position: center 8%; }
.page-home .more:not([hidden]) { display: block; }
.page-home .view-more { background: var(--navy); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; padding: .7em 2.4em; }
.page-home .view-more:hover { background: var(--pink); }
.page-home .buttons { margin-top: 1em; }
.page-home section:last-child { text-align: center; box-shadow: none; }
.page-home section:last-child h2 { font-size: 2.2rem; margin-top: .4em; }

/* Project cards on the home page */
.card {
  position: relative; display: block; max-width: 860px !important;
  min-height: 280px; margin: 0 auto 18px !important;
  border-radius: var(--radius); overflow: hidden; color: #fff; text-decoration: none;
}
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0) 55%); }
.card:hover img { transform: scale(1.04); }
.card-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 24px; z-index: 1; }
.card-text h2 { color: #fff; font-size: 2rem; margin: 0 0 .3em; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.card-text h5 { color: rgba(255, 255, 255, .85); margin: 0; font-size: 1.05rem; }
.card:hover { color: #fff; }

/* About page */
.page-about .columns { align-items: center; gap: 40px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy); color: #c9cbe8; text-align: center;
  padding: 36px 20px 30px; font-size: .9rem;
}
.footer-social { display: flex; justify-content: center; gap: 14px; }
.footer-social a { color: #c9cbe8; }
.footer-social a:hover { color: var(--orange); }
.footer-social svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.site-footer hr { width: 60px; margin: 18px auto; border-top: 2px solid #c9cbe8; opacity: .6; }
.site-footer p { margin: 0; }

/* ---------- Small screens ---------- */
@media (max-width: 1080px) {
  .slideshow .prev { left: 4px; color: #fff; text-shadow: 0 0 6px #000; }
  .slideshow .next { right: 4px; color: #fff; text-shadow: 0 0 6px #000; }
}
@media (max-width: 760px) {
  body { font-size: 15px; }
  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.9rem; }
  .header-inner { grid-template-columns: 1fr auto; padding: 10px 16px; }
  .brand { grid-column: 1; text-align: left; }
  .brand-name { font-size: 1.35rem; }
  .menu-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; background: none; border: 0; cursor: pointer; padding: 8px;
  }
  .menu-toggle span { display: block; height: 2px; background: #c9cbe8; }
  .site-nav {
    display: none; grid-column: 1 / -1; flex-direction: column; align-items: flex-start;
    gap: 14px; padding: 14px 0 6px;
  }
  .site-header.open .site-nav { display: flex; }
  .columns, .media-text { flex-direction: column; display: flex; gap: 0; }
  .columns.cards { gap: 18px; }
  .column { width: 100%; }
  section:has(> .columns.cards) { padding: 20px 14px; }
  .card { min-height: 220px; }
  .card-text h2 { font-size: 1.6rem; }
  .page-home .columns { margin-block: 0; }
  .page-home .column { margin-bottom: 1.8em; }
  .page-home .column p { margin-bottom: 0; }
}