/*
  SAJ Studio bestseller section responsive layout
  File: public_html/saj-bestseller-section.css
  Scope: Populære behandlinger / #bestseller-services only

  Desktop: 4 cards
  Tablet: 2 cards
  Mobile: 1 card

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

/* Anchor target */
html #root section#bestseller-services.saj-bestseller-services-live {
  scroll-margin-top: 92px !important;
}

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

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

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

html #root section#bestseller-services.saj-bestseller-services-live .saj-bestseller-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#bestseller-services.saj-bestseller-services-live .saj-bestseller-track > article.saj-bestseller-card {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: none !important;
}

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

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

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

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

  html #root section#bestseller-services.saj-bestseller-services-live .saj-bestseller-track {
    --visible-count: 4 !important;
    --service-gap: 20px !important;
    gap: 20px !important;
  }

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

  html #root section#bestseller-services.saj-bestseller-services-live .saj-bestseller-image {
    height: 250px !important;
  }
}

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

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

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

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

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

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

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

  html #root section#bestseller-services.saj-bestseller-services-live .saj-bestseller-track > article.saj-bestseller-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: 500px !important;
  }

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

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

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

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

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

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

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

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

  html #root section#bestseller-services.saj-bestseller-services-live .saj-bestseller-track > article.saj-bestseller-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#bestseller-services.saj-bestseller-services-live .saj-bestseller-image {
    height: 235px !important;
  }

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

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

  html #root section#bestseller-services.saj-bestseller-services-live .saj-bestseller-description {
    font-size: 13px !important;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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