/* ==========================================================================
   Solheim Kitchen — forside.css
   Kun styling til forsiden. Fælles reset, header, footer, knapper og fonte
   ligger i /assets/css/base.css.
   ========================================================================== */

body.page-forside{font-size:1rem}

/* --------------------------------------------------------------------------
   Hero slider
   -------------------------------------------------------------------------- */

.hero{
  position:relative;
  height:100svh;
  min-height:600px;
  overflow:hidden;
  color:#fff;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.28),
    rgba(0,0,0,0) 24%,
    rgba(0,0,0,0) 48%,
    rgba(0,0,0,.34) 78%,
    rgba(0,0,0,.6)
  );
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(135% 100% at 0% 100%,rgba(0,0,0,.5),rgba(0,0,0,0) 54%);
}

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

.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.5s var(--e);
}

.slide.is-active{opacity:1}

.slide__img,
.slide__ph{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.slide__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1);
  transition:transform 6.5s var(--e);
}

.slide.is-active .slide__img img{transform:scale(1.12)}

.slide__ph{
  display:flex;
  align-items:center;
  justify-content:center;
}

.slide__ph::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(130% 130% at 50% 32%,#3a382f,#201f1b);
}

.slide__ph span{
  position:relative;
  z-index:1;
  color:rgba(255,255,255,.55);
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.3em;
}

.hero__wm{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.hero__wm svg{
  width:clamp(70px,8vw,130px);
  height:auto;
  color:#fff;
  opacity:.35;
  mix-blend-mode:normal;
}

.hero__txt{
  position:absolute;
  right:0;
  bottom:clamp(96px,17vh,168px);
  left:0;
  z-index:3;
}

.hero__txt .wrap{
  position:relative;
  min-height:11rem;
}

.htxt{
  position:absolute;
  bottom:0;
  left:0;
  max-width:42ch;
  opacity:0;
  pointer-events:none;
  transform:translateY(16px);
  transition:opacity 1s var(--e),transform 1s var(--e);
}

.htxt.is-active{
  opacity:1;
  pointer-events:auto;
  transform:none;
}

.htxt .kick{
  display:block;
  margin-bottom:1.1rem;
  color:rgba(255,255,255,.92);
  font-family:var(--fd);
  font-size:.78rem;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.26em;
  text-shadow:0 1px 28px rgba(0,0,0,.45);
}

.htxt h1{
  color:#fff;
  font-size:clamp(2.1rem,5vw,4.5rem);
  font-weight:300;
  line-height:1.04;
  letter-spacing:.01em;
  text-shadow:0 2px 50px rgba(0,0,0,.4);
}

.htxt .hlnk{
  display:inline-flex;
  align-items:center;
  margin-top:1.9rem;
  padding:.95em 1.9em;
  border:1px solid rgba(255,255,255,.55);
  color:#fff;
  font-family:var(--fd);
  font-size:.72rem;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.2em;
  transition:background .45s var(--e),color .45s var(--e),border-color .45s var(--e);
}

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

.hero__dots{
  position:absolute;
  right:0;
  bottom:clamp(44px,7.5vh,80px);
  left:0;
  z-index:3;
}

.hero__dots .wrap{
  display:flex;
  align-items:flex-end;
  gap:13px;
}

.hero__dots button{
  position:relative;
  width:46px;
  height:30px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}

.hero__dots button::before{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:2px;
  background:rgba(255,255,255,.32);
  transition:background .5s var(--e);
}

.hero__dots button.is-active::before{background:#fff}

/* --------------------------------------------------------------------------
   Statement / moodboard wrapper
   -------------------------------------------------------------------------- */

.state{
  padding:var(--pad) var(--x);
  text-align:center;
}

.state .kick{
  display:block;
  margin-bottom:1.8rem;
}

.state h2{
  max-width:24ch;
  margin:0 auto;
  font-size:clamp(1.9rem,4.4vw,3.8rem);
  font-weight:300;
  line-height:1.16;
}

/* --------------------------------------------------------------------------
   Moodboard slider
   -------------------------------------------------------------------------- */

.mb{
  max-width:var(--max);
  margin:clamp(46px,7vh,90px) auto 0;
  text-align:left;
}

/* Viewport der klipper det brede spor */
.mb__view{
  position:relative;
  overflow:hidden;
  padding-bottom:4px;
}

.mb__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:clamp(18px,2.5vh,30px);
}

.mb__head .kick{
  display:block;
  margin-bottom:.6rem;
}

.mb__title{
  font-family:var(--fd);
  font-size:clamp(1.3rem,2.4vw,2rem);
  font-weight:300;
}

.mb__title a{
  transition:opacity .35s var(--e);
}

.mb__title a:hover{opacity:.56}

.mb__ct{
  color:rgba(27,25,22,.42);
  font-family:var(--fd);
  font-size:1rem;
  white-space:nowrap;
}

/* Transform-baseret track = flydende drag (ingen native scroll-snap der spænder ben) */
.mb__track{
  display:flex;
  gap:clamp(28px,4vw,64px);
  cursor:grab;
  touch-action:pan-y;
  user-select:none;
  will-change:transform;
  -webkit-user-drag:none;
}

.mb__track::-webkit-scrollbar{display:none}
.mb__track.grab{cursor:grabbing}

.board{
  flex:0 0 100%;
  outline:none;
}

.board__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.btile{
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:3 / 2;
  cursor:pointer;
  -webkit-user-drag:none;
}

.btile img{
  -webkit-user-drag:none;
  user-select:none;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.4s var(--e);
}

@media (hover:hover){
  .btile:hover img{transform:scale(1.05)}
}

/* --------------------------------------------------------------------------
   Kategori-kort
   -------------------------------------------------------------------------- */

.cards{
  --cgap:clamp(40px,5vw,96px);
  --cw:calc((min(100vw - var(--x) * 2,var(--max)) - var(--cgap)) / 2);
  padding:var(--pad) var(--x);
  background:var(--pure);
}

.cards__head{
  width:min(100%,var(--max));
  margin:0 auto clamp(34px,6vh,68px);
  text-align:center;
}

.cards__head .kick{
  display:block;
  margin-bottom:1.2rem;
}

.cards__head h2{
  max-width:20ch;
  margin:0 auto;
  font-size:clamp(1.7rem,3.4vw,2.9rem);
  font-weight:300;
  line-height:1.14;
}

.cards__flow{
  width:min(100%,var(--max));
  margin-inline:auto;
  overflow:hidden;
}

.cards__track{
  display:flex;
  gap:var(--cgap);
  width:max-content;
  animation:cardflow 54s linear infinite;
  will-change:transform;
}

.cards__flow:hover .cards__track{animation-play-state:paused}

@keyframes cardflow{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-4 * (var(--cw) + var(--cgap))))}
}

.card{
  position:relative;
  flex:0 0 var(--cw);
  width:var(--cw);
  aspect-ratio:5 / 4;
  overflow:hidden;
  background:var(--pure);
}

.card__media{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.6s var(--e);
}

.card:hover .card__media img{transform:scale(1.05)}

.card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to top,rgba(20,18,15,.6),rgba(20,18,15,0) 54%);
}

.card__num,
.card__name{
  position:absolute;
  z-index:2;
  color:#fff;
  font-family:var(--fd);
  font-weight:300;
}

.card__num{
  top:24px;
  left:30px;
  color:rgba(255,255,255,.9);
  font-size:clamp(1.7rem,2.6vw,2.8rem);
  letter-spacing:.04em;
}

.card__name{
  bottom:30px;
  left:28px;
  font-size:clamp(2rem,3vw,3.3rem);
  line-height:1;
}

/* --------------------------------------------------------------------------
   Afsluttende CTA
   -------------------------------------------------------------------------- */

.cta{
  padding:var(--pad) var(--x);
  text-align:center;
}

.cta .kick{
  display:block;
  margin-bottom:1.5rem;
}

.cta h2{
  max-width:16ch;
  margin:0 auto 1.4rem;
  font-size:clamp(2rem,5vw,4.4rem);
  font-weight:300;
}

.cta__sub{
  max-width:46ch;
  margin:0 auto 2.6rem;
  color:#55514a;
  font-size:1.04rem;
  line-height:1.7;
}

/* --------------------------------------------------------------------------
   Reveal timing på forsiden
   -------------------------------------------------------------------------- */

body.page-forside [data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity 1.1s var(--e),transform 1.1s var(--e);
}

body.page-forside [data-reveal].vis{
  opacity:1;
  transform:none;
}

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

@media(max-width:860px){
  .board__grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:760px){
  .cards{
    --cgap:24px;
    --cw:calc(100vw - var(--x) * 2 - 56px);
  }

  .card__name{bottom:26px}
}

@media(max-width:700px){
  .hero__dots button{height:40px}
}

@media(max-width:540px){
  .board__grid{grid-template-columns:1fr}
  .board .btile:nth-child(n+4){display:none}
}

@media(prefers-reduced-motion:reduce){
  .slide__img img,
  .btile img,
  .card__media img{
    transition:none!important;
    transform:none!important;
  }

  .cards__track{animation:none}

  body.page-forside [data-reveal]{
    opacity:1;
    transform:none;
  }
}