/* Vårt arbete - the nine work pages (/vart-arbete/*). Loaded after site.css.
   A 1:1 port of the Framer pages "Vart Arbete / ...": a desktop sidebar of pill links next to
   a 70% content column. Sizes measured from Framer at 390 / 1024 / 1440; breakpoints are
   Framer's (desktop >= 1200, tablet 810-1199.98, mobile < 810). Framer hides the sidebar
   below 1200 px. */

:root {
  --va-pill-ink: var(--green-dark);
  --va-pill-hover-ink: #f9f9f9;
  --va-link: #0099ff;
  --va-arrow-dark: var(--green-dark);
  --va-arrow-light: rgba(0, 0, 0, 0.2);
  --va-dots-bg: rgba(0, 0, 0, 0.2);
  --va-r-media: 15px;
  --va-r-card: 15px;
  --va-r-step: 10px;
  /* Framer spring {stiffness 220, damping 60}, fitted to a curve over its 99.5% settle time */
  --va-ease-spring: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- appear effects (Framer: y 25, spring) ---------- */
html.js [data-reveal="25"] { --reveal-y: 25px; }
html.js [data-ease="spring"] { --reveal-ease: var(--va-ease-spring); --reveal-dur: 1.37s; }

/* ---------- page frame ---------- */
.va { padding-top: 128px; }
.va__frame {
  display: flex; justify-content: center; align-items: flex-start; gap: 10px;
  width: 100%; padding: 50px;
}
.va__side { flex: none; width: 25%; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.va__side-title {
  width: 100%; font-family: var(--f-display); font-weight: 700; font-size: 28px; line-height: 33.6px;
  letter-spacing: -0.02em; color: var(--ink);
}
.va__content {
  flex: none; width: 70%; max-width: 1240px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.va__group { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.va__text { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.va__text > :where(h1, h2, h3, p, ul), .va-step__text > :where(h2, p) { width: 100%; }
.va__rt { width: 100%; display: flex; flex-direction: column; gap: 20px; }
.va__spacer { flex: none; width: 100%; height: 15px; }
.va__text .body strong { font-weight: 700; }

/* ---------- pill links (sidebar, "Till våra referenser") ---------- */
.va-pill {
  position: relative; flex: none; display: flex; align-items: center; justify-content: center;
  width: 230px; padding: 10px 45px; border-radius: 10px;
  background-color: rgba(55, 69, 54, 0); box-shadow: inset 0 0 0 1px var(--va-pill-ink);
  font-family: var(--f-alt); font-weight: 600; font-size: 16px; line-height: 19.2px; letter-spacing: 0;
  color: var(--va-pill-ink); text-align: center; white-space: nowrap;
  transition: background-color var(--t-mid) var(--ease-spring), color var(--t-mid) var(--ease-spring),
    transform var(--t-fast) var(--ease-out);
}
.va-pill:hover { background-color: var(--va-pill-ink); color: var(--va-pill-hover-ink); }
.va-pill:active { transform: scale(0.98); }
.va-pill[aria-current="page"] { background-color: var(--va-pill-ink); color: var(--white); }

/* ---------- white media cards ---------- */
.va-card { position: relative; flex: none; background: var(--white); border-radius: var(--va-r-card); overflow: hidden; }
/* Villaägarna logo: 770 x 239 card, logo centred at 422 px */
.va-card--logo { width: 770px; height: 239px; }
.va-card--logo img { position: absolute; left: 50%; top: 50%; width: 422px; transform: translate(-50%, -50%); }
/* BRF reference map */
.va-card--map { display: flex; align-items: center; justify-content: center; width: 770px; height: 781px; padding: 10px 0; }
.va-card--map .va-card__img { width: 697px; height: 96%; border-radius: var(--va-r-media); overflow: hidden; }
.va-card--map img { width: 100%; height: 100%; object-fit: cover; }
/* Nowocoat colour chart */
.va-card--chart { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; width: 770px; height: 791px; }
.va-card--chart .va-card__img { width: 475px; height: 79%; border-radius: var(--va-r-media); overflow: hidden; }
.va-card--chart .va-card__img img { width: 100%; height: 100%; object-fit: contain; }
.va-card--chart .va-card__logo { flex: none; width: 195px; height: 78px; }
.va-card--chart .va-card__logo img { width: 100%; height: 100%; }

/* ---------- references card ("Se ett urval av våra tidigare arbeten") ---------- */
.va-refs {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 20px; border-radius: var(--va-r-card); background: var(--cream);
}
.va-refs__lead { width: 100%; text-align: center; }
.va-refs__list {
  width: 100%; display: flex; justify-content: center; align-items: flex-start; gap: 25px;
  border-radius: 14px; overflow: hidden;
}
.va-refs__item {
  flex: none; width: 30%; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 2px 0; overflow: clip;
}
.va-refs__img { width: 100%; height: 180px; border-radius: var(--va-r-media); overflow: hidden; }
.va-refs__img img { width: 100%; height: 100%; object-fit: cover; }
.va-refs__name {
  width: 100%; font-family: var(--f-display); font-weight: 400; font-size: 20px; line-height: 24px;
  letter-spacing: -0.02em; color: var(--ink); text-align: center;
}
.va-refs__name--bold { font-weight: 700; }
/* cards that have a case page link to it (2026-10-26); the link stretches over the whole card */
.va-refs__item:has(.va-refs__link) { position: relative; }
.va-refs__link { color: inherit; text-decoration: none; }
.va-refs__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--va-r-media); }
.va-refs__link:hover, .va-refs__link:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.va-refs__link:focus-visible { outline: none; }
.va-refs__link:focus-visible::after { outline: 2px solid var(--green); outline-offset: -2px; } /* inside: the item clips overflow */
.va-refs__item:has(.va-refs__link) img { transition: opacity var(--t-fast) var(--ease-out); }
.va-refs__item:has(.va-refs__link:hover) img { opacity: 0.92; }
.va-refs__link:active { opacity: 0.8; }
.va-inline-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.va-inline-link:hover { color: var(--green); }
.va-inline-link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 2px; }
.va-refs__body { width: 100%; display: flex; flex-direction: column; gap: 20px; }

/* ---------- steps carousel card (Framer Carousel: native scroll, snap, 3 / 1 per view) ---------- */
.va-steps {
  width: 100%; height: 400px; display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 10px; padding: 12px 20px; border-radius: var(--va-r-card); background: var(--cream);
}
.va-car { position: relative; flex: none; width: 100%; }
.va-car__track {
  display: flex; align-items: center; gap: 5px; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.va-car__track::-webkit-scrollbar { display: none; }
.va-car__item { flex: none; width: calc(33.3333% - 3.3333px); scroll-snap-align: center; scroll-snap-stop: always; }
.va-car__arrow {
  position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; margin-top: -20px;
  display: none; align-items: center; justify-content: center; border-radius: 40px;
  background: var(--va-arrow-dark); color: var(--white); cursor: pointer;
  transition: opacity 0.3s var(--ease-out), transform 0.05s linear, background-color var(--t-fast) var(--ease-out);
}
html.js .va-car__arrow { display: flex; }
.va-car__arrow svg { width: 40px; height: 40px; }
.va-car__arrow--prev { left: 0; }
.va-car__arrow--next { right: 0; }
.va-car__arrow:hover { background-color: var(--green); }
.va-car__arrow:active { transform: scale(0.9); }
.va-car__arrow.is-off { opacity: 0; pointer-events: none; }

.va-stepcard {
  width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 20px; border-radius: var(--va-r-step); background: var(--cream);
}
.va-stepcard__media { width: 100%; border-radius: 14px; overflow: hidden; }
.va-stepcard__media img { width: 100%; height: 267px; object-fit: cover; border-radius: var(--va-r-media); }
.va-stepcard__text { width: 99%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.va-stepcard__text > * { width: 100%; text-align: center; }

.va-label {
  font-family: var(--f-alt); font-weight: 900; font-size: 16px; line-height: 19.2px; letter-spacing: 0;
  color: var(--green-dark);
}

/* ---------- steg för steg ---------- */
.va-hero-img { position: relative; width: 100%; height: 500px; border-radius: var(--va-r-media); overflow: hidden; }
.va-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; }
.va-step {
  width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 20px; border-radius: var(--va-r-step); background: var(--cream); scroll-margin-top: 140px;
}
.va-step--plain { padding: 9px 0; border-radius: 0; background: none; }
.va-step__media { width: 100%; border-radius: 14px; overflow: hidden; }
.va-step__media img { width: 100%; height: 479px; object-fit: cover; border-radius: var(--va-r-media); }
.va-step__text { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.va-step--plain .va-step__text { gap: 20px; }
.va-step__spacer { flex: none; width: 100%; height: 9px; }
.va-step__title { font-weight: 700; }

/* ---------- miljö ---------- */
.va-eco { flex: none; display: flex; align-items: center; justify-content: center; gap: 30px; width: 770px; height: 239px; overflow: clip; }
.va-eco__stamp { flex: none; width: 150px; height: 137px; }
.va-eco__stamp img { width: 100%; height: 100%; }
.va-eco__photo { flex: none; width: 584px; height: 239px; border-radius: var(--va-r-media); overflow: hidden; }
.va-eco__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- demofilm ---------- */
.va-video { position: relative; flex: none; width: 769px; height: 417px; border-radius: var(--va-r-media); overflow: hidden; background: var(--green-dark); }
.va-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.va-video::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 2px solid var(--green-dark); border-radius: var(--va-r-media);
}

/* ---------- broschyrer ---------- */
.va-docs { width: 100%; display: flex; flex-direction: column; gap: 20px; }
.va-docs li {
  position: relative; padding-left: 16px;
  font-size: 14px; line-height: 21px; letter-spacing: -0.01em; color: var(--ink-70);
}
.va-docs li::before { content: "\2022"; position: absolute; left: 0; }
.va-docs a {
  color: var(--va-link); text-decoration: underline; text-underline-offset: auto;
  transition: opacity var(--t-fast) var(--ease-out);
}
.va-docs a:hover { opacity: 0.75; }
.va-docs a:active { opacity: 0.6; }
/* 44 px hit area on the PDF links without moving them (design review 2026-10-24) */
.va-docs a { display: inline-block; padding-block: 12px; margin-block: -12px; }
/* step cards link to the steg-for-steg anchors: quiet hover and press (Framer had none; invisible at rest) */
.va-stepcard { transition: opacity var(--t-fast) var(--ease-out); }
.va-stepcard:hover .va-stepcard__media img { opacity: 0.9; }
.va-stepcard:active { opacity: 0.75; }
.va-stepcard:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 16px; }

/* ---------- nocktätning slideshow (Framer Slideshow: infinite, autoplay 1.5 s, 3 / 1 per view) ---------- */
.va-show { position: relative; flex: none; width: 770px; height: 299px; overflow: hidden; user-select: none; }
.va-show__track {
  display: flex; align-items: center; gap: 10px; height: 100%; margin: 0; padding: 0; list-style: none;
  will-change: transform;
}
.va-show__item { flex: none; width: calc(33.3333% - 6.6667px); height: 100%; }
.va-show__item img { width: 100%; height: 100%; object-fit: cover; }
html:not(.js) .va-show__track { overflow-x: auto; }
.va-show__arrow {
  position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; margin-top: -20px;
  display: none; align-items: center; justify-content: center; border-radius: 40px;
  background: var(--va-arrow-light); color: var(--white); cursor: pointer;
  transition: transform 0.15s linear, background-color var(--t-fast) var(--ease-out);
}
html.js .va-show__arrow { display: flex; }
.va-show__arrow svg { width: 40px; height: 40px; }
.va-show__arrow--prev { left: 20px; }
.va-show__arrow--next { right: 20px; }
.va-show__arrow:hover { background-color: rgba(0, 0, 0, 0.32); }
.va-show__arrow:active { transform: scale(0.9); }
.va-show__dots {
  position: absolute; left: 50%; bottom: 10px; z-index: 2; transform: translateX(-50%);
  display: none; align-items: center; border-radius: 50px; background: var(--va-dots-bg); overflow: hidden;
}
html.js .va-show__dots { display: flex; }
.va-show__dot { display: flex; align-items: center; justify-content: center; padding: 10px 5px; cursor: pointer; }
.va-show__dot:first-child { padding-left: 10px; }
.va-show__dot:last-child { padding-right: 10px; }
.va-show__dot span {
  display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--white);
  opacity: 0.5; transition: opacity 0.3s var(--ease-out);
}
.va-show__dot[aria-current="true"] span { opacity: 1; }
.va-show__dot:hover span { opacity: 0.8; }
.va-show__dot:focus-visible { outline-offset: -2px; }

/* ---------- tablet ---------- */
@media (max-width: 1199.98px) {
  .va { padding: 0 24px; }
  .va__frame { padding: 135px 30px 35px; }
  .va__side { display: none; }
  .va__content { width: 100%; max-width: 900px; gap: 75px; }
  .va__group { gap: 50px; }
  .va__spacer { height: 1px; }
  .va-pill { font-size: 15px; line-height: 18px; }

  .va-card--logo { width: 697px; height: 219px; }
  .va-card--logo img { width: 390px; }
  .va-card--map { width: 700px; height: 710px; }
  .va-card--map .va-card__img { width: 606px; height: 95%; }
  .va-card--chart { width: 704px; height: 743px; gap: 0; }
  .va-card--chart .va-card__img { width: 423px; height: 81%; }

  .va-refs { gap: 10px; }
  .va-refs__list { gap: 20px; }
  .va-car__arrow--prev { left: 8px; }
  .va-car__arrow--next { right: 8px; }
  .va-refs__img { height: 350px; }

  .va-hero-img { height: 350px; }
  .va-step { align-items: flex-start; gap: 50px; }
  .va-step__media img { height: 350px; }
  .va-step__spacer { height: 1px; }

  .va-eco { width: 704px; }
  .va-eco__stamp { width: 154px; height: 140px; }
  .va-eco__photo { width: 511px; }

  .va-video { width: 702px; }
  .va-show { width: 704px; }
}

/* ---------- mobile ---------- */
@media (max-width: 809.98px) {
  .va { padding: 0 16px; }
  .va__frame { flex-direction: column; padding: 155px 20px 25px; }
  .va__frame--tight { padding: 145px 20px 10px; }
  .va__content { max-width: 400px; gap: 50px; }

  .va-card--logo { width: 317px; height: 149px; }
  .va-card--logo img { width: 276px; }
  .va-card--map { width: 316px; height: 321px; }
  .va-card--map .va-card__img { width: 85%; height: 96%; }
  .va-card--chart { width: 318px; height: 581px; gap: 15px; }
  .va-card--chart .va-card__img { width: 99%; height: 75%; }
  .va-card--chart .va-card__logo { width: 155px; height: 68px; }

  .va-refs__lead { order: 2; }
  .va-refs__list { flex-direction: column; gap: 20px; order: 0; }
  .va-refs__item { width: 100%; padding: 10px 0; }
  .va-refs__img { height: 300px; }
  .va-refs .va-pill { order: 1; }

  .va-car { width: 326px; }
  .va-car__item { width: 100%; }
  .va-car__arrow--prev { left: 0; }
  .va-car__arrow--next { right: 0; }

  .va-step__media img { height: 300px; }

  .va-eco { flex-direction: column; gap: 18px; width: 322px; height: 236px; }
  .va-eco__stamp { width: 113px; height: 103px; }
  .va-eco__photo { width: 322px; height: 104px; }

  .va-video { width: 318px; height: 176px; }
  .va-show { width: 314px; }
  .va-show__item { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .va-pill, .va-car__arrow, .va-show__arrow, .va-show__dot span { transition: none !important; }
  .va-car__track { scroll-behavior: auto; }
}