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

/* ============================================================
   ВКЛЮЧЕНО: 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 visual size of the six illustrations (order in the markup:
   logo, colors, typography, photo, guidelines, materials). */
.sv-deliverable:nth-child(1) .bi-deliv-art {
  transform: scale(1.08);
}

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

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

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

@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);
  }

  /* Phones: the illustrations are a little bigger (5rem before). */
  .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;
}

/* Visual size: Пълен бранд is the reference (scale 1.15). Старт and Бизнес have
   smaller artwork inside the same canvas (content area about 0.58 and 0.62 against
   0.75), so they are scaled up to look equally large. */
.bi-price-art--start {
  transform: scale(1.3);
}

.bi-price-art--business {
  transform: scale(1.2);
}

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

/* 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;
  }
}