/* ===== SNÄLL ARKITEKTER — stylesheet ===== */
/* Mobile-first. Base rules target phones; min-width queries build up to desktop. */
/* Inter (400/500/600) is loaded with <link> + preconnect in each page's <head>:
   an @import here made the browser wait for this file before it even
   discovered the font. */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --black: #111;
  --white: #fff;
  --gray: #767676; /* 4.54:1 on white — WCAG AA for small text (#888 was 3.54:1) */
  --accent: #c43d5e;   /* 5.0:1 on white (the earlier #e05c7a was 3.5:1) */
  --font: 'Inter', sans-serif;

  /* Type scale */
  --fs-micro: 0.6875rem;  /* 11px    credits, keywords, small labels */
  --fs-ui:    0.75rem;    /* 12px    meta values, section labels */
  --fs-body:  0.9rem;     /* 14.4px  all running text */

  /* Fluid type — each upper bound is the original desktop value,
     so nothing changes on large screens. */
  --nav-size:   clamp(0.6875rem, 0.62rem + 0.25vw, 0.75rem);
  --body-size:  clamp(0.6875rem, 0.65rem + 0.18vw, 0.75rem);
  --label-size: clamp(0.625rem,  0.58rem + 0.20vw, 0.6875rem);

  /* Fluid spacing — one page gutter shared by header, main and footer,
     replacing the old fixed margin-left:6rem / margin-right:4rem. */
  --page-pad: clamp(1.25rem, 5vw, 6rem);
  --grid-gap: clamp(1.5rem, 4vw, 5rem);

  /* Bulletin-board controls */
  --grid-cols: 1;   /* stepped up at each breakpoint */
  --pin-step: 0rem; /* vertical stagger; flat on phones, enabled from 600px */
}

html {
  font-family: var(--font);
  font-size: 16px;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-y: scroll;
}

html, body {
  overflow-x: clip; /* safety net: nothing may push the page sideways */
  /* Paint white explicitly rather than leaving body transparent. A
     transparent body shows whatever sits behind the document — an embedding
     page, a host default, a reader mode — which is where the #faf9f5 cream
     came from. The site is white, so say so. */
  background: var(--white);
}

a {
  color: inherit;
  text-decoration: none;
}

img, video, svg {
  max-width: 100%;
}

/* Every <img> carries width/height attributes so the browser can reserve the
   right space and avoid layout shift. Those attributes also set a used height,
   so any rule that sets only a CSS width would leave the attribute's pixel
   height in force and squash the picture. This keeps the aspect ratio.
   More specific rules (.project-media > img) still win. */
img {
  height: auto;
}

/* ===== HEADER / NAV ===== */

/* Sticky rather than fixed: the header occupies flow, so <main> needs no
   hardcoded padding-top to compensate for its height at every breakpoint. */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
}

header .container {
  display: flex;
  flex-wrap: wrap;            /* phones: nav drops to its own row */
  align-items: flex-start;
  justify-content: space-between;
  row-gap: 0.85rem;
  max-width: none;
  margin: 0;
  padding: clamp(1rem, 2.5vw, 27px) var(--page-pad);
}

.logo {
  line-height: 1;
}

.logo-img {
  height: clamp(30px, 5vw, 50px);
  width: auto;
  display: block;
  max-width: 400px;
}

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(0.9rem, 2vw, 24px);
  flex-basis: 100%;           /* own row on phones */
}

nav a {
  font-size: var(--nav-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
  transition: color 0.15s;
}

nav a:hover {
  color: var(--accent);
}

/* The page you're on: a hairline under its menu item. */
nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4em;
}

/* Touch targets: the links stay visually where they are, but the tappable
   area grows to ~44px tall (invisible padding cancelled by a negative
   margin), comfortably over the 24px WCAG 2.2 minimum. */
nav a,
footer a {
  display: inline-block;
  padding-block: 0.8rem;
  margin-block: -0.8rem;
}

/* Language switch — the current language is black, the other one grey */
.lang-switch {
  font-size: var(--nav-size);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.lang-switch a,
.lang-switch .sep {
  color: var(--gray);
}

.lang-switch .sep {
  margin: 0 1px;
}

.lang-switch .is-active {
  color: var(--black);
}

/* ===== PAGE WRAPPER ===== */

main {
  min-height: 60vh;
}

/* Content container — centred, with the shared fluid gutter */
.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

/* Full-bleed variant used by the landing-page grid */
.container--wide {
  max-width: none;
  margin: 0;
}

/* ===== PROJECT GRID — the bulletin board (index) ===== */

.project-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  grid-auto-flow: dense;  /* backfills the gap a span2 card leaves at any column count */
  gap: var(--grid-gap);
  align-items: start;
  padding: clamp(2rem, 6vw, 3rem) 0 clamp(4rem, 10vw, 8rem);
}

.project-item {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1), opacity 0.2s ease;
}

/* --- Card modifiers -------------------------------------------------- */

/* Width: a double-width anchor card. Disabled at one column. */
@media (min-width: 600px) {
  .project-item.pi--span2 { grid-column: span 2; }
}

/* Pin: the vertical stagger that breaks the row rhythm.
   --pin-step is 0 on phones, so cards align flush there. */
.project-item.pi--drop1 { margin-top: var(--pin-step); }

/* --- Media frame ----------------------------------------------------- */

.project-media {
  width: 100%;
  overflow: hidden;
  aspect-ratio: var(--ar, auto);
}

.project-media > img,
.project-media > video {
  display: block;
  width: 100%;
  height: var(--media-h, auto);
  object-fit: var(--media-fit, cover);
  transition: transform 0.45s cubic-bezier(.22,.61,.36,1), filter 0.45s ease;
}

/* These videos are autoplaying, muted, looping background loops with no
   controls attribute — there is nothing for a user to invoke, so Safari's
   native poster/play-button affordance should never surface. */
.project-media > video,
.slide-content video {
  pointer-events: none;
}
.project-media > video::-webkit-media-controls,
.slide-content video::-webkit-media-controls,
.project-media > video::-webkit-media-controls-start-playback-button,
.slide-content video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

/* Shape: a fixed ratio for the frame, media cropped to fill it.
   No ar-* class means the image keeps its natural proportions — the
   differing intrinsic heights are part of the pinned-up look. */
.project-media.ar-tall      { --ar: 2 / 3;  --media-h: 100%; }
.project-media.ar-portrait  { --ar: 3 / 4;  --media-h: 100%; }
.project-media.ar-square    { --ar: 1 / 1;  --media-h: 100%; }
.project-media.ar-landscape { --ar: 3 / 2;  --media-h: 100%; }
.project-media.ar-wide      { --ar: 16 / 9; --media-h: 100%; }
.project-media.ar-panorama  { --ar: 15 / 7; --media-h: 100%; }

/* Line drawings and SVG plans: letterbox, never crop through the linework. */
.project-media.is-contain {
  --media-fit: contain;
  background: var(--white);
}

/* Focal point overrides for individual crops */
.project-media.pos-top    > img { object-position: center top; }
.project-media.pos-right  > img { object-position: right center; }

/* --- Label ------------------------------------------------------------ */

.project-label {
  margin-top: 0.65rem;
  font-size: var(--label-size);
  letter-spacing: 0.03em;
  color: var(--black);
  line-height: 1.4;
  text-align: left;   /* aligns with the image's left edge */
}

.project-label .name {
  font-weight: 400;
}

/* --- Interaction ------------------------------------------------------ */

/* Hover is gated on a real pointer, so touch devices never latch a
   sticky hover state after a tap. */
@media (hover: hover) and (pointer: fine) {
  .project-item:hover .project-label .name::after {
    opacity: 1;
    transform: none;
  }
  .project-item:hover .project-media > img,
  .project-item:hover .project-media > video {
    will-change: transform;
    transform: scale(1.04);
    filter: brightness(1.04);
  }
}

/* A small arrow slides in after the project name on hover. */
.project-label .name::after {
  content: "\00a0\2192";
  display: inline-block;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(.22,.61,.36,1);
}

/* Touch: a brief, unambiguous tap state instead */
.project-item:active {
  opacity: 0.72;
}

.project-item:focus-visible {
  outline: 1px solid var(--black);
  outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .project-item:hover .project-media > img,
  .project-item:hover .project-media > video {
    transform: none !important;
  }
}

/* ===== PROJECT DETAIL PAGE ===== */

.project-detail {
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 2.5rem 8rem;
}

.project-detail .project-title {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

.project-detail .project-type {
  font-size: var(--body-size);
  font-weight: 400;
  margin-bottom: 3rem;
}

.project-detail .project-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0 3rem;
  align-items: start;
}

.project-detail .meta {
  font-size: var(--body-size);
  line-height: 1.8;
}

.project-detail .meta-row {
  margin-bottom: 0.6rem;
}

.project-detail .meta-label {
  font-weight: 400;
  color: var(--black);
  font-size: var(--label-size);
}

.project-detail .meta-value {
  font-weight: 400;
  font-size: 0.75rem;
}

.project-detail .description {
  font-size: var(--body-size);
  line-height: 1.75;
  font-weight: 400;
}

/* ===== OM SNÄLL PAGE ===== */

.about-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 2.5rem 8rem;
}

.about-page h2 {
  font-size: var(--body-size);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.about-page p {
  font-size: var(--body-size);
  line-height: 1.85;
  max-width: 640px;
  margin-bottom: 1.5rem;
}

/* ===== TJÄNSTER PAGE ===== */

.services-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 2.5rem 8rem;
}

.services-page h2 {
  font-size: var(--body-size);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.services-page p {
  font-size: var(--body-size);
  line-height: 1.85;
  max-width: 640px;
  margin-bottom: 2.5rem;
}

/* ===== FOOTER ===== */

/* Phones: sits at the end of the document, stacked. It only becomes a
   fixed three-column bar once there is room for one (see 900px below). */
footer {
  padding: 0;
  font-size: var(--label-size);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1.6;
  background: var(--white);
}

footer .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  max-width: none;
  margin: 0;
  padding: 1.5rem var(--page-pad);
}

.footer-left {
  display: flex;
  flex-direction: column;
}

.footer-name {
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.footer-contact {
  font-weight: 400;
}

.footer-center,
.footer-right {
  text-align: left;
}

footer address {
  font-style: normal;
}

footer a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s;
}

footer a:hover {
  color: var(--accent);
}

/* ===== BREAKPOINTS ===== */

/* 600px — two columns, header back on one line, stagger switches on */
@media (min-width: 600px) {
  :root {
    --grid-cols: 2;
    --pin-step: clamp(1rem, 3vw, 3.5rem);
  }
  header .container {
    flex-wrap: nowrap;
    align-items: flex-end;
  }
  nav {
    flex-basis: auto;
    flex-wrap: nowrap;
  }
}

/* 900px — three columns; the footer becomes the fixed desktop bar */
@media (min-width: 900px) {
  :root {
    --grid-cols: 3;
  }
  main {
    min-height: 100vh;
    padding-bottom: 80px; /* clear the fixed footer */
  }
  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
  }
  footer .container {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: end;
    gap: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .footer-center { text-align: center; }
  .footer-right  { text-align: right; }
}

/* 1200px — the full four-column board */
@media (min-width: 1200px) {
  :root {
    --grid-cols: 4;
  }
}

/* Beyond 1200px the container is full-bleed (.container--wide has no
   max-width), so columns would otherwise keep widening with the viewport.
   A "wide" (span2) card's source photos top out around 1800px, so past a
   point the browser has to upscale them to fill the box — visible as blur
   on large/ultra-wide monitors. Stepping up the column count keeps each
   column's width (and so each image's rendered size) roughly stable instead
   of growing unbounded, without capping the full-bleed layout itself. */
@media (min-width: 2000px) {
  :root {
    --grid-cols: 5;
  }
}

@media (min-width: 2700px) {
  :root {
    --grid-cols: 6;
  }
}

@media (min-width: 3400px) {
  :root {
    --grid-cols: 7;
  }
}

/* Inner-page stacking (unchanged behaviour, kept for the other pages) */
@media (max-width: 600px) {
  .project-detail,
  .about-page,
  .services-page {
    padding: 1rem 1.2rem 4rem;
  }
  .project-detail .project-body {
    grid-template-columns: 1fr;
    gap: 1.5rem 0;
  }
}

/* ===== FOCUS, SKIP LINK, MICRO-INTERACTIONS ===== */

/* Keyboard focus: one consistent hairline ring. */
a:focus-visible,
button:focus-visible {
  outline: 1px solid var(--black);
  outline-offset: 4px;
}

/* First Tab stop on every page: jump past the menu. */
.skip-link {
  position: absolute;
  left: var(--page-pad);
  top: -100px;
  z-index: 200;
  padding: 0.75rem 1rem;
  background: var(--black);
  color: var(--white);
  font-size: var(--nav-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.skip-link:focus { top: 0.75rem; }

/* Menu and footer links: a 1px line draws in from the left on hover. It sits
   at the bottom of the text box, above the invisible touch padding. */
@media (hover: hover) and (pointer: fine) {
  nav a:not([aria-current]),
  footer a {
    background: linear-gradient(currentColor, currentColor) no-repeat;
    background-position: 0 calc(100% - 0.8rem + 1px);
    background-size: 0 1px;
    transition: color 0.15s, background-size 0.3s cubic-bezier(.22,.61,.36,1);
  }
  nav a:not([aria-current]):hover,
  footer a:hover {
    background-size: 100% 1px;
  }
}

/* Archive cards ease up into place as they scroll into view — pure CSS
   (scroll-driven animation). Browsers without support, and anyone who has
   asked for reduced motion, simply see the cards. The picture and the label
   animate rather than the card itself, so the card's tap state (opacity)
   is left alone. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .project-item > * {
      animation: card-in linear both;
      animation-timeline: view();
      /* Done within the first 120px of scrolling in, and never fully
         invisible, so the top of the next card still peeks up from the
         bottom of a phone screen as a cue to keep scrolling. */
      animation-range: entry 0px entry 120px;
    }
  }
}
@keyframes card-in {
  from { opacity: 0.25; transform: translateY(20px); }
}

/* Screen-reader-only heading: gives each page a single <h1> for structure
   and search results without changing the visual design. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}