/* ==========================================================================
   Simons projektportal – Storsjöbadet
   The page itself follows Storsjöbadet's graphic profile. Each project card's
   top panel borrows colours and type from that project's own site.
   Adjust the design tokens in :root and the project themes below.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL Open Font License) ----------
   Body:     Open Sans – as specified in the graphic profile.
   Headings: The profile uses Isidora Sans (commercial). Montserrat is used as the
             closest free substitute. To use licensed Isidora Sans files, add e.g.:

   @font-face {
     font-family: "Isidora Sans";
     src: url("../assets/fonts/isidora-sans-bold.woff2") format("woff2");
     font-weight: 700 900;
     font-display: swap;
   }
   …and it will be picked up automatically via --font-heading.
   Poppins (700) is only used for the Utbildning card, as on that site. */

@font-face {
  font-family: "Open Sans";
  src: url("../assets/fonts/open-sans-latin-wght.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ---------- Design tokens ---------- */

:root {
  /* Brand palette (grafisk profil) */
  --brand-blue: #005aa7;      /* Blå, mörk – huvudfärg */
  --brand-blue-mid: #08809d;  /* Blå, mellan */
  --brand-teal: #1bb998;      /* Blågrön */
  --brand-aqua: #4ad6d6;      /* Blå, ljus */
  --brand-orange: #e84e0e;    /* Orange – används sparsamt */

  /* Roles */
  --color-primary: var(--brand-blue);
  --color-secondary: var(--brand-blue-mid);
  --color-background: #f2f5f8;
  --color-surface: #ffffff;
  --color-surface-muted: #e9eff5;
  --color-text: #0e1d2c;
  --color-text-soft: #33475a;
  --color-muted: #5a6977;
  --color-line: #dce4eb;
  --color-line-strong: #b9c6d2;
  --color-focus: var(--brand-blue);

  /* Typography */
  --font-heading: "Isidora Sans", "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body: "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --weight-heading: 800;

  /* Shape & depth */
  --radius: 12px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgb(14 29 44 / 0.05);
  --shadow-md: 0 1px 2px rgb(14 29 44 / 0.04), 0 18px 36px -16px rgb(14 29 44 / 0.22);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration: 320ms;

  /* Layout */
  --page-max: 76rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --grid-gap: clamp(1rem, 1.8vw, 1.5rem);
  --card-pad: clamp(1.25rem, 0.5rem + 2vw, 1.875rem);
}

/* ---------- Project themes ----------
   Top panel of each card, inspired by the project's own site.
   --cover-*  panel colours and heading type
   --accent   hover border + arrow button,  --bullet  feature markers */

[data-theme="default"] {
  --cover-bg: var(--brand-blue);
  --cover-ink: #fff;
  --cover-muted: rgb(255 255 255 / 0.78);
  --cover-highlight: var(--brand-aqua);
  --cover-font: var(--font-heading);
  --cover-weight: 800;
  --cover-case: uppercase;
  --accent: var(--brand-blue);
  --accent-ink: #fff;
}

/* badapp.se – marinblått och aqua, Inter */
[data-theme="simskolan"] {
  --cover-bg: #0d2b45;
  --cover-ink: #fff;
  --cover-muted: #a9c3d6;
  --cover-highlight: #5fd4e0;
  --cover-font: "Inter", "Segoe UI", system-ui, sans-serif;
  --cover-weight: 700;
  --cover-case: none;
  --cover-tracking: -0.015em;
  --accent: #0d2b45;
  --accent-ink: #5fd4e0;
  --bullet: #2fb4c4;
}

/* relax.badapp.se – sand, skogsgrönt och serifrubriker */
[data-theme="bastujournalen"] {
  --cover-bg: #efe9db;
  --cover-ink: #26301f;
  --cover-muted: #4d5342;
  --cover-highlight: #34633f;
  --cover-line: #d0c7ae;
  --cover-font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --cover-weight: 600;
  --cover-case: none;
  --accent: #34633f;
  --accent-ink: #fff;
  --bullet: #34633f;
}

/* utbildning.badapp.se – ljusblått, profilblått och Poppins */
[data-theme="utbildning"] {
  --cover-bg: #dcebfa;
  --cover-ink: #0e2233;
  --cover-muted: #47606f;
  --cover-highlight: #005aa7;
  --cover-font: "Poppins", var(--font-heading);
  --cover-weight: 700;
  --cover-case: none;
  --cover-tracking: -0.01em;
  --accent: #005aa7;
  --accent-ink: #fff;
  --bullet: #005aa7;
}

/* studio.badapp.se – blågrön till blå gradient, Inter */
[data-theme="studio"] {
  --cover-bg: linear-gradient(135deg, #0a7565 0%, #06698c 48%, #005aa7 100%);
  --cover-ink: #fff;
  --cover-muted: rgb(255 255 255 / 0.9);
  --cover-highlight: #7fe3cf;
  --cover-font: "Inter", "Segoe UI", system-ui, sans-serif;
  --cover-weight: 700;
  --cover-case: none;
  --cover-tracking: -0.015em;
  --accent: #005aa7;
  --accent-ink: #fff;
  --bullet: #1bb998;
}

/* soundboard.badapp.se – mörkt marinblått, blågrönt och Poppins */
[data-theme="soundboard"] {
  --cover-bg: linear-gradient(160deg, #0d2438 0%, #071726 100%);
  --cover-ink: #f2f9ff;
  --cover-muted: #a8c6de;
  --cover-highlight: #1bb998;
  --cover-font: "Poppins", var(--font-heading);
  --cover-weight: 700;
  --cover-case: none;
  --cover-tracking: -0.01em;
  --accent: #1bb998;
  --accent-ink: #04121e;
  --bullet: #1bb998;
}

/* ---------- Base ---------- */

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

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  flex: 1;
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  text-transform: uppercase; /* headings are always set in capitals (grafisk profil) */
  line-height: 1.08;
}

p,
ul {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--page-max));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 10;
  padding: 0.625rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--color-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
}

.brandline {
  font-size: 0.9375rem;
  color: var(--color-text-soft);
}

.brandline strong {
  font-weight: 700;
  color: var(--color-text);
}

.header-note {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.header-note svg {
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
}

@media (max-width: 30rem) {
  .header-note {
    display: none;
  }
}

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

.hero {
  display: grid;
  gap: 1.25rem 3rem;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4.5vw, 3.25rem);
}

@media (min-width: 72rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem);
    align-items: end;
  }
}

.hero__title {
  font-size: clamp(2.125rem, 1.25rem + 3.2vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.01em;
}

.hero__title-main,
.hero__title-sub {
  display: block;
}

.hero__title-sub {
  margin-top: 0.4em;
  font-size: 0.5em;
  letter-spacing: 0.01em;
  color: var(--color-primary);
}

.hero__lead {
  max-width: 30rem;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  color: var(--color-text-soft);
}

/* ---------- Section heads ---------- */

.section-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.section-title {
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
}

.section-rule {
  flex: 1;
  height: 1px;
  background: var(--color-line);
}

.section-count {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.noscript {
  padding: 1.5rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
}

/* ---------- Project grid: 1 column → 2 columns ---------- */

.project-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 44rem) {
  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* An odd last card fills the whole row */
  .project:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ---------- Project card ---------- */

.project {
  display: flex;
  animation: project-in 560ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

@keyframes project-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.project__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

/* Top panel in the project's own look */
.project__cover {
  container-type: inline-size; /* heading size + illustration follow the panel width */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  gap: 1.75rem 1.25rem;
  min-height: clamp(9rem, 7rem + 4vw, 10.5rem);
  padding: var(--card-pad);
  background: var(--cover-bg);
  color: var(--cover-ink);
}

.project__meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cover-muted);
}

.project__type {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.project__type::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--cover-highlight);
}

.project__index {
  margin-left: auto;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.project__title {
  align-self: end;
}

.project__name {
  font-family: var(--cover-font);
  font-weight: var(--cover-weight);
  text-transform: var(--cover-case);
  letter-spacing: var(--cover-tracking, 0);
  font-size: clamp(1.5rem, 1.1rem + 2.2cqi, 2rem);
  line-height: 1.1;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.project__host {
  margin-top: 0.4rem;
  font-size: 0.875rem;
  color: var(--cover-muted);
  overflow-wrap: anywhere;
}

.project__host strong {
  font-weight: 700;
  color: var(--cover-ink);
}

.project__motif {
  align-self: end;
  display: flex;
}

/* Narrow panel: the illustration moves up beside the label so the name gets the full width */
@container (max-width: 26rem) {
  .project__meta {
    grid-column: 1;
  }

  .project__index {
    display: none;
  }

  .project__motif {
    grid-row: 1;
    grid-column: 2;
    align-self: start;
  }

  .project__title {
    grid-column: 1 / -1;
  }
}

@container (max-width: 15rem) {
  .project__motif {
    display: none;
  }
}

/* White body – the same on every card */
.project__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--card-pad);
}

.project__desc {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text);
}

.project__features {
  display: grid;
  gap: 0.55rem 1.75rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text-soft);
}

/* Long lists (5+ points) flow into two balanced columns on wide cards:
   every card on large screens, and the full-width last card from tablet up */
@media (min-width: 72rem) {
  .project__features--columns {
    display: block;
    columns: 2;
    column-gap: 1.75rem;
  }

  .project__features--columns li {
    break-inside: avoid;
    margin-bottom: 0.55rem;
  }
}

@media (min-width: 44rem) {
  .project:last-child:nth-child(odd) .project__features--columns {
    display: block;
    columns: 2;
    column-gap: 1.75rem;
  }

  .project:last-child:nth-child(odd) .project__features--columns li {
    break-inside: avoid;
    margin-bottom: 0.55rem;
  }
}

.project__features li {
  position: relative;
  padding-left: 1.125rem;
}

.project__features li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 1px;
  background: var(--bullet, var(--accent));
}

.project__footer {
  margin-top: auto;
  padding-top: 1.5rem;
}

.project__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
}

/* Makes the whole card clickable while keeping a single, labelled link */
.project__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius);
}

.project__link--disabled {
  font-weight: 600;
  color: var(--color-muted);
}

.project__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-surface-muted);
  color: var(--color-text);
  transition:
    background-color var(--duration) var(--ease),
    color var(--duration) var(--ease);
}

.project__icon svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--duration) var(--ease);
}

/* Two columns: subgrid keeps top panels and white bodies aligned across each row.
   (The <li> and card must not be size containers – containment disables subgrid.) */
@media (min-width: 44rem) {
  .project,
  .project__card {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}

/* Full-width last card on desktop: panel on the left, text on the right */
@media (min-width: 64rem) {
  .project:last-child:nth-child(odd) .project__card {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  .project:last-child:nth-child(odd) .project__cover,
  .project:last-child:nth-child(odd) .project__content {
    grid-row: 1 / span 2;
  }

  .project:last-child:nth-child(odd) .project__content {
    grid-column: 2;
  }
}

/* ---------- Cover illustrations (decorative, CSS only) ---------- */

/* Simskolan – simmärken */
.motif--badges {
  display: flex;
}

.motif--badges span {
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--cover-highlight);
  border-radius: 50%;
  background: #0d2b45;
}

.motif--badges span + span {
  margin-left: -0.75rem;
}

.motif--badges span:first-child {
  border-color: rgb(255 255 255 / 0.28);
}

.motif--badges span:last-child {
  background: var(--cover-highlight)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 10.5c2 0 2-1.5 4-1.5s2 1.5 4 1.5 2-1.5 4-1.5 2 1.5 4 1.5M4 15c2 0 2-1.5 4-1.5s2 1.5 4 1.5 2-1.5 4-1.5 2 1.5 4 1.5' fill='none' stroke='%230d2b45' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 64% no-repeat;
}

/* Bastujournalen – journalsida */
.motif--journal {
  display: grid;
  gap: 0.55rem;
  width: 8.5rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--cover-line);
  border-radius: var(--radius-sm);
  background: #f9f6ee;
  box-shadow: 0 1px 0 rgb(38 48 31 / 0.06);
}

.motif--journal span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.motif--journal span::before {
  content: "";
  flex: none;
  width: 1.375rem;
  height: 0.4375rem;
  border-radius: 99px;
  background: var(--cover-highlight);
}

.motif--journal span:nth-child(2)::before {
  background: #8a6423;
}

.motif--journal span:nth-child(3)::before {
  background: #a5c79a;
}

.motif--journal span::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--cover-line);
}

/* Utbildning – framsteg */
.motif--progress {
  display: grid;
  gap: 0.55rem;
  width: 8.5rem;
}

.motif--progress span {
  position: relative;
  height: 0.5rem;
  overflow: hidden;
  border-radius: 99px;
  background: rgb(255 255 255 / 0.9);
}

.motif--progress span::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress);
  border-radius: inherit;
  background: var(--cover-highlight);
}

.motif--progress span:nth-child(1) {
  --progress: 100%;
}

.motif--progress span:nth-child(1)::after {
  background: var(--brand-teal);
}

.motif--progress span:nth-child(2) {
  --progress: 62%;
}

.motif--progress span:nth-child(3) {
  --progress: 30%;
}

/* Städschema Studio – schemabrickor */
.motif--tiles {
  display: grid;
  grid-template-columns: repeat(3, 1.625rem);
  gap: 0.375rem;
}

.motif--tiles span {
  height: 1.625rem;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.22);
}

.motif--tiles span:nth-child(1),
.motif--tiles span:nth-child(5) {
  background: rgb(255 255 255 / 0.92);
}

.motif--tiles span:nth-child(4) {
  background: rgb(255 255 255 / 0.5);
}

.motif--tiles span:nth-child(3) {
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%230a7565' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 72% no-repeat;
}

/* Soundboard – dagens tidslinje med nu-markör */
.motif--timeline {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 9.5rem;
  height: 2.75rem;
}

.motif--timeline::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: rgb(154 205 234 / 0.3);
}

.motif--timeline::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 1px);
  width: 2px;
  border-radius: 2px;
  background: #f0524b;
}

.motif--timeline span {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #4ad6d6;
}

.motif--timeline span:nth-child(-n + 3) {
  background: rgb(154 205 234 / 0.38);
}

.motif--timeline span:nth-child(4) {
  width: 0.75rem;
  height: 0.75rem;
  background: var(--cover-highlight);
  box-shadow: 0 0 0 4px rgb(27 185 152 / 0.25);
}

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

@media (hover: hover) {
  .project--linked .project__card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--color-line));
    box-shadow: var(--shadow-md);
  }

  .project--linked .project__card:hover .project__icon {
    background: var(--accent);
    color: var(--accent-ink);
  }

  .project--linked .project__card:hover .project__icon svg {
    transform: translate(1.5px, -1.5px);
  }
}

/* Keyboard focus: outline the whole card */
.project--linked .project__card:has(.project__link:focus-visible) {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
}

.project--linked .project__card:has(.project__link:focus-visible) .project__icon {
  background: var(--accent);
  color: var(--accent-ink);
}

@supports selector(:has(*)) {
  .project__link:focus-visible {
    outline: none;
  }
}

/* ---------- Upcoming (kept deliberately quiet) ---------- */

.upcoming-section {
  margin-top: clamp(3rem, 7vw, 5rem);
}

.upcoming-list {
  display: grid;
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 64rem) {
  .upcoming-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.upcoming__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  height: 100%;
  padding: 0.875rem;
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius);
}

.upcoming__media {
  position: relative;
  flex: none;
  width: clamp(8rem, 44%, 15rem);
  aspect-ratio: 1347 / 900;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

.upcoming__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Besöksräknare – Lampor's gauge at tile size: the arc for how full it is, the
   number inside it, and the day's curve below. The level colours the arc, the
   word and the curve alike, so the parts can never tell different stories. */
.upcoming__media--counter {
  /* The panel sets its own height; no fixed ratio to fight with. */
  aspect-ratio: auto;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
}

.counter {
  --level-color: var(--color-line-strong);
  --level-text: var(--color-muted);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Room at the top for the badge; no bottom padding, the curve runs to the edge. */
  padding: 1.75rem 0.875rem 0;
}

/* Level colours from Lampor; the text uses darker shades for contrast */
.counter[data-level="calm"] { --level-color: #1bb998; --level-text: #0c7a63; }
.counter[data-level="busy"] { --level-color: #f2a03d; --level-text: #8a5a00; }
.counter[data-level="full"] { --level-color: #e84e0e; --level-text: #b33a08; }
.counter[data-level="closed"] { --level-color: var(--brand-blue-mid); --level-text: var(--brand-blue-mid); }

.counter__tag {
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--color-surface-muted);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.counter__tag::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--color-line-strong);
}

.counter[data-mode="live"]:not([data-level="unknown"]) .counter__tag::before {
  background: #1bb998;
  animation: counter-live 2s ease-in-out infinite;
}

@keyframes counter-live {
  50% {
    opacity: 0.35;
  }
}

/* The gauge is an open circle. The box covers only the drawn arc including its
   round ends, so the empty lower part of the svg may overflow it. */
.counter__gauge {
  position: relative;
  width: clamp(6.5rem, 62%, 8.75rem);
  /* Lets the ratio crop the empty lower part instead of the svg setting the height */
  min-height: 0;
  aspect-ratio: 152 / 116;
}

.counter__gauge svg {
  display: block;
  width: 100%;
  height: auto;
}

.counter__track,
.counter__fill {
  fill: none;
  stroke-width: 13;
  stroke-linecap: round;
}

.counter__track {
  stroke: var(--color-surface-muted);
}

.counter__fill {
  stroke: var(--level-color);
  transition:
    stroke-dasharray 0.9s cubic-bezier(0.22, 0.85, 0.3, 1),
    stroke 0.6s ease;
}

/* Centred in the circle the arc describes, not in the cropped box */
.counter__readout {
  position: absolute;
  inset: 0 0 auto;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.counter__count {
  font-family: var(--font-heading);
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

/* The capacity is what gives the number its meaning */
.counter__of {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.3;
  text-align: center;
  color: var(--color-muted);
}

.counter__label {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--level-text);
}

/* Över dagen – the same curve Lampor draws, running out to the panel's edges */
.counter__chart {
  align-self: stretch;
  margin: 0.875rem -0.875rem 0;
  color: var(--level-color);
}

.counter__chart-head {
  display: flex;
  /* Too narrow for both on one line: the peak drops below, the label stays whole. */
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5rem;
  padding: 0 0.875rem 0.35rem;
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--color-muted);
}

.counter__peak {
  flex: none;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.counter__curve {
  display: block;
  width: 100%;
  height: 2.5rem;
}

.counter__line {
  stroke: var(--level-color);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: stroke 0.6s ease;
}

/* Not fresh: greyed out rather than showing an old number as if it were current */
.counter[data-level="unknown"] .counter__count {
  color: var(--color-muted);
}

.counter[data-level="unknown"] .counter__fill,
.counter[data-level="unknown"] .counter__chart {
  opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
  .counter__tag::before,
  .counter__fill,
  .counter__line {
    animation: none;
    transition: none;
  }
}

/* Phones: image above the text, full width */
@media (max-width: 30rem) {
  .upcoming__card {
    flex-direction: column;
    align-items: stretch;
  }

  .upcoming__media {
    width: 100%;
  }
}

/* Blueprint treatment: the grey render takes on the brand blue.
   The background has the same luminosity as the render's grey backdrop (#818181). */
.media--blueprint {
  isolation: isolate;
  background: #508ccc;
}

.media--blueprint img {
  mix-blend-mode: luminosity;
  filter: contrast(1.08);
}

.upcoming__body {
  min-width: 0;
}

.upcoming__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.625rem;
}

.upcoming__name {
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--color-text-soft);
}

.upcoming__status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--color-surface-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.upcoming__status::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--brand-orange);
}

.upcoming__desc {
  margin-top: 0.3rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-muted);
}

.upcoming__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.upcoming__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.upcoming__link svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  .project--linked .project__card:hover,
  .project--linked .project__card:hover .project__icon svg {
    transform: none;
  }
}