/* ==========================================================================
   TILT — style.css
   Statisk sajt. Ingen byggprocess. Ladda upp hela mappen via FTP.
   ========================================================================== */

/* --- Typsnitt ------------------------------------------------------------ */
/* Ginger används för rubriker. Ligger i /fonts/.
   woff2 laddas i första hand, woff är fallback för äldre webbläsare. */
@font-face {
  font-family: "Ginger";
  src: url("../fonts/Ginger.woff2") format("woff2"),
       url("../fonts/Ginger.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Variabler ----------------------------------------------------------- */
:root {
  --cream:        #FDF7EE;
  --ink:          #171717;
  --ink-soft:     #27282C;
  --coral:        #FF8E6F;
  --peach:        #FDE1D1;
  --peach-ink:    #673A29;
  --sage:         #C6DBD5;
  --line:         rgba(23, 23, 23, 0.15);

  --display: "Ginger", "Didot", "Bodoni MT", "Playfair Display", Georgia, serif;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1170px;
  --gutter: 32px;
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

/* Text som bara skärmläsare ska höra. */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

/* Etikett över sektioner: VAD VI ERBJUDER / DETTA ÄR TILT */
.eyebrow {
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 2.52px;
  text-transform: uppercase;
}

/* --- Knapp --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  border-radius: 48px;
  background: var(--coral);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  transition: transform .2s ease, filter .2s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.03); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px var(--gutter);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cream) url("../img/hero-bg.jpg") center / cover no-repeat;
}
/* Ljus glöd i mitten så rubriken alltid håller kontrast */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side at 50% 50%, rgba(253,247,238,.55) 0%, rgba(253,247,238,0) 100%);
}
/* Rullande TILT-logotyp mellan bakgrunden och innehållet.
   Brickan (tilt-marquee.svg) upprepas i x; JS flyttar spåret i sidled. */
.hero__marquee {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__marquee-track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 300%;                 /* JS sätter exakt bredd efter brickans storlek */
  background: url("../img/tilt-marquee.svg") repeat-x left center;
  background-size: auto 100%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.hero__marquee::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side at 50% 46%, rgba(253,247,238,.92) 0%, rgba(253,247,238,.55) 55%, rgba(253,247,238,0) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--wrap);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero__logo { width: 85px; height: 32px; margin-bottom: 48px; }
.hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(48px, 7.9vw, 128px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin-bottom: 64px;
}
.hero__body {
  font-size: 20px;
  line-height: 32px;
  margin-bottom: 32px;
  max-width: 46em;
}

/* ==========================================================================
   VAD VI ERBJUDER
   ========================================================================== */
.offer { padding-block: 80px; }
.offer .eyebrow { margin-bottom: 24px; }
.offer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.offer__col {
  border-top: 1px solid var(--line);
  padding: 32px 16px 0;
}
/* Indikator under snurran. Aktivt kort blir ett brett streck med en mörk
   fyrkant i början, övriga är prickar. Syns bara på mobil. */
.offer__dots { display: none; }

.offer__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 48px;
  line-height: 48px;
  margin-bottom: 32px;
}
.offer__text { font-size: 14px; line-height: 24px; }
.offer__text p + p { margin-top: 24px; }

/* ==========================================================================
   DETTA ÄR TILT — kortgrid
   ========================================================================== */
.grid-section { padding-block: 80px; }
.grid-section__head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 24px;
  margin-bottom: 48px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}
.grid__col {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.card { display: block; }
.card__media {
  display: block;
  position: relative;
  height: 320px;
  overflow: hidden;
  background: var(--tint, #F6F3EE);
}
.card__media--320 { height: 320px; }
.card__media--400 { height: 400px; }
.card__media--640 { height: 640px; }
.card__media img,
.card__media .media-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.card:hover .card__media img,
.card:hover .card__media .media-video { transform: scale(1.03); }

/* Färgplatta ovanpå bild eller film. Ligger vilande på alla kort och tänds
   först när --overlay sätts i markupen (Om oss: #FCD39D 50 %). */
.card__media::after,
.lb__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay, transparent);
  pointer-events: none;
}

/* Filmen är dekor — den ska aldrig fånga klick från kortet den ligger i. */
.media-video {
  display: block;
  pointer-events: none;
  background: var(--tint, #F6F3EE);
}

/* Etiketten över och rubriken under, inte på samma rad. */
.card__meta {
  display: block;
  margin-top: 8px;
  color: var(--ink);
}
.card__label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.42px;
  text-transform: uppercase;
}
.card__link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.card__link svg { flex: none; margin-top: 2px; transition: transform .25s ease; }
.card:hover .card__link svg { transform: translateX(4px); }

/* ==========================================================================
   KONTAKT
   ========================================================================== */
.contact__inner {
  border-top: 1px solid var(--line);
  padding-block: 120px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.contact__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 40px;
  line-height: 48px;
  padding-bottom: 32px;
}
.contact__text { font-size: 20px; font-weight: 300; line-height: 32px; }

.contact__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-inline: 24px;
}
.person__photo {
  width: 146px;
  height: 146px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--peach);
}
.person__links { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  border-radius: 48px;
  background: var(--peach);
  color: var(--peach-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  transition: filter .2s ease;
}
.pill:hover { filter: brightness(.97); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  position: relative;
  padding-bottom: 120px;
  isolation: isolate;
  /* Medvetet INGEN overflow här — ordet CREATE ska få spilla ut oklippt.
     Det som hindrar ordet från att förlänga sidan är .footer__wordwrap. */
}
/* Behållare vars enda uppgift är att hindra ordet från att förlänga sidan.
   Den slutar exakt vid sidans underkant och sträcker sig långt uppåt, så
   ordet får spilla fritt över kontaktsektionen men inte en pixel nedanför
   baslinjen. `clip` — inte `hidden` — så den aldrig blir en scrollcontainer.
   Spill uppåt och åt vänster påverkar aldrig scrollytan; det är bara nedåt
   och åt höger som förlänger dokumentet, och just det fångas här.
   Footern själv har kvar overflow: visible. */
.footer__wordwrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: -150vh;
  z-index: -1;
  overflow: clip;
  pointer-events: none;
}

.footer__word {
  /* Baslinjen ska ligga exakt på sidans underkant. Med bottom: 0 hamnar
     radens underkant där — och med rätt radhöjd sammanfaller baslinjen med
     radens underkant:

         radhöjd = ascender - descender      (båda som positiva em-tal)

     Ginger: 0.829 - 0.295 = 0.534. Versalerna är 0.7 em höga och sticker
     alltså upp utanför boxen — det är meningen.
     Byts typsnittet måste talet räknas om med formeln ovan. */
  --word-lh: 0.534;

  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: clamp(200px, 41vw, 668px);
  line-height: var(--word-lh);
  color: var(--sage);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  padding-top: 120px;
}
.footer__col { display: flex; flex-direction: column; gap: 24px; }
.footer__logo { width: 85px; height: 32px; }
.footer__v3 { width: 146px; height: 24px; }
.footer__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  font-size: 18px;
  line-height: 32px;
}
.footer__details p + p { margin-top: 32px; }
.footer__details a:hover { text-decoration: underline; }
.footer__about { font-size: 18px; line-height: 32px; letter-spacing: -0.4px; }
.footer__about a { text-decoration: underline; }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lb-source { display: none; }

/* På desktop scrollar INTE rutan som helhet — bilden ska stå still och bara
   textspalten röra sig. Därför ligger scrollen på .lb__body. På mobil
   återställs det längre ner så att hela rutan scrollar som vanligt. */
.lb-root {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--cream);
  opacity: 0;
  transition: opacity .28s ease;
  overflow: hidden;
  overscroll-behavior: contain;
}
.lb-root[hidden] { display: none; }
.lb-root.is-open { opacity: 1; }

.lb__close {
  position: fixed;
  top: 96px;
  right: 96px;
  z-index: 2;
  width: 32px;
  height: 32px;
  color: var(--ink);
  transition: transform .25s ease;
}
.lb__close:hover { transform: rotate(90deg); }

.lb__stage { height: 100%; }
/* Fokuseras när lightboxen öppnas, så att skärmläsare hamnar rätt.
   Ingen fokusring — det är inget man klickar på. */
.lb__stage:focus, .lb__stage:focus-visible { outline: none; }

.lb {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 815 av 1630 i Figma = exakt hälften */
  height: 100vh;
}
.lb__media { position: relative; overflow: hidden; background: var(--tint, #F6F3EE); }
.lb__media img,
.lb__media .media-video { width: 100%; height: 100%; object-fit: cover; }
.lb__body {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 96px 96px;
}

/* Kickern ligger kvar högst upp och skymmer texten som passerar under.
   Negativa marginaler gör att bakgrunden täcker hela spaltbredden, inte
   bara innehållsytan — annars syns text i kanterna. */
.lb__bar {
  position: sticky;
  top: 0;
  z-index: 1;
  margin-inline: -96px;
  padding: 96px 96px 40px;
  background: var(--cream);
}
/* Mjuk övergång i stället för en hård kant där texten försvinner. */
.lb__bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 40px;
  background: linear-gradient(var(--cream), rgba(253, 247, 238, 0));
  pointer-events: none;
}
.lb__eyebrow {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.lb__content {
  margin-top: 80px;               /* raden är 160 hög → rubriken hamnar på 240, som i Figma */
  display: flex;
  flex-direction: column;
  gap: 32px;
}
/* Spalten är en flexkolumn, så barnen sträcks ut på tvären som standard.
   Rubrik och brödtext ska fylla bredden — knappen ska bara vara så bred
   som sin text. */
.lb__content > .btn { align-self: flex-start; }
.lb__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1.125;             /* 72 på 64 px, som i Figma */
}

/* --- Typografi i artiklarna -------------------------------------------- */
.lb__text { font-size: 16px; line-height: 28px; }
.lb__text > * + * { margin-top: 24px; }

/* Ingress, större än brödtexten. */
.lb__lead { font-size: 24px; line-height: 32px; }

/* Underrubrik på case, mellan rubrik och ingress. */
.lb__deck { font-size: 28px; line-height: 40px; }

/* Avsnittsetikett: UTMANINGEN / SÅ HJÄLPTE VI TILL / RESULTAT. */
.lb__section {
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 2.52px;
  text-transform: uppercase;
  margin-top: 40px;
}
.lb__section + p { margin-top: 8px; }

.lb__list { margin: 0; padding-left: 1.2em; }
.lb__list li + li { margin-top: 4px; }

/* Citat i display-snittet. */
.lb__quote {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.4;
}
.lb__cite { font-size: 16px; line-height: 28px; }
.lb__cite a { text-decoration: underline; }

.lb__pull { margin: 32px 0 0; }
.lb__pull .lb__cite { margin-top: 8px; }

/* Avslutningsruta på case: text till vänster, knapp till höger. */
.lb__callout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
  padding: 24px;
  background: var(--peach);
  font-size: 16px;
  line-height: 28px;
}
.lb__callout p { flex: 1 1 180px; }
.lb__callout .btn { flex: none; }

/* ==========================================================================
   RESPONSIVT
   ========================================================================== */
@media (max-width: 1100px) {
  .lb__body { padding: 0 64px 64px; }
  .lb__bar  { margin-inline: -64px; padding: 64px 64px 32px; }
  .lb__bar::after { height: 32px; }
  .lb__content { margin-top: 48px; }
  .lb__close { top: 48px; right: 48px; }
}

@media (max-width: 900px) {
  .offer__cols { grid-template-columns: 1fr; gap: 40px; }
  .offer__title { font-size: 40px; line-height: 44px; }

  /* Kolumnerna löses upp så alla nio kort flödar i ett tvåspaltigt rutnät. */
  .grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; align-items: start; }
  .grid__col { display: contents; }

  .contact__inner { grid-template-columns: 1fr; gap: 64px; padding-block: 80px; }
  .footer__inner { grid-template-columns: 1fr; gap: 64px; padding-top: 80px; }

  /* Mobil: bilden ligger överst och hela rutan scrollar som en vanlig sida.
     Scrollen flyttas tillbaka från spalten till .lb-root. */
  .lb-root { overflow-y: auto; }
  .lb__stage { height: auto; min-height: 100%; }
  .lb { grid-template-columns: 1fr; height: auto; }
  .lb__media { height: 60vw; max-height: 500px; }
  .lb__body { height: auto; overflow: visible; padding: 0 32px 32px; }
  .lb__bar { margin-inline: -32px; padding: 32px 32px 24px; }
  .lb__bar::after { height: 24px; }
  .lb__content { margin-top: 16px; }
}

@media (max-width: 700px) {
  :root { --gutter: 32px; }

  .hero { min-height: 0; padding-block: 80px; }
  .hero__logo { width: 64px; height: 24px; margin-bottom: 24px; }
  .hero__title { font-size: clamp(42px, 14.4vw, 56px); line-height: 1.14; margin-bottom: 40px; }
  .hero__body { font-size: 20px; }
  .hero__body br { display: none; }

  .offer { padding-block: 40px; }

  /* Snurra: ett kort i taget, snäpper på plats. Ren CSS — scrollen fungerar
     även utan JS, som bara håller indikatorn i synk. */
  .offer__cols {
    display: flex;
    grid-template-columns: none;
    gap: 32px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .offer__cols::-webkit-scrollbar { display: none; }

  .offer__col {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    padding-inline: 0;
  }
  .offer__title { font-size: clamp(34px, 12.8vw, 48px); line-height: 1; }

  .offer__dots {
    /* Tid innan snurran går vidare. Ändra bara här — JS läser inget värde,
       den lyssnar på när fyllnadsanimationen tar slut. */
    --offer-interval: 10s;

    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 24px;
  }
  .offer__dot {
    position: relative;
    flex: 0 0 4px;
    height: 4px;
    padding: 0;
    background: var(--line);
    transition: flex-grow .4s cubic-bezier(.4, 0, .2, 1);
  }
  /* Större träffyta än de 4 px som syns. */
  .offer__dot::after {
    content: "";
    position: absolute;
    inset: -14px -2px;
  }
  .offer__dot.is-active { flex: 1 1 4px; }
  .offer__dot-mark {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 4px;
    background: var(--ink);
    opacity: 0;
    transition: opacity .25s ease;
  }
  .offer__dot.is-active .offer__dot-mark { opacity: 1; }

  /* Fyllnaden räknar ner till nästa kort. Det är animationens slut som
     triggar bytet, så strecket och bytet kan aldrig glida isär. */
  @keyframes offer-fill {
    from { width: 4px; }
    to   { width: 100%; }
  }
  .offer__dots.is-playing .offer__dot.is-active .offer__dot-mark {
    animation: offer-fill var(--offer-interval) linear forwards;
  }
  /* Pausas medan man drar, och när sektionen inte syns. */
  .offer__dots.is-paused .offer__dot.is-active .offer__dot-mark {
    animation-play-state: paused;
  }

  .grid-section { padding-block: 40px; }
  .grid-section__head { margin-bottom: 32px; }

  .grid { grid-template-columns: 1fr; gap: 32px; }
  .card__link { font-size: 20px; line-height: 28px; }
  .card__media, .card__media--320, .card__media--400, .card__media--640 {
    height: auto;
    aspect-ratio: 374 / 400;
  }

  .contact__cards { grid-template-columns: 1fr; gap: 40px; }
  .person { padding-inline: 0; }
  .contact__title { font-size: 40px; }

  .footer { padding-bottom: 80px; }
  .footer__details { grid-template-columns: 1fr; gap: 32px; }

  .lb__close {
    top: 32px;
    right: 24px;
    width: 44px;
    height: 44px;
    padding: 6px;
    border-radius: 50%;
    background: var(--cream);
  }
  .lb__media { height: 70vw; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}