/*
 * Services page illustrations.
 * Loaded only on the Narrow Services template, after narrow-custom.
 */

/* ============================================================
   Calculator: an illustration at the left of every service button.
   ============================================================ */
body.narrow-services-page .svc-calc-btn {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

body.narrow-services-page .svc-calc-btn-art {
  order: 1;
  display: block;
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3rem;
  object-fit: contain;
  object-position: left center;
}

body.narrow-services-page .svc-calc-btn .svc-calc-btn-info {
  order: 2;
  min-width: 0;
}

body.narrow-services-page .svc-calc-btn .svc-calc-check {
  order: 3;
  margin-left: auto;
}

/* Narrow buttons: the illustration sits on top, the tick moves to the corner. */
@media (min-width: 861px) and (max-width: 1180px), (max-width: 768px) {
  body.narrow-services-page .svc-calc-btn {
    flex-direction: column;
    align-items: flex-start;
  }

  body.narrow-services-page .svc-calc-btn-art {
    order: 0;
    width: auto;
    max-width: 4.5rem;
    height: 2.5rem;
  }

  body.narrow-services-page .svc-calc-btn .svc-calc-check {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    margin: 0;
  }

  body.narrow-services-page .svc-calc-btn .svc-calc-btn-info {
    width: 100%;
    flex: 0 0 auto;
  }
}

/* ============================================================
   Packages: the illustration sits at the right of the service tags.
   ============================================================ */
body.narrow-services-page .svc-pkg-services {
  flex-direction: row;
  flex-wrap: nowrap !important;
  justify-content: space-between;
  align-items: center !important;
  gap: 1rem !important;
}

body.narrow-services-page .svc-pkg-tags {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

body.narrow-services-page .svc-pkg-art {
  display: block;
  flex: 0 0 auto;
  width: 7rem;
  height: 7rem;
  margin-block: -0.75rem;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.3));
}

@media (max-width: 768px) {
  body.narrow-services-page .svc-pkg-art {
    width: 5.75rem;
    height: 5.75rem;
    margin-block: -0.5rem;
  }
}

/* ============================================================
   What is included: the illustration sits right next to the metric.
   The "Виж още" link stays at the far right of the same row.
   ============================================================ */
body.narrow-services-page .kakvo-panel-metric {
  justify-content: flex-start;
  align-items: center;
  column-gap: 1.5rem;
  row-gap: 1rem;
}

body.narrow-services-page .kakvo-panel-art {
  display: block;
  flex: 0 0 auto;
  width: 10rem;
  height: auto;
  aspect-ratio: 1 / 1;
}

body.narrow-services-page .kakvo-panel-metric .kakvo-panel-cta {
  margin-left: auto;
}

@media (max-width: 640px) {
  body.narrow-services-page .kakvo-panel-metric {
    column-gap: 1rem;
  }

  body.narrow-services-page .kakvo-panel-art {
    width: 6.5rem;
  }
}

/* ============================================================
   Package illustrations: equalise the visual size.
   Brand Starter is the reference (content about 0.79 x 0.73 of its canvas).
   The other two have shorter artwork (about 0.62 high), so they are scaled
   up to the same visual area. transform does not change the row height,
   so the card titles stay aligned across the three packages.
   ============================================================ */
body.narrow-services-page .svc-pkg-art--growth {
  transform: scale(1.08);
  transform-origin: right center;
}

body.narrow-services-page .svc-pkg-art--foundation {
  transform: scale(1.07);
  transform-origin: right center;
}

/* ============================================================
   What we do: an illustration at the left of every tab name.
   ============================================================ */
body.narrow-services-page .kakvo-nav-item {
  justify-content: flex-start;
  gap: 1.25rem;
}

body.narrow-services-page .kakvo-nav-art {
  display: block;
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 10px;
  object-fit: cover;
}

body.narrow-services-page .kakvo-nav-name {
  min-width: 0;
}

/* Tabs sit in a row on tablets: the illustration goes above the name. */
@media (min-width: 641px) and (max-width: 1024px) {
  body.narrow-services-page .kakvo-nav-item {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.75rem;
  }
}

@media (max-width: 640px) {
  body.narrow-services-page .kakvo-nav-item {
    gap: 1rem;
  }

  body.narrow-services-page .kakvo-nav-art {
    width: 3rem;
    height: 3rem;
  }
}

/* ============================================================
   What we do, mobile: one row with two columns.
   Left: the metric. Right: the illustration with "Виж още" under it.
   ============================================================ */
@media (max-width: 768px) {
  body.narrow-services-page .kakvo-panel-metric {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "left art"
      "left cta";
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.25rem;
  }

  body.narrow-services-page .kakvo-panel-metric-left {
    grid-area: left;
  }

  body.narrow-services-page .kakvo-panel-art {
    grid-area: art;
    justify-self: center;
    width: 7rem;
  }

  body.narrow-services-page .kakvo-panel-metric .kakvo-panel-cta {
    grid-area: cta;
    justify-self: center;
    margin-left: 0;
  }
}


@media (max-width: 768px) {
  body.narrow-services-page .svc-pkg-svc-tag::before { content: none !important; display: none !important; }
}