/* ============================================
   By Nyberg v2 -- klon af ChatGPT-reference-site
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&display=swap');

:root{
  --bg:            #F6F2E8;
  --bg-panel:      #EEE8DA;
  --card-bg:       #EEE8DC;
  --text:          #263638;
  --nav-link:      #806B5E;
  --accent:        #96532F;
  --accent-dark:   #694B3C;
  --accent-pill:   #80604F;
  --accent-teal:   #7E9997;
  --title-color:   #604438;
  --footer-text:   #765648;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-pill: 999px;
  --container: 1180px;
  --shadow-card: 0 8px 24px 0 rgba(71,52,42,.12);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Avenir Next', Avenir, 'Segoe UI', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1, h2, h3{ margin:0 0 .5em; line-height:1.15; }
p{ margin:0 0 1.1em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }

.eyebrow{
  display:inline-block;
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
  margin-bottom:14px;
}

.btn-solid{
  display:inline-block;
  margin-top:16px;
  padding:14px 28px;
  border-radius:var(--radius-pill);
  background:var(--accent-pill);
  color:#fff;
  font-weight:600;
  font-size:.95rem;
  text-align:center;
}

/* ---------- Header ---------- */
.simple-header{
  background:var(--bg-panel);
}
.header-inner{
  max-width:var(--container);
  margin-inline:auto;
  padding:20px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.simple-brand{
  font-size:1.15rem;
  font-weight:700;
  color:var(--accent-dark);
}
.simple-nav{ display:flex; gap:30px; }
.simple-nav a{
  font-size:.82rem;
  color:var(--nav-link);
  font-weight:500;
}
.simple-nav a:hover{ color:var(--accent-dark); }

/* ---------- Homepage story panel ---------- */
.story-panel{
  max-width:var(--container);
  margin:56px auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:64px;
  align-items:start;
}
.story-copy h1{
  font-size:clamp(2rem, 4vw, 3.2rem);
  font-weight:500;
}
.story-copy h1 .h1-lead{ color:var(--accent); font-weight:500; }
.story-copy h1 strong{ color:var(--accent-dark); font-weight:600; }
.story-intro{
  font-size:1.15rem;
  font-weight:500;
  color:var(--text);
  margin-bottom:24px;
}
.story-copy p{ color:var(--text); font-size:1rem; }
.story-signoff{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1.05rem;
  margin-top:20px;
}
.signature{
  font-family:'Dancing Script', cursive;
  font-size:2.2rem;
  color:var(--accent);
  line-height:1;
}
.story-photo img{
  width:100%;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
}
.story-photo .btn-solid{ width:100%; text-align:center; }

/* ---------- Opgaver hero ---------- */
.task-hero{
  background:linear-gradient(118deg, #C7A98C 0%, #D8C6AB 46%, #A5B9B7 100%);
}
.task-hero-inner{
  max-width:var(--container);
  margin-inline:auto;
  padding:64px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}
.task-hero-text{ max-width:640px; }
.task-hero-text .eyebrow{ color:var(--accent-dark); }
.task-hero-text h1{
  font-size:clamp(1.8rem, 3.6vw, 2.6rem);
  color:var(--accent-dark);
  font-weight:500;
}
.task-hero-text h1 strong{ font-weight:700; }
.task-hero-text p{ color:var(--accent-dark); font-size:1rem; max-width:520px; }
.task-hero-sig{
  font-family:'Dancing Script', cursive;
  font-size:3rem;
  color:var(--accent-dark);
  flex:none;
}

/* ---------- Filters + grid ---------- */
.task-filters-section{
  max-width:var(--container);
  margin:0 auto;
  padding:40px 32px 72px;
}
.task-filters{
  display:flex;
  gap:12px;
  margin-bottom:36px;
  flex-wrap:wrap;
}
.filter-pill{
  padding:8px 18px;
  border-radius:var(--radius-pill);
  background:var(--bg-panel);
  color:var(--text);
  font-size:.8rem;
  cursor:pointer;
  transition:all .2s ease;
}
.filter-pill.selected{
  background:var(--accent-pill);
  color:#fff;
}
.task-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.task-card{
  display:block;
  background:var(--card-bg);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.task-visual{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
}
.task-visual img{ width:100%; height:100%; object-fit:cover; }
.task-num{
  position:absolute;
  top:14px; left:14px;
  background:rgba(38,54,56,.55);
  color:#fff;
  font-size:.75rem;
  font-weight:600;
  padding:4px 10px;
  border-radius:var(--radius-pill);
}
.task-info{ padding:22px 22px 26px; }
.task-tag{
  display:block;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
  margin-bottom:8px;
}
.task-info h2{
  font-size:1.2rem;
  font-weight:650;
  color:var(--title-color);
  margin-bottom:10px;
}
.task-info p{ color:var(--text); font-size:.92rem; margin-bottom:14px; }
.task-link{ font-size:.88rem; font-weight:600; color:var(--accent-dark); }

/* ---------- Detail page ---------- */
.detail-wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:32px 32px 80px;
}
.back-link{
  display:inline-block;
  margin-bottom:24px;
  font-size:.9rem;
  color:var(--nav-link);
}
.detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}
.detail-image img{
  width:100%;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
}
.detail-body h1{
  font-size:clamp(1.8rem, 3.4vw, 2.6rem);
  color:var(--title-color);
  font-weight:600;
}
.detail-intro{ font-size:1.1rem; font-weight:500; color:var(--text); }
.detail-body p{ color:var(--text); }
.detail-bullets{ margin:20px 0; }
.detail-bullets li{
  padding-left:0;
  color:var(--text);
  font-size:.96rem;
  margin-bottom:10px;
}
.detail-cta{
  margin-top:28px;
  padding:24px;
  background:var(--bg-panel);
  border-radius:var(--radius-md);
}
.detail-cta p{ color:var(--accent-dark); font-weight:500; margin-bottom:4px; }

/* ---------- AI-nyt ---------- */
.ai-hero{
  background:linear-gradient(135deg, #EEE8DA 0%, #E9E6DA 70%, #DFE6DF 100%);
}
.ai-hero-inner{
  max-width:var(--container);
  margin-inline:auto;
  padding:64px 32px;
}
.ai-hero-inner h1{
  font-size:clamp(2rem, 4vw, 2.8rem);
  color:var(--title-color);
  font-weight:500;
}
.ai-hero-inner p{ max-width:640px; color:var(--text); }

.news-wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:48px 32px 80px;
}
.news-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 32px;
}
.news-card{
  display:flex;
  gap:16px;
  padding:28px 24px;
  border-left:3px solid var(--accent);
  background:var(--bg-panel);
  margin-bottom:32px;
}
.news-card.accent-b{ border-left-color:var(--accent-teal); background:#E9E6DA; }
.news-num{
  font-family:'Dancing Script', cursive;
  font-size:1.6rem;
  color:var(--accent);
  flex:none;
}
.news-card.accent-b .news-num{ color:var(--accent-teal); }
.news-tag{
  display:block;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
  margin-bottom:8px;
}
.news-card.accent-b .news-tag{ color:var(--accent-teal); }
.news-body h2{ font-size:1.1rem; color:var(--title-color); font-weight:650; margin-bottom:10px; }
.news-body p{ font-size:.9rem; color:var(--text); margin-bottom:12px; }
.news-body a{ font-size:.88rem; font-weight:600; color:var(--accent-dark); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--bg-panel); }
.footer-inner{
  max-width:var(--container);
  margin-inline:auto;
  padding:34px 32px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  align-items:center;
  justify-content:space-between;
  color:var(--footer-text);
  font-size:.72rem;
}
.footer-brand{ font-weight:700; color:var(--accent-dark); font-size:.85rem; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .story-panel{ grid-template-columns:1fr; }
  .task-hero-inner{ flex-direction:column; align-items:flex-start; }
  .task-grid{ grid-template-columns:repeat(2, 1fr); }
  .detail-grid{ grid-template-columns:1fr; }
  .news-grid{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .task-grid{ grid-template-columns:1fr; }
  .header-inner{ padding:16px 20px; }
  .simple-nav{ gap:16px; }
  .story-panel{ padding:0 20px; margin:32px auto; }
  .task-hero-inner, .task-filters-section, .detail-wrap, .ai-hero-inner, .news-wrap, .footer-inner{ padding-left:20px; padding-right:20px; }
}