/* ── Base layout ─────────────────────────────────────────────── */

html {
   scroll-behavior: smooth;
   scroll-padding-top: 5rem;
}

body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;

   background-color: var(--bg-raised);
   color: var(--text-primary);
   font-family: var(--ff-body);
   font-size: var(--fs-base);
   line-height: 1.6;
}


/* ── Container ───────────────────────────────────────────────── */

.container {
   width: 100%;
   max-width: var(--container-max);
   margin-inline: auto;
   padding-inline: var(--container-pad);
}

.container--narrow {
   max-width: 760px;
}

.container--wide {
   max-width: 1400px;
}

/* ── Sections ────────────────────────────────────────────────── */

.section {
   padding-block: clamp(var(--sp-16), 10vw, var(--sp-32));
}

.section--sm {
   padding-block: clamp(var(--sp-8), 5vw, var(--sp-16));
}

.section--flush-top {
   padding-top: 0;
}

/* ── Grid ────────────────────────────────────────────────────── */

.grid-2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--sp-8);
}

.grid-3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--sp-6);
}

.grid-4 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: var(--sp-6);
}

.grid-golden {
   display: grid;
   grid-template-columns: 1fr 1.618fr;
   gap: var(--sp-12);
   align-items: start;
}

.grid-golden--reversed {
   grid-template-columns: 1.618fr 1fr;
}

/* ── Grid tight gap variant ──────────────────────────────────── */

.grid-2--tight {
   gap: var(--sp-6);
}

/* ── Positioning strip inner container ───────────────────────── */

.positioning-strip .container {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   gap: var(--sp-8);
   justify-content: center;
}

/* ── Hero ────────────────────────────────────────────────────── */

.hero {
   background-color: var(--bg-raised);
   background-image: url('/assets/img/kwebb-bg_dark.webp');
   background-repeat: no-repeat;
   background-position: top;
   background-size: cover;
   min-height: 100vh;
   padding-top: clamp(8rem, 18vh, 14rem);
   padding-bottom: clamp(10rem, 25vh, 20rem);
}

[data-theme="light"] .hero {
   background-image: url('/assets/img/kwebb-bg_light.webp');
}

:root:not([data-theme]) .hero {
   background-image: url('/assets/img/kwebb-bg_dark.webp');
}

.hero {
   position: relative;
}


.hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse 95% 78% at 50% 38%, rgba(13, 11, 18, 0.62) 0%, transparent 72%);
   pointer-events: none;
   z-index: 1;
}

[data-theme="light"] .hero::before {
   background: radial-gradient(ellipse 80% 65% at 50% 38%, rgba(250, 248, 252, 0.85) 0%, transparent 70%);
}

:root:not([data-theme]) .hero::before {
   background: radial-gradient(ellipse 95% 78% at 50% 38%, rgba(13, 11, 18, 0.62) 0%, transparent 72%);
}

.hero > .container {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   position: relative;
   z-index: 2;
}

.hero .section-label {
   justify-content: center;
}

.hero .lead {
   margin-top: var(--sp-6);
}

.hero-actions {
   display: flex;
   gap: var(--sp-4);
   flex-wrap: wrap;
   margin-top: var(--sp-10);
}

.hero .hero-actions {
   justify-content: center;
}

/* ── Flex helpers ────────────────────────────────────────────── */

.flex {
   display: flex;
}

.flex-col {
   display: flex;
   flex-direction: column;
}

.items-center {
   align-items: center;
}

.justify-between {
   justify-content: space-between;
}

.gap-4 {
   gap: var(--sp-4);
}

.gap-6 {
   gap: var(--sp-6);
}

.gap-8 {
   gap: var(--sp-8);
}

/* ── Divider ─────────────────────────────────────────────────── */

.divider {
   border: none;
   border-top: 1px solid var(--border);
   margin-block: var(--sp-16);
}

/* ── Section number label ────────────────────────────────────── */

.section-label {
   display: flex;
   align-items: center;
   gap: var(--sp-3);
   margin-bottom: var(--sp-4);
}

.section-label__number {
   font-family: var(--ff-heading);
   font-size: var(--fs-sm);
   font-weight: 700;
   color: var(--clr-primary);
   letter-spacing: 0.1em;
   min-width: 2.5ch;
}

.section-label__line {
   width: 32px;
   height: 1px;
   background: var(--text-muted);
   flex-shrink: 0;
}

.section-label__text {
   font-size: var(--fs-xs);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.15em;
   color: var(--text-muted);
}

/* ── Hero huge image (2K / 4K) ───────────────────────────────── */

@media (min-width: 1920px) {
   .hero,
   :root:not([data-theme]) .hero {
      background-image: url('/assets/img/kwebb-bg-huge_dark.webp');
   }

   [data-theme="light"] .hero {
      background-image: url('/assets/img/kwebb-bg-huge_light.webp');
   }
}

/* ── Hero small image (tablet + mobile) ─────────────────────── */

@media (max-width: 1279px) {
   .hero,
   :root:not([data-theme]) .hero {
      background-image: url('/assets/img/kwebb-bg-small_dark.webp');
   }

   [data-theme="light"] .hero {
      background-image: url('/assets/img/kwebb-bg-small_light.webp');
   }
}


/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 900px) {

   .grid-3,
   .grid-4 {
      grid-template-columns: repeat(2, 1fr);
   }

   .grid-golden,
   .grid-golden--reversed {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 600px) {

   .grid-2,
   .grid-3,
   .grid-4 {
      grid-template-columns: 1fr;
   }


}

/* ── Hero blob — mobil ───────────────────────────────────────── */

@media (max-width: 767px) {
   .hero::before,
   :root:not([data-theme]) .hero::before {
      background: radial-gradient(ellipse 160% 95% at 50% 68%, rgba(13, 11, 18, 0.95) 0%, transparent 88%);
   }
}

/* ── Page top padding ────────────────────────────────────────── */

.section--page-top {
   padding-top: 8rem;
}

.hero-section + section,
.hero-section + nav + section {
   border-top: 1px solid var(--border);
}

/* ── Grid golden variants ────────────────────────────────────── */

.grid-golden--mt {
   margin-top: var(--sp-8);
}

.grid-golden--wide {
   gap: 6rem;
}

/* ── Form actions row ────────────────────────────────────────── */

.form-actions {
   display: flex;
   gap: var(--sp-3);
}

/* ── Background utilities ────────────────────────────────────── */

.bg-base    { background-color: var(--bg-base); }
.bg-raised  { background-color: var(--bg-raised); }
.bg-surface { background-color: var(--bg-surface); }


@media (width < 480px) {
   .grid-golden--wide {
      gap: 2rem;
   }
}

/* ── Karusell på mobil: services + blog ──────────────────────── */

@media (max-width: 600px) {

   #services,
   #blog,
   .hero-section {
      overflow-x: clip;
   }

   #services .grid-2,
   .hero-section .grid-2,
   #blog .grid-3 {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x pan-y;
      scrollbar-width: none;
      gap: var(--sp-4);
      margin-inline: calc(var(--container-pad) * -1);
      padding-inline: var(--container-pad);
      scroll-padding-inline: var(--container-pad);
   }

   #services .grid-2::-webkit-scrollbar,
   .hero-section .grid-2::-webkit-scrollbar,
   #blog .grid-3::-webkit-scrollbar {
      display: none;
   }

   #services .grid-2 > *,
   .hero-section .grid-2 > *,
   #blog .grid-3 > * {
      flex: 0 0 80vw;
      scroll-snap-align: center;
   }

   #services .grid-2 .slide-in {
      opacity: 1;
      transform: none;
      transition: none;
   }
}