/* ==========================================================================
   Solheim Kitchen — base.css
   Fælles designsystem, navigation, footer og delte komponenter.
   ========================================================================== */

@font-face{
  font-family:'Editors Note';
  src:url('/assets/fonts/EditorsNote-Light.woff') format('woff');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Farver */
  --paper:#F4F2EC;
  --pure:#FCFBF8;
  --ink:#1B1916;
  --muted:#8C887D;
  --line:rgba(27,25,22,.16);
  --line2:rgba(27,25,22,.08);

  /* Typografi */
  --fd:'Editors Note',Georgia,serif;
  --fb:'Hanken Grotesk',system-ui,sans-serif;
  --fs-hero:clamp(3rem,1.8rem + 5.2vw,6.2rem);
  --fs-display:clamp(2.6rem,1.7rem + 3.6vw,4.8rem);
  --fs-h2:clamp(2.1rem,1.35rem + 2.8vw,3.6rem);
  --fs-h3:clamp(1.35rem,1.15rem + .7vw,1.85rem);
  --fs-lead:clamp(1.08rem,1rem + .45vw,1.32rem);
  --fs-body:1.0625rem;
  --fs-small:.92rem;
  --fs-eyebrow:.7rem;

  /* Layout */
  --x:clamp(22px,5.5vw,86px);
  --hh:80px;
  --pad:clamp(82px,13vh,190px);
  --max:1640px;
  --max-narrow:760px;
  --e:cubic-bezier(.22,1,.36,1);
  --reveal-y:26px;

  /* Bagudkompatible aliases til ældre side-CSS */
  --white:#fff;
  --stone:var(--muted);
  --stone-bg:var(--pure);
  --ink-soft:#55514a;
  --paper-2:var(--pure);
  --brass:var(--ink);
  --brass-deep:var(--muted);
  --line-soft:var(--line2);
  --line-light:rgba(244,242,236,.16);
  --font-display:var(--fd);
  --font-body:var(--fb);
  --space-x:var(--x);
  --section-y:var(--pad);
  --header-h:var(--hh);
  --ease:var(--e);
  --fs-h1:var(--fs-display);
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  overflow-x:hidden;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--fb);
  font-size:var(--fs-body);
  font-weight:300;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.menu-open{overflow:hidden}

img,video{
  display:block;
  max-width:100%;
  height:auto;
}

a{
  color:inherit;
  text-decoration:none;
}

h1,h2,h3,h4{
  margin:0;
  color:inherit;
  font-family:var(--fd);
  font-weight:300;
  line-height:1.06;
  letter-spacing:.01em;
}

p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

::selection{
  background:var(--ink);
  color:var(--paper);
}

/* --------------------------------------------------------------------------
   Helpers
   -------------------------------------------------------------------------- */

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.skip-link{
  position:absolute;
  top:-60px;
  left:16px;
  z-index:200;
  background:var(--ink);
  color:var(--paper);
  padding:10px 16px;
  font-size:.85rem;
  transition:top .25s var(--e);
}

.skip-link:focus{top:16px}

.container,
.wrap{
  width:min(100% - (var(--x) * 2),var(--max));
  margin-inline:auto;
}

.container--narrow{
  width:min(100% - (var(--x) * 2),var(--max-narrow));
  margin-inline:auto;
}

.eyebrow,
.kick{
  display:inline-block;
  margin:0;
  color:var(--muted);
  font-family:var(--fd);
  font-size:var(--fs-eyebrow);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.3em;
}

.eyebrow{margin-bottom:1.4rem}
.eyebrow--light{color:rgba(255,255,255,.9)}

.lead{
  color:var(--ink-soft);
  font-size:var(--fs-lead);
  font-weight:300;
  line-height:1.6;
}

.rule{
  width:64px;
  height:1px;
  margin:0;
  border:0;
  background:var(--ink);
}

.prose{max-width:64ch}

.prose h2{
  margin:2.4em 0 .7em;
  font-family:var(--fd);
  font-size:clamp(1.5rem,1.2rem + 1vw,2rem);
  font-weight:300;
  line-height:1.15;
}
.prose h2:first-child{margin-top:0}
.prose h3{
  margin:2.2em 0 .6em;
  font-family:var(--fd);
  font-size:var(--fs-h3);
  font-weight:300;
}

[data-reveal]{
  opacity:0;
  transform:translateY(var(--reveal-y));
  transition:opacity 1s var(--e),transform 1s var(--e);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity,transform;
}

[data-reveal].vis,
[data-reveal].is-visible{
  opacity:1;
  transform:none;
}

/* --------------------------------------------------------------------------
   Buttons / links
   -------------------------------------------------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  padding:1.05em 2.2em;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  font-family:var(--fd);
  font-size:.78rem;
  font-weight:300;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.2em;
  cursor:pointer;
  transition:background .45s var(--e),color .45s var(--e),border-color .45s var(--e);
}

.btn:hover{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}

.btn--solid{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}

.btn--solid:hover{
  background:transparent;
  color:var(--ink);
  border-color:var(--ink);
}

.btn--light{
  color:#fff;
  border-color:rgba(255,255,255,.55);
}

.btn--light:hover{
  background:#fff;
  color:var(--ink);
  border-color:#fff;
}

.arrow-link{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  color:var(--ink);
  font-family:var(--fd);
  font-size:.72rem;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.2em;
  transition:opacity .35s var(--e);
}

.arrow-link .arrow{display:none}
.arrow-link:hover{opacity:.55}
.arrow-link--light{color:#fff}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.hd{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  color:#fff;
  border-bottom:1px solid transparent;
  transition:background .6s var(--e),color .6s var(--e),border-color .6s var(--e);
}

.hd.solid{
  color:var(--ink);
  background:rgba(244,242,236,.9);
  border-bottom-color:var(--line2);
  backdrop-filter:blur(12px);
}

.hd__in{
  width:min(100% - (var(--x) * 2),var(--max));
  height:var(--hh);
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
}

.brand svg{
  width:40px;
  height:40px;
  color:currentColor;
}

.brand b{
  font-family:var(--fd);
  font-size:1.34rem;
  font-weight:300;
  letter-spacing:.03em;
}

.nav{
  display:flex;
  gap:clamp(16px,2.2vw,36px);
}

.nav a{
  font-family:var(--fd);
  font-size:.84rem;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.16em;
  opacity:.82;
  transition:opacity .4s var(--e);
}

.nav:hover a{opacity:.4}
.nav a:hover,
.nav a[aria-current="page"]{opacity:1}

.menubtn{
  display:none;
  border:0;
  background:none;
  color:currentColor;
  font-family:var(--fd);
  font-size:.84rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  cursor:pointer;
}

/* Header-tilstand når mobilmenuen er åben: baggrund + sort logo/tekst */
.hd.is-menu-open{
  color:var(--ink);
  background:var(--paper);
  border-bottom-color:var(--line2);
}

/* Overlay bag mobilmenuen — klik lukker */
.nav-overlay{
  position:fixed;
  inset:0;
  z-index:90;
  background:rgba(20,18,15,.34);
  opacity:0;
  visibility:hidden;
  transition:opacity .4s var(--e),visibility .4s var(--e);
}
body.menu-open .nav-overlay{opacity:1;visibility:visible}
@media(min-width:901px){ .nav-overlay{display:none} }

/* --------------------------------------------------------------------------
   Page hero til undersider
   -------------------------------------------------------------------------- */

.page-hero{
  position:relative;
  min-height:min(74vh,820px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  padding:calc(var(--hh) + clamp(40px,8vh,90px)) var(--x) clamp(54px,9vh,120px);
  color:#fff;
}

.page-hero__media{
  position:absolute;
  inset:0;
  z-index:0;
}

.page-hero__media .media-ph{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  border:0;
  background:radial-gradient(130% 130% at 50% 30%,#3a382f,#201f1b);
}

.page-hero__media .media-ph__mark,
.page-hero__media .media-ph__label{display:none}

.page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(to top,rgba(10,8,7,.66),rgba(10,8,7,.16) 55%,rgba(10,8,7,.3));
}

.page-hero__content{
  position:relative;
  z-index:2;
  width:min(100%,var(--max));
  margin-inline:auto;
}

.page-hero .eyebrow,
.page-hero .kick{color:rgba(255,255,255,.9)}

.page-hero__title{
  max-width:20ch;
  font-family:var(--fd);
  font-size:clamp(2.1rem,5vw,4.5rem);
  font-weight:300;
  line-height:1.04;
  text-shadow:0 2px 50px rgba(0,0,0,.35);
}

.page-hero__sub{
  max-width:52ch;
  margin-top:1.3rem;
  color:rgba(255,255,255,.84);
  font-size:var(--fs-lead);
  font-weight:300;
}

/* --------------------------------------------------------------------------
   Simple hero til tekstsider
   -------------------------------------------------------------------------- */

.lite-hero{
  padding:calc(var(--hh) + clamp(36px,7vh,80px)) var(--x) clamp(28px,4vh,48px);
  border-bottom:1px solid var(--line);
}

.lite-hero__inner{
  width:min(100%,var(--max));
  margin-inline:auto;
}

.lite-hero__title{
  font-family:var(--fd);
  font-size:var(--fs-display);
  font-weight:300;
}

.lite-hero__sub{
  max-width:56ch;
  margin-top:1rem;
  color:var(--ink-soft);
  font-weight:300;
}

/* --------------------------------------------------------------------------
   Delte sektioner / komponenter
   -------------------------------------------------------------------------- */

.section{padding:var(--pad) var(--x)}

.section > .container,
.section > .wrap{
  width:min(100%,var(--max));
}

/* Undersider: h1/h2 matcher det store udtryk fra forsiden */
.page-hero__title{
  font-size:clamp(2.1rem,5vw,4.5rem);
}

.section-head__title,
.split__title{
  font-size:clamp(2rem,5vw,4.4rem);
  line-height:1.1;
}
.section--paper-2,
.section--alt{background:var(--pure)}
.section--ink{background:var(--ink);color:var(--paper)}
.section--white{background:#fff}

.section-head{max-width:60ch}

.section-head__title{
  font-family:var(--fd);
  font-size:clamp(2rem,5vw,4.4rem);
  font-weight:300;
  line-height:1.14;
}

.section-head__text{
  margin-top:1.1rem;
  color:var(--ink-soft);
  font-weight:300;
}

.section--ink .section-head__text,
.section--ink .lead{color:rgba(244,242,236,.82)}

.media-ph{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:var(--ratio,4/3);
  overflow:hidden;
  border:1px solid var(--line2);
  background:var(--pure);
}

.media-ph__mark{display:grid;place-items:center}

.media-ph__logo{
  width:clamp(34px,8%,56px);
  height:auto;
  color:var(--muted);
  opacity:.26;
}

.media-ph__label{
  position:absolute;
  right:0;
  bottom:14px;
  left:0;
  color:var(--muted);
  font-family:var(--fd);
  font-size:.56rem;
  font-weight:300;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.26em;
}

[data-lightbox] img,
.media-ph img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.split{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(28px,5vw,80px);
  align-items:start;
}

.split__title{
  font-family:var(--fd);
  font-size:clamp(2rem,5vw,4.4rem);
  font-weight:300;
}

.split__features{
  list-style:none;
  margin:1.6rem 0 0;
  padding:0;
}

.split__features li{
  display:flex;
  align-items:center;
  gap:.9em;
  padding:.95em 0;
  border-bottom:1px solid var(--line);
  font-size:1rem;
}

.split__features li::before{
  content:"";
  width:6px;
  height:6px;
  flex:none;
  border-radius:50%;
  background:var(--ink);
}

.gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(12px,1.8vw,26px);
}

.gallery__item{overflow:hidden}
.gallery__item--wide{grid-column:1 / -1}
.gallery__item .media-ph{transition:transform 1.3s var(--e)}
.gallery__item:hover .media-ph{transform:scale(1.04)}

.band-cta{
  background:var(--pure);
  color:var(--ink);
  border-top:1px solid var(--line);
}

.band-cta__inner{
  width:min(100% - (var(--x) * 2),var(--max));
  margin-inline:auto;
  padding-block:clamp(64px,9vw,130px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(24px,4vw,64px);
  flex-wrap:wrap;
}

.band-cta__title{
  max-width:18ch;
  font-family:var(--fd);
  font-size:clamp(2rem,5vw,4.4rem);
  font-weight:300;
}

.band-cta__text{
  max-width:42ch;
  margin-top:1rem;
  color:var(--ink-soft);
  font-weight:300;
}

.band-cta .eyebrow{color:var(--muted)}

.case-card{display:block}
.case-card__link{position:relative;display:block;overflow:hidden}
.case-card__media{position:relative;overflow:hidden}
.case-card__media .media-ph{transition:transform 1.3s var(--e)}
.case-card:hover .case-card__media .media-ph{transform:scale(1.05)}

/* Gradient så billedteksten altid er læsbar */
.case-card__media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to top,rgba(15,13,11,.80),rgba(15,13,11,.12) 44%,rgba(15,13,11,0) 70%);
}

/* Billedtekst ligger nederst PÅ billedet — mere galleri, mere eksklusivt */
.case-card__body{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  padding:clamp(18px,2vw,32px);
  color:#fff;
}

.case-card__cat{
  display:block;
  margin-bottom:.5rem;
  color:rgba(255,255,255,.82);
  font-family:var(--fd);
  font-size:.62rem;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.24em;
}

.case-card__title{
  margin-bottom:0;
  color:#fff;
  font-family:var(--fd);
  font-size:clamp(1.3rem,1rem + .85vw,1.85rem);
  font-weight:300;
  line-height:1.12;
  transition:transform .5s var(--e);
}
.case-card:hover .case-card__title{transform:translateY(-3px)}

.cat-cases__grid,
.cases-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.8vw,40px);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.ft{
  overflow:hidden;
  background:var(--ink);
  color:var(--paper);
  padding:var(--pad) var(--x) clamp(40px,6vh,72px);
}

.ft__top{
  width:min(100%,var(--max));
  margin-inline:auto;
  display:grid;
  gap:clamp(40px,7vh,84px);
}

.ft__brandline{
  display:flex;
  align-items:center;
  gap:16px;
}

.ft__mk{
  width:38px;
  height:38px;
  color:var(--paper);
}

.ft__name{
  font-family:var(--fd);
  font-size:1.3rem;
  font-weight:300;
  letter-spacing:.03em;
}

.ft__cols{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(28px,3vw,56px);
}

.ft__h{
  display:block;
  margin-bottom:1.5rem;
  color:rgba(244,242,236,.5);
  font-family:var(--fd);
  font-size:.66rem;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.24em;
}

.ft__col a{
  display:block;
  margin-bottom:.85rem;
  color:rgba(244,242,236,.82);
  font-family:var(--fd);
  font-size:1.04rem;
  font-weight:300;
  line-height:1.5;
  transition:color .35s var(--e);
}

.ft__col a:hover{color:#fff}

.ft__hours{
  display:block;
  margin-top:1.5rem;
}
.ft__hours-label{
  display:block;
  margin-bottom:.5rem;
  font-family:var(--fd);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:.66rem;
  color:rgba(244,242,236,.5);
}
.ft__hours-row{
  display:block;
  font-family:var(--fd);
  font-weight:300;
  font-size:1.04rem;
  line-height:1.55;
  color:rgba(244,242,236,.82);
}

.ft__meta{
  width:min(100%,var(--max));
  margin:clamp(50px,8vh,86px) auto 0;
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  border-top:1px solid rgba(244,242,236,.14);
  color:rgba(244,242,236,.5);
  font-family:var(--fd);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.16em;
}

.ft__legal a{
  margin-left:1.6rem;
  color:rgba(244,242,236,.5);
  transition:color .35s var(--e);
}

.ft__legal a:first-child{margin-left:0}
.ft__legal a:hover{color:#fff}

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */

.lightbox{
  position:fixed;
  inset:0;
  z-index:300;
  display:none;
  align-items:center;
  justify-content:center;
  padding:5vw;
  background:rgba(10,8,7,.92);
}

.lightbox.is-open{display:flex}

.lightbox img{
  width:auto;
  max-width:92vw;
  max-height:88vh;
  object-fit:contain;
}

.lightbox__close{
  position:absolute;
  top:24px;
  right:28px;
  border:0;
  background:none;
  color:var(--paper);
  font-size:2rem;
  line-height:1;
  cursor:pointer;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media(max-width:900px){
  .nav{display:none}
  .menubtn{display:inline-block}

  .nav.is-open{
    position:absolute;
    top:var(--hh);
    right:0;
    left:0;
    display:flex;
    flex-direction:column;
    gap:0;
    padding:6px var(--x) 22px;
    background:var(--paper);
    border-bottom:1px solid var(--line2);
    box-shadow:0 24px 40px -28px rgba(27,25,22,.4);
  }

  .hd.solid .nav.is-open{background:rgba(244,242,236,.98)}

  .nav.is-open a{
    padding:14px 0;
    border-bottom:1px solid var(--line2);
    color:var(--ink);
    font-size:1rem;
    opacity:1;
  }

  .nav.is-open a:last-child{border-bottom:0}
}

@media(max-width:880px){
  .split{grid-template-columns:1fr;gap:32px}
  .cat-cases__grid,
  .cases-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:860px){
  .ft__cols{grid-template-columns:1fr 1fr;gap:38px 28px}
}

@media(max-width:560px){
  .gallery,
  .cat-cases__grid,
  .cases-grid{grid-template-columns:1fr}
}

@media(max-width:540px){
  .ft__cols{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* --------------------------------------------------------------------------
   Rigtige billeder / WebP-komponenter
   -------------------------------------------------------------------------- */

.media-img{
  position:relative;
  display:block;
  aspect-ratio:var(--ratio,4 / 3);
  overflow:hidden;
  background:var(--pure);
}

.media-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.page-hero__media .media-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  aspect-ratio:auto!important;
  background:transparent;
}

.page-hero__media .media-img img,
.page-hero__media > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.gallery__item .media-img img,
.case-card__media .media-img img{
  transition:transform 1.3s var(--e);
}

.gallery__item:hover .media-img img{transform:scale(1.04)}
.case-card:hover .case-card__media .media-img img{transform:scale(1.05)}
.case-card__link{display:block}

.person .media-img{
  box-shadow:0 24px 70px -44px rgba(27,25,22,.35);
}

.lightbox img{
  cursor:default;
}

@media(max-width:560px){
  .page-hero{min-height:70vh}
}