/* ============================================================================
   The standalone pages, the request form, and the shared prose styling.
   ========================================================================== */

/* ── Page heads ──────────────────────────────────────────────────
   The base .page-head / .page-lead / .page-actions rules live in layout.css,
   not here: the Kunskap templates use the same markup and load blog.css
   instead of this sheet, so keeping them here shipped every article and
   archive page with an unstyled header. Only the campaign variant, which is
   unique to this sheet's pages, stays. */

.page-head--campaign {
  background: var(--navy-900);
  color: #C9D7E4;
  border-bottom: 0;
  padding: var(--sp-9) 0;
}
.page-head--campaign h1 { color: #fff; }
.page-head--campaign .page-lead { color: #C9D7E4; }
.campaign-bullets { margin-top: var(--sp-6); max-width: 60ch; }

/* ── Body + aside ──────────────────────────────────────────────── */

.page-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: var(--sp-8);
  align-items: start;
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-8);
}
.page-main { min-width: 0; }
.page-aside {
  position: sticky;
  top: 92px;
  display: grid;
  gap: var(--sp-4);
}
.aside-card {
  padding: var(--sp-5);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}
.aside-card h2 { font: var(--display-sm); margin-bottom: var(--sp-4); }
.aside-card--cta { background: var(--navy-100); border-color: var(--navy-200); }
.aside-card--cta p { font: var(--body-sm); color: var(--ink-700); margin-bottom: var(--sp-4); }
.aside-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font: var(--label);
  color: var(--navy-700);
  text-decoration: none;
}
.aside-dl { display: grid; gap: var(--sp-3); }
.aside-dl dt { font: var(--kicker); letter-spacing: var(--kicker-tracking); text-transform: uppercase; color: var(--ink-500); }
.aside-dl dd { font: var(--body-sm); color: var(--text-body); }

/* ── Service / audience grids ──────────────────────────────────── */

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--sp-4);
}
.svc-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.svc-card:hover { border-color: var(--navy-400); box-shadow: var(--shadow-card); }
.svc-card h3 { font: var(--display-sm); }
.svc-card p { font: var(--body-sm); color: var(--text-muted); flex: 1; }
/* An arrow, right-aligned, that moves on hover — the same affordance the
   specialist cards use. The "Läs mer" caption it replaces printed one phrase
   eight times per grid to say what the card being a link already said. */
.svc-card-more {
  display: flex;
  justify-content: flex-end;
  color: var(--navy-600);
  margin-top: var(--sp-3);
  transition: transform var(--speed) var(--ease);
}
.svc-card:hover .svc-card-more { transform: translateX(4px); }

/* ── FAQ ───────────────────────────────────────────────────────────
   <details>, which opens with no JavaScript and is announced correctly by a
   screen reader without a single aria attribute. */

.faq-list { display: grid; gap: var(--sp-2); max-width: 800px; }
.faq-item {
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  font: var(--label);
  color: var(--text-heading);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary iconify-icon { color: var(--ink-500); transition: transform var(--speed) var(--ease); }
.faq-item[open] summary iconify-icon { transform: rotate(180deg); }
.faq-item .prose-body { padding: 0 var(--sp-5) var(--sp-5); }
.page-faq { margin-top: var(--sp-8); }
.page-faq h2 { font: var(--display-md); margin-bottom: var(--sp-5); }

/* ── Om oss ────────────────────────────────────────────────────── */

/* Narrowed and still on the page's own left rail. Capping a .container's width
   centres it, because .container carries margin-inline: auto — the same trap
   .section--narrow fell into, one section further down the same page. */
.position-block {
  max-width: calc(760px + var(--sp-5) * 2);
  margin-inline: max(0px, (100% - var(--container)) / 2) auto;
}
.position-block p { font: var(--body-lg); color: #C9D7E4; margin-top: var(--sp-4); }
/* A numbered sequence, not five bordered boxes. Boxed labels at button size
   with a button's radius on a dark band read as five disabled buttons, and a
   visitor who tries to click one learns the page is lying about what is
   interactive. The numerals borrow the landing page's timeline vocabulary, and
   they are the only amber here — a counter is exactly the size of surface the
   accent is for. */
.position-steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-6);
  counter-reset: pos;
}
.position-steps li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font: var(--label);
  color: #fff;
  counter-increment: pos;
}
.position-steps li::before {
  content: counter(pos, decimal-leading-zero);
  font: var(--kicker);
  letter-spacing: var(--kicker-tracking);
  color: var(--signal-300);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-5);
}
.team-card {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
}
.team-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-4);
}
.team-card h3 { font: var(--display-sm); }
.team-role { font: var(--body-sm); color: var(--signal-500); font-weight: 600; margin-top: 2px; }
.team-bio { font: var(--body-sm); color: var(--text-muted); margin-top: var(--sp-3); }
.team-creds, .team-contact { list-style: none; margin-top: var(--sp-3); display: grid; gap: 4px; }
.team-creds li { font: var(--body-sm); color: var(--text-body); padding-left: var(--sp-4); position: relative; }
.team-creds li::before { content: "·"; position: absolute; left: var(--sp-2); color: var(--signal-500); }
.team-contact a { font: var(--body-sm); color: var(--link); }

/* ── Meriter ───────────────────────────────────────────────────── */

.cert-group { margin-bottom: var(--sp-7); }
.cert-group-heading {
  font: var(--kicker);
  letter-spacing: var(--kicker-tracking);
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: var(--sp-4);
}
.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}
.cert-card {
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  padding: var(--sp-5);
}
/* A credential with no logo renders NO frame. An empty box is scaffolding, and
   filling it with the name prints the name twice. */
.cert-logo { height: 40px; width: auto; margin-bottom: var(--sp-4); }
.cert-card h4 { font: var(--display-sm); }
.cert-holder { font: var(--body-sm); color: var(--signal-500); font-weight: 600; margin-top: 2px; }
.cert-body { font: var(--body-sm); color: var(--text-muted); margin-top: var(--sp-3); }
.cert-valid { font: var(--body-sm); color: var(--ink-500); margin-top: var(--sp-2); }

/* ── Referensprojekt ───────────────────────────────────────────── */

.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
}
.proj-card {
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-card);
  text-decoration: none;
  display: block;
  transition: box-shadow var(--speed) var(--ease);
}
.proj-card:hover { box-shadow: var(--shadow-card); }
/* A class, not `.proj-card img`: the empty state is a <div> in the same frame,
   and an element selector cannot describe both. */
.proj-card-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.proj-card-body { display: block; padding: var(--sp-5); }
.proj-card-title { display: block; font: var(--display-sm); color: var(--text-heading); }
.proj-card-facts { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); }
.proj-card-facts span { font: var(--body-sm); color: var(--text-muted); }
.proj-facts { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-5); }
.proj-facts dt { font: var(--kicker); letter-spacing: var(--kicker-tracking); text-transform: uppercase; color: var(--ink-500); }
.proj-facts dd { font: var(--label); color: var(--text-heading); margin-top: 2px; }
/* .proj-shot is gone: the project gallery renders through the shared
   .photo-strip in layout.css, which every page group loads. */
.proj-hero {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-6);
}

/* ── Kontakt + formuläret ──────────────────────────────────────────
   Not here. The contact section and the request form live in form.css, which
   leadFormHead loads — so the stylesheet arrives on every page that renders
   the form, including the landing page, which does not load this sheet. */

/* ── Responsive ────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .page-body { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .page-aside { position: static; }
}

@media (max-width: 640px) {
  .page-head { padding: var(--sp-7) 0; }
}