/*
 * Brand Strategy service page illustrations.
 * Loaded only on the Narrow Brand Strategy template, after narrow-custom.
 * Same design as the Brand Identity page (narrow-brand-identity.css).
 */

/* ============================================================
   ВКЛЮЧЕНО: 3 columns x 2 rows.
   The heading moves above the grid so the cards can use the full
   width. Each card has the text on the left and the illustration on
   the right, fully inside the border.
   ============================================================ */
.sv-deliverables-inner {
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
}

.sv-deliverables-heading {
  position: static;
}

@media (min-width: 769px) {
  .sv-deliverables-heading {
    white-space: nowrap;
  }
}

.sv-deliverables-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sv-deliverable {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem;
  grid-template-rows: auto 1fr;
  column-gap: 1.25rem;
  row-gap: 0.75rem;
  align-items: start;
  padding: 1.75rem;
}

.sv-deliverable .sv-deliverable-name {
  grid-column: 1;
  grid-row: 1;
}

.sv-deliverable .sv-deliverable-desc {
  grid-column: 1;
  grid-row: 2;
}

.sv-deliverable .bi-deliv-art {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  display: block;
  width: 6rem;
  height: 6rem;
  object-fit: contain;
  opacity: 0.9;
  pointer-events: none;
  user-select: none;
}

/* Equalise the optical size of the six illustrations: every one gets the same
   filled area (measured from the pictures; order in the markup: document, tone of voice, positioning, target audience, messages, roadmap). */
.sv-deliverable:nth-child(1) .bi-deliv-art {
  transform: scale(0.97);
}

.sv-deliverable:nth-child(2) .bi-deliv-art {
  transform: scale(0.97);
}

.sv-deliverable:nth-child(3) .bi-deliv-art {
  transform: scale(1.05);
}

.sv-deliverable:nth-child(4) .bi-deliv-art {
  transform: scale(1.01);
}

.sv-deliverable:nth-child(5) .bi-deliv-art {
  transform: scale(1.10);
}

.sv-deliverable:nth-child(6) .bi-deliv-art {
  transform: scale(0.90);
}

@media (max-width: 1279px) {
  .sv-deliverable {
    grid-template-columns: minmax(0, 1fr) 5rem;
    column-gap: 1rem;
    padding: 1.5rem;
  }

  .sv-deliverable .bi-deliv-art {
    width: 5rem;
    height: 5rem;
  }
}

@media (max-width: 1100px) {
  .sv-deliverables-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .sv-deliverables-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sv-deliverable {
    grid-template-columns: minmax(0, 1fr) 6.5rem;
  }

  .sv-deliverable .bi-deliv-art {
    width: 6.5rem;
    height: 6.5rem;
  }
}

/* ============================================================
   ЦЕНООБРАЗУВАНЕ: the illustration sits at the right of
   "ЕДНОКРАТНО / име / пакет".
   ============================================================ */
.bi-price-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.bi-price-head-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.bi-price-art {
  position: relative;
  top: -0.5rem;
  display: block;
  flex: 0 0 auto;
  width: 5.5rem;
  height: 5.5rem;
  margin: -0.25rem -0.25rem -0.75rem 0;
  object-fit: contain;
  transform-origin: right center;
}

/* Same optical size (filled area) for the three illustrations, measured from the pictures. */
.bi-price-art--base {
  transform: scale(1.04);
}

.bi-price-art--positioning {
  transform: scale(1.22);
}

.bi-price-art--full {
  transform: scale(1.06);
}

/* The last price card is shrunk by a shared rule in narrow-custom.css;
   here it keeps the same price size as the other two cards. */
@media (min-width: 769px) {
  .svc-pricing-grid .svc-price-card:last-child .svc-price-amount-val {
    font-size: 1.9rem !important;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 768px) {
  .bi-price-art {
    width: 4.5rem;
    height: 4.5rem;
  }
}