/*
 * SEO service page illustrations.
 * Loaded only on the Narrow SEO template, after narrow-custom.
 * Same design as the Brand Identity and Brand Strategy pages.
 */

/* ============================================================
   ВКЛЮЧЕНО: 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: audit, keywords, on-page, on-site, speed, off-site). The speed illustration is mirrored horizontally (scale x -1). */
.sv-deliverable:nth-child(1) .bi-deliv-art {
  transform: scale(0.94);
}

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

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

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

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

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

@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--audit {
  transform: scale(1.04);
}

.bi-price-art--monthly {
  transform: scale(1.00);
}

.bi-price-art--content {
  transform: scale(1.12);
}

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


/* Only the SEO service gets this compact two-line mobile hero. */
@media (max-width: 768px) {
  .seo-hero-title {
    font-size: clamp(1.7rem, 8.2vw, 2.5rem) !important;
    line-height: 1.1;
  }
  .seo-hero-title > span { display: block; white-space: nowrap; }
  .svc-pricing-grid .svc-price-footer { flex-wrap: nowrap !important; gap: .5rem; }
  .svc-pricing-grid .svc-price-amount { min-width: 0; flex: 1 1 auto; }
  .svc-pricing-grid .svc-price-amount-val { font-size: clamp(.8rem, 3.8vw, 1.125rem) !important; }
  .svc-pricing-grid .svc-price-cta { flex-shrink: 0; white-space: nowrap; }
}