/* Isaks bygg - layout foer den valda formen, Bokuppslag.
   Layoutskelettet aer detsamma som i foerslag A: en centrerad spalt, stor
   rubrik, avdelare mellan avsnitten. Faerg och typsnitt kommer fraan
   loggan i staellet foer fraan den gamla guldpaletten. */

.sida{max-width:1180px;margin:0 auto}

/* ---------- Sidhuvud och sidfot: svart, som loggans egen platta ---------- */

.sidhuvud{
  background:var(--color-motsats);
  color:var(--color-motsats-text);
  display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;
  padding:var(--space-4) var(--sidmarginal);
}
.sidhuvud .logotyp{margin-right:auto;display:block}
/* Loggan sitter i sina egna faerger. Ingen omfaergning behoevs paa svart. */
.logotyp img{width:clamp(160px,26vw,230px)}
.sidhuvud nav{display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap}
.sidhuvud nav a{
  color:var(--color-motsats-text);text-decoration:none;
  font-weight:600;font-size:16px;
}
.sidhuvud nav a:hover{color:var(--color-accent)}

.sidfot{
  background:var(--color-motsats);color:var(--color-neutral-400);
  padding:var(--space-8) var(--sidmarginal);
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--space-4);flex-wrap:wrap;font-size:14px;line-height:1.6;
}
.sidfot .logotyp img{width:150px;margin-bottom:var(--space-3)}
.sidfot a{color:var(--color-neutral-400)}

/* ---------- Avsnitt ---------- */

.avsnitt{padding:var(--space-8) var(--sidmarginal)}
.rutnat-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px)}
.arbeten{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--space-8) var(--space-6);
  /* Fotona har olika hoejd, tvaa staaende och tvaa liggande. De faar
     behaalla sina proportioner i staellet foer att beskaeras lika. */
  align-items:start;
}
.arbeten .plate img{width:100%;height:auto}

.bildyta{aspect-ratio:4/3;overflow:hidden}
.bildyta img{width:100%;height:100%;object-fit:cover}
.bildyta.staaende{aspect-ratio:3/4}
.hero-bild{margin-inline:auto}

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

.hero{
  padding:clamp(44px,8vw,84px) var(--sidmarginal) var(--space-8);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-4);
  text-align:center;
}
.hero h1{max-width:20ch;margin:0}
.hero p{max-width:58ch;font-size:clamp(17px,1.8vw,19px);line-height:1.65;margin:0}
.hero .knapprad{margin-top:var(--space-3)}

.knapprad{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center}

/* Avdelare: loggans foenster mellan tvaa roeda hAarstreck. */
.avdelare{
  display:flex;align-items:center;gap:var(--space-4);
  padding:var(--space-8) var(--sidmarginal);
}
.avdelare i{flex:1;height:2px;background:var(--color-accent);display:block}

/* ---------- Tjaenster ---------- */

.tjanst h2{margin:0 0 var(--space-3)}
.tjanst ul{margin:0 0 var(--space-3);padding-left:1.1em;line-height:1.9}
.tjanst .fakta{
  border-top:1px solid var(--color-divider);
  padding-top:var(--space-3);margin-top:var(--space-4);
  font-size:15px;color:var(--color-neutral-700);
}
.tjanst .fakta b{color:var(--color-text)}

/* ---------- Kontakt ---------- */

.kontakt{background:var(--color-surface)}
.kontakt-rader{
  display:grid;grid-template-columns:auto 1fr;
  gap:var(--space-2) var(--space-4);font-size:17px;
}
.kontakt-rader a{color:var(--color-text);text-decoration:none;font-weight:600}
.kontakt-rader a:hover{color:var(--color-accent)}

/* ---------- Notisremsa under arbetet ---------- */

.forslagsnotis{
  background:#ffe9a8;color:#5a4200;
  padding:var(--space-3) var(--sidmarginal);
  font-size:14px;line-height:1.5;font-weight:600;
}

/* ---------- Brytpunkter ---------- */

@media (max-width:760px){
  .rutnat-2{grid-template-columns:1fr}
  .sidhuvud{gap:var(--space-3)}
  .sidhuvud nav{width:100%;gap:var(--space-4)}
  .justerad{text-align:left;hyphens:none}
}

@media (max-width:600px){
  .arbeten{grid-template-columns:1fr}
  .knapprad .btn{width:100%}
  .sidfot{flex-direction:column;align-items:flex-start}
}

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