/* ==========================================================================
   WEBBMAKARN — 05 SECTIONS
   Sektionsspecifik layout. Varje sektion har egen kolumnindelning —
   ingen upprepar den föregående.
   ========================================================================== */

/* -- 01 Hero ------------------------------------------------------------- */
/* Ingen animation, ingen video. Bara skala, luft och en enda accentmarkering. */
.hero { padding-block:calc(var(--r-9) + 20px) var(--r-8); }
@media (max-width:980px) { .hero { padding-block:var(--r-7) var(--r-6); } }

.hero h1 { max-width:16ch; }
.hero h1 .accent { color:var(--accent); }
.hero-under {
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(16px,2.4vw,40px); row-gap:var(--r-4);
  margin-top:var(--r-6); padding-top:var(--r-4);
  border-top:1px solid var(--regel);
}
@media (max-width:980px) { .hero-under { grid-template-columns:1fr; } }
.hero-tagline { grid-column:1 / 7; }
.hero-meta { grid-column:9 / -1; display:grid; gap:var(--r-2); align-content:start; }
@media (max-width:980px) { .hero-tagline,.hero-meta { grid-column:1 / -1; } }
.hero-meta dl { display:grid; gap:.6rem; }
.hero-meta div { display:flex; justify-content:space-between; gap:var(--r-2);
                 border-bottom:1px solid var(--regel); padding-bottom:.6rem; }
.hero-meta dt { font-size:var(--t-liten); color:var(--text-4); }
.hero-meta dd { margin:0; font-size:var(--t-liten); color:var(--text); font-weight:600; text-align:right; }

/* -- 02 Tjänster --------------------------------------------------------- */
/* Fyra block, men förskjutna i höjd så det inte blir en 2×2-mall. */
.tjanster { display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
            column-gap:clamp(16px,2.4vw,40px); row-gap:var(--r-6); }
.tjanster > *:nth-child(2) { margin-top:var(--r-5); }
.tjanster > *:nth-child(4) { margin-top:var(--r-5); }
@media (max-width:1100px) {
  .tjanster { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tjanster > *:nth-child(2) { margin-top:var(--r-6); }
  .tjanster > *:nth-child(3) { margin-top:0; }
  .tjanster > *:nth-child(4) { margin-top:var(--r-6); }
}
@media (max-width:620px) {
  .tjanster { grid-template-columns:1fr; row-gap:var(--r-5); }
  .tjanster > * { margin-top:0 !important; }
}

/* -- 03 Projekt ---------------------------------------------------------- */
/* Två spalter i olika bredd, andra spalten nedsänkt. */
.projekt-rutnat { display:grid; grid-template-columns:1.15fr 1fr;
                  column-gap:clamp(24px,4vw,80px); row-gap:var(--r-8); }
.projekt-rutnat > *:nth-child(even) { margin-top:var(--r-8); }
@media (max-width:900px) {
  .projekt-rutnat { grid-template-columns:1fr; row-gap:var(--r-6); }
  .projekt-rutnat > *:nth-child(even) { margin-top:0; }
}
.projekt-alla { display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
                column-gap:clamp(24px,4vw,64px); row-gap:var(--r-7); }
@media (max-width:820px) { .projekt-alla { grid-template-columns:1fr; row-gap:var(--r-5); } }

/* -- 04 Arkitektur — mörk sektion ---------------------------------------- */
.arkitektur-rutnat { display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
                     gap:var(--r-2); }
@media (max-width:760px) { .arkitektur-rutnat { grid-template-columns:1fr; } }

/* Systemdiagram — ritat i CSS, ingen bild att ladda */
.diagram { display:grid; gap:var(--r-1); }
.diagram-rad { display:grid; gap:var(--r-1); }
.diagram-rad.tre { grid-template-columns:repeat(3,1fr); }
.diagram-rad.tva { grid-template-columns:repeat(2,1fr); }
.diagram-ruta {
  border:1px solid var(--mork-linje-stark); padding:var(--r-2) var(--r-2);
  font-family:var(--f-mono); font-size:var(--t-mikro); letter-spacing:.06em;
  text-transform:uppercase; color:var(--mork-gra); text-align:center;
}
.diagram-ruta.kärna { border-color:var(--mork-accent); color:var(--mork-text); }
.diagram-pil { text-align:center; color:var(--mork-linje-stark); font-size:.9rem; line-height:1; }

/* -- 05 Apputveckling ---------------------------------------------------- */
.app-lager { display:grid; }
.app-lager > li {
  display:grid; grid-template-columns:170px minmax(0,1fr) auto;
  gap:var(--r-3); align-items:baseline;
  padding-block:var(--r-4); border-top:1px solid var(--regel);
}
.app-lager > li:last-child { border-bottom:1px solid var(--regel); }
.app-lager h3 { font-size:1.3rem; }
.app-lager p { font-size:var(--t-liten); max-width:38ch; }
.app-lager .lagernr { font-family:var(--f-mono); font-size:var(--t-mikro);
                      color:var(--text-4); letter-spacing:.1em; }
@media (max-width:820px) {
  .app-lager > li { grid-template-columns:1fr; gap:var(--r-1); }
}

/* -- 06 Tech-stack ------------------------------------------------------- */
.stack { display:grid; }

/* -- 07 Om mig ----------------------------------------------------------- */
.om-rutnat { display:grid; grid-template-columns:5fr 7fr;
             column-gap:clamp(32px,5vw,96px); row-gap:var(--r-5); align-items:start; }
@media (max-width:900px) { .om-rutnat { grid-template-columns:1fr; } }
.portratt { display:grid; gap:var(--r-2); }
.portratt-ruta {
  aspect-ratio:4/5; border:1px solid var(--regel); background:var(--yta);
  display:grid; place-items:center; overflow:hidden;
}
.portratt-ruta img { width:100%; height:100%; object-fit:cover; }
.portratt figcaption { font-size:var(--t-liten); color:var(--text-4); }
.platshall { display:grid; gap:.7rem; place-items:center; text-align:center; padding:var(--r-3); }
.platshall span { font-family:var(--f-mono); font-size:var(--t-mikro);
                  letter-spacing:.12em; text-transform:uppercase; color:var(--text-4); }

/* -- 08 Kontakt ---------------------------------------------------------- */
.kontakt-rutnat { display:grid; grid-template-columns:1.2fr 1fr;
                  column-gap:clamp(32px,6vw,120px); row-gap:var(--r-5); align-items:start; }
@media (max-width:900px) { .kontakt-rutnat { grid-template-columns:1fr; } }
.kontakt-stor {
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.6rem,1.2rem + 2vw,2.6rem); line-height:1.1;
  letter-spacing:-.028em; color:var(--text);
}
.kontakt-stor a { color:inherit; text-decoration:none; border-bottom:2px solid var(--accent);
                  transition:color var(--snabb) var(--kurva); }
.kontakt-stor a:hover { color:var(--accent); }
.sektion-mork .kontakt-stor,.sektion-mork .kontakt-stor a { color:var(--mork-text); }
.sektion-mork .kontakt-stor a { border-bottom-color:var(--mork-accent); }
.sektion-mork .kontakt-stor a:hover { color:var(--mork-accent); }

/* -- Projektsida --------------------------------------------------------- */
.projekt-hero { padding-block:calc(var(--r-8) + 10px) var(--r-6); }
.projekt-fakta { display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
                 gap:var(--r-3); border-block:1px solid var(--regel);
                 padding-block:var(--r-3); }
@media (max-width:760px) { .projekt-fakta { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.projekt-fakta div { display:grid; gap:.3rem; }
.projekt-fakta dt { font-size:var(--t-mikro); letter-spacing:.12em;
                    text-transform:uppercase; color:var(--text-4); font-weight:600; }
.projekt-fakta dd { margin:0; font-size:var(--t-liten); color:var(--text); }
.projekt-figur { display:grid; gap:var(--r-2); }
.projekt-figur figcaption { font-size:var(--t-liten); color:var(--text-4); }
.projekt-figur .ruta { border:1px solid var(--regel); background:var(--yta); overflow:hidden; }

/* Skiss-SVG:er som platshållare tills riktiga skärmbilder finns */
.skiss { stroke:var(--text-4); stroke-width:1; fill:none; opacity:.45; }
.sektion-mork .skiss { stroke:var(--mork-gra); }

/* -- Nästa projekt ------------------------------------------------------- */
.nasta { display:flex; justify-content:space-between; align-items:baseline;
         gap:var(--r-3); flex-wrap:wrap; padding-block:var(--r-5);
         border-top:1px solid var(--text); }
.nasta a { font-family:var(--f-display); font-weight:600;
           font-size:clamp(1.5rem,1.2rem + 1.4vw,2.4rem); letter-spacing:-.028em;
           transition:color var(--snabb) var(--kurva); }
.nasta a:hover { color:var(--accent); }