/*
  SAJ Studio services section responsive layout - Version 2
  File: public_html/saj-services-section.css
  Scope: Våre behandlinger / #services only

  Goal:
  Desktop: 3 cards
  Tablet: 2 cards
  Mobile: 1 card

  This file uses stronger selectors because services-live.js injects its own CSS after page load.
*/

/* Anchor target for hero buttons and other internal links */
html #root section#services.saj-services-live {
  scroll-margin-top: 92px !important;
}

/* Base safety */
html #root section#services.saj-services-live,
html body #root section#services.saj-services-live {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html #root section#services.saj-services-live .saj-services-live-inner {
  width: 100% !important;
  max-width: 1360px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

html #root section#services.saj-services-live .saj-category-slider,
html #root section#services.saj-services-live .saj-category-viewport {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html #root section#services.saj-services-live .saj-category-track {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  will-change: transform !important;
}

html #root section#services.saj-services-live .saj-category-track > article.saj-category-card {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: none !important;
}

html #root section#services.saj-services-live .saj-category-card-image {
  width: 100% !important;
  overflow: hidden !important;
}

html #root section#services.saj-services-live .saj-category-card-image img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

/* =========================
   Desktop: 3 cards
   1025px+
========================= */

@media (min-width: 1025px) {
  html #root section#services.saj-services-live {
    padding: 46px 5vw 84px !important;
  }

  html #root section#services.saj-services-live .saj-category-track {
    --visible-count: 3 !important;
    --category-gap: 22px !important;
    gap: 22px !important;
  }

  html #root section#services.saj-services-live .saj-category-track > article.saj-category-card {
    flex: 0 0 calc((100% - 44px) / 3) !important;
    width: calc((100% - 44px) / 3) !important;
    min-width: calc((100% - 44px) / 3) !important;
    max-width: calc((100% - 44px) / 3) !important;
    min-height: 560px !important;
  }

  html #root section#services.saj-services-live .saj-category-card-image {
    height: 300px !important;
  }
}

/* =========================
   Tablet: 2 cards
   641px - 1024px
========================= */

@media (min-width: 641px) and (max-width: 1024px) {
  html #root section#services.saj-services-live {
    padding: 38px 28px 68px !important;
  }

  html #root section#services.saj-services-live .saj-services-live-head {
    display: block !important;
    margin-bottom: 28px !important;
  }

  html #root section#services.saj-services-live .saj-services-live-label {
    margin-bottom: 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.28em !important;
  }

  html #root section#services.saj-services-live .saj-services-live-title {
    font-size: clamp(34px, 5vw, 52px) !important;
    line-height: 1 !important;
  }

  html #root section#services.saj-services-live .saj-services-live-text {
    max-width: 620px !important;
    margin-top: 14px !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  html #root section#services.saj-services-live .saj-category-track {
    --visible-count: 2 !important;
    --category-gap: 18px !important;
    gap: 18px !important;
  }

  html #root section#services.saj-services-live .saj-category-track > article.saj-category-card {
    flex: 0 0 calc((100% - 18px) / 2) !important;
    width: calc((100% - 18px) / 2) !important;
    min-width: calc((100% - 18px) / 2) !important;
    max-width: calc((100% - 18px) / 2) !important;
    min-height: 520px !important;
  }

  html #root section#services.saj-services-live .saj-category-card-image {
    height: 270px !important;
  }

  html #root section#services.saj-services-live .saj-category-card-body {
    padding: 24px !important;
  }

  html #root section#services.saj-services-live .saj-category-card-label {
    font-size: 10px !important;
    letter-spacing: 0.24em !important;
  }

  html #root section#services.saj-services-live .saj-category-card-title {
    font-size: 26px !important;
    line-height: 1.08 !important;
  }

  html #root section#services.saj-services-live .saj-category-card-line {
    margin: 16px 0 !important;
  }

  html #root section#services.saj-services-live .saj-category-card-text {
    font-size: 14px !important;
    line-height: 1.68 !important;
  }

  html #root section#services.saj-services-live .saj-category-card-action {
    min-height: 44px !important;
    margin-top: 22px !important;
  }

  html #root section#services.saj-services-live .saj-category-prev {
    margin-left: -10px !important;
  }

  html #root section#services.saj-services-live .saj-category-next {
    margin-right: -10px !important;
  }
}

/* Extra tablet polish for narrow tablets */
@media (min-width: 641px) and (max-width: 820px) {
  html #root section#services.saj-services-live {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  html #root section#services.saj-services-live .saj-category-track {
    --category-gap: 16px !important;
    gap: 16px !important;
  }

  html #root section#services.saj-services-live .saj-category-track > article.saj-category-card {
    flex-basis: calc((100% - 16px) / 2) !important;
    width: calc((100% - 16px) / 2) !important;
    min-width: calc((100% - 16px) / 2) !important;
    max-width: calc((100% - 16px) / 2) !important;
  }

  html #root section#services.saj-services-live .saj-category-card-image {
    height: 240px !important;
  }

  html #root section#services.saj-services-live .saj-category-card-body {
    padding: 20px !important;
  }

  html #root section#services.saj-services-live .saj-category-card-title {
    font-size: 23px !important;
  }

  html #root section#services.saj-services-live .saj-category-card-text {
    font-size: 13px !important;
  }
}

/* =========================
   Mobile: 1 card
   640px and down
========================= */

@media (max-width: 640px) {
  html #root section#services.saj-services-live {
    padding: 34px 18px 58px !important;
  }

  html #root section#services.saj-services-live .saj-services-live-head {
    display: block !important;
    margin-bottom: 24px !important;
  }

  html #root section#services.saj-services-live .saj-services-live-label {
    margin-bottom: 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.28em !important;
  }

  html #root section#services.saj-services-live .saj-services-live-title {
    font-size: clamp(32px, 8.4vw, 42px) !important;
    line-height: 1.02 !important;
  }

  html #root section#services.saj-services-live .saj-services-live-text {
    max-width: 100% !important;
    margin-top: 14px !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
  }

  html #root section#services.saj-services-live .saj-category-track {
    --visible-count: 1 !important;
    --category-gap: 16px !important;
    gap: 16px !important;
  }

  html #root section#services.saj-services-live .saj-category-track > article.saj-category-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
  }

  html #root section#services.saj-services-live .saj-category-card-image {
    height: 260px !important;
  }

  html #root section#services.saj-services-live .saj-category-card-body {
    padding: 22px !important;
  }

  html #root section#services.saj-services-live .saj-category-card-label {
    font-size: 10px !important;
    letter-spacing: 0.24em !important;
  }

  html #root section#services.saj-services-live .saj-category-card-title {
    font-size: 28px !important;
    line-height: 1.08 !important;
  }

  html #root section#services.saj-services-live .saj-category-card-line {
    margin: 16px 0 !important;
  }

  html #root section#services.saj-services-live .saj-category-card-text {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  html #root section#services.saj-services-live .saj-category-card-action {
    width: 100% !important;
    min-height: 46px !important;
    margin-top: 22px !important;
  }

  html #root section#services.saj-services-live .saj-category-control {
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
  }

  html #root section#services.saj-services-live .saj-category-prev {
    margin-left: 4px !important;
  }

  html #root section#services.saj-services-live .saj-category-next {
    margin-right: 4px !important;
  }
}

/* Small mobile polish */
@media (max-width: 430px) {
  html #root section#services.saj-services-live {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  html #root section#services.saj-services-live .saj-category-card-image {
    height: 230px !important;
  }

  html #root section#services.saj-services-live .saj-category-card-body {
    padding: 20px !important;
  }

  html #root section#services.saj-services-live .saj-category-card-title {
    font-size: 25px !important;
  }
}