/* 1) Font */
@font-face {
  font-family: 'StyreneA';
  src: url('assets/fonts/StyreneA-Medium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 2) Variabler */
:root{
  --bg: #f5f5f2;
  --ink: #0a0a0a;
  --muted: #7d7d7d;

  --frame: clamp(10px, 4.2vw, 28px);
  --radius: 18px;
  --maxw: 1300px;
  --font-size: clamp(16px, 1.8vw, 20px);
}

/* 3) Bas */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: 'StyreneA', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--font-size);
  line-height: 1.3;
}
h1,h2,h3,h4,h5,h6{
  margin: 0 0 1.3rem;
  font-size: inherit; font-weight: normal; text-align: center;
}

/* 4) Hero – standard (landscape): overlay */
.hero{
  position: relative;
  min-height: 100vh;                 /* fallback */
  min-height: 100svh;                /* iOS: synlig viewporthöjd */
  padding:
    calc(var(--frame) + env(safe-area-inset-top))
    var(--frame)
    calc(var(--frame) + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

/* Loggan överst och fullbredd (med marginal) */
.brand-logo{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - var(--frame)*2);
  height: auto;
  max-width: var(--maxw);
  pointer-events: none;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.15));
  z-index: 3;
}

/* Bildspelsbox – storlek sätts i JS så den matchar bilden exakt */
.hero-frame{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;            /* syns bara som tunn kant */
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
  z-index: 1;
}

/* Slideshow fyller boxen exakt (mått får den av JS) */
.slideshow{
  position: relative;
  width: 0;   /* sätts i JS */
  height: 0;  /* sätts i JS */
}
.slideshow .slide{
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;  /* ingen beskärning */
  object-position: center;
}
.slideshow .slide.active{ display: block; }

/* 5) Content – MULTI-COLUMN i stället för grid */
.content{
  column-count: 1;            /* mobil/smalt */
  column-gap: 3rem;
  padding: 4rem var(--frame) 6rem;
  max-width: var(--maxw);
  margin: 0 auto;
}

/* varje sektion hålls ihop och bryts inte mitt i */
.section{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 1.3rem;
  display: inline-block; /* gör break-inside robust */
  width: 100%;
}

/* tvingad kolumnbrytning (sätts via JS på “Services”) */
.section.break-after{
  break-after: column;
  -webkit-column-break-after: column;
}

/* Typografi i sektioner */
.section p{
  margin: 0 0 0rem; /* ingen extra bottenmarginal på stycken */
}

/* Listor: ingen bottenmarginal – luft kommer från li */
.section ul,
.section ol{
  margin: .5rem 0 0rem 1.5rem !important;
  padding: 0 !important;
}

/* Luft mellan punkter */
.section li{
  margin-bottom: 1.3rem;
}

/* --- FIX mot “dubbel luft” --- */
/* 1) ta bort luft på sista punkten i listan */
.section li:last-child{
  margin-bottom: 0;
}
/* 2) säkerställ att listan i sig inte lägger till extra luft */
.section ul:last-child,
.section ol:last-child{
  margin-bottom: 0 !important;
}
/* 3) (valfritt men bra) om sektionen slutar med lista, håll standardmellanrum harmoniskt */
.section:has(> :is(ul, ol):last-child){
  margin-bottom: 1.3rem; /* samma som andra sektioner */
}

/* 6) Footer */
.footer{
  color: #000;
  font-size: .9em;
  border-top: 2px solid #000;
  padding-top: 1rem;
  margin-top: 2rem;
  padding-bottom: 1rem;
  text-align: center;
}

/* 7) Desktop: 2 kolumner */
@media (min-width: 900px){
  .content{ column-count: 2; }
}

/* 8) PORTRAIT-läge: två halvor för hero */
@media (orientation: portrait){
  .hero{
    display: grid;
    grid-template-rows: 1fr 1fr;         /* övre 50% / nedre 50% */
    align-items: center;
    justify-items: center;
  }

  .brand-logo{
    position: static;
    transform: none;
    width: calc(100% - var(--frame)*2);
    height: auto;
    max-height: calc(50svh - var(--frame)*2 - env(safe-area-inset-top));
    max-width: var(--maxw);
    align-self: center;
    justify-self: center;
    grid-row: 1 / 2;
  }

  .hero-frame{
    position: static;
    align-self: center;
    justify-self: center;
    grid-row: 2 / 3;
  }

  .slideshow{
    width: auto;
    height: auto;
  }
}