/* ==========================================================================
   Merke — layout
   ========================================================================== */

.mk-shell { overflow-x: clip; }

/* Sidbredd + rännor. Motsvarar referensens .padding-global + .container-large. */
.mk-wrap {
  width: 100%;
  max-width: calc(var(--mk-maxw) + var(--mk-gut) * 2);
  margin-inline: auto;
  padding-inline: var(--mk-gut);
}
.mk-wrap--full { max-width: none; }
.mk-wrap--text { max-width: calc(var(--mk-maxw-text) + var(--mk-gut) * 2); }

.mk-sec { padding-block: var(--mk-sec); position: relative; }
.mk-sec--lg { padding-block: var(--mk-sec-lg); }
.mk-sec--flush-top { padding-top: 0; }

/* Två sektioner i rad staplade sin padding i skarven — 2 × 144px = 288px
   luft mellan avsnitten på desktop. Den övres padding-bottom räcker. */
.mk-sec + .mk-sec { padding-top: 0; }

/* ...men en sektion som ritar en egen överkantslinje måste behålla sin
   padding, annars klistrar linjen mot rubriken. Undantaget märks ut med
   .mk-sec--ruled så regeln gäller varje sektion som får en ram, inte bara
   den som råkade ha en när regeln skrevs. */
.mk-sec + .mk-sec.mk-sec--ruled { padding-top: var(--mk-sec); }
.mk-sec--ruled { border-top: 1px solid var(--mk-line); }

/* Samma sak för en sektion med eget tema: den har egen bakgrund, så utan
   padding-top hamnar innehållet tätt mot färgskarven (case-sidans "Nästa
   projekt" satt nästan i kanten). */
.mk-sec + .mk-sec[data-theme] { padding-top: var(--mk-sec); }

/* En sektion kan bära eget tema — tokens är skrivna som [data-theme], inte
   html[data-theme], just för att detta ska fungera. */
.mk-sec[data-theme] { background: var(--mk-bg); color: var(--mk-fg); }

.mk-grid { display: grid; gap: var(--mk-s-6); }
.mk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .mk-grid--2, .mk-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* Bildbox med fast proportion via padding-top — samma teknik som referensen,
   och den enda som håller CLS på noll utan att kräva width/height-attribut. */
.mk-ratio { position: relative; display: block; overflow: clip; }
.mk-ratio::before { content: ''; display: block; padding-top: var(--r, 62.5%); }
.mk-ratio > img, .mk-ratio > video, .mk-ratio > picture > img, .mk-ratio > canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.mk-ratio--16-9 { --r: 56.25%; }
.mk-ratio--16-10 { --r: 62.5%; }
.mk-ratio--4-3  { --r: 75%; }
.mk-ratio--1-1  { --r: 100%; }
.mk-ratio--3-4  { --r: 133.33%; }

.mk-hr { height: 1px; background: var(--mk-line); border: 0; margin: 0; }