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

/* A full-width recommended quote above the three standard packages. */
.svc-price-card.web-quote-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
  padding-top: 3rem;
}

.web-quote-title {
  margin: 0 0 0.75rem;
  color: var(--narrow-text-light);
  font-size: clamp(1.4rem, 2.5vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
}

.web-quote-copy {
  max-width: 70ch;
  margin: 0;
  color: rgba(255, 247, 236, 0.72);
  font-size: 0.9375rem;
  line-height: 1.75;
}

.web-quote-cta,
.web-quote-cta:visited {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.65rem;
  max-width: 100%;
  padding: 0.9rem 1.25rem;
  border: 1px solid var(--narrow-accent);
  border-radius: 999px;
  background-color: var(--narrow-accent);
  color: var(--narrow-text-light);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: var(--narrow-button-transition);
}

.web-quote-cta:hover,
.web-quote-cta:focus-visible {
  border-color: var(--narrow-text-light);
  background-color: var(--narrow-text-light);
  color: var(--narrow-bg-secondary);
  opacity: 1;
}

.web-quote-cta:focus-visible {
  outline: 2px solid var(--narrow-accent);
  outline-offset: 4px;
}

.web-quote-cta > span:first-child {
  min-width: 0;
}

.web-quote-cta > span[aria-hidden] {
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .svc-price-card.web-quote-banner {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding: 2.5rem 1.5rem 1.5rem;
  }

  .web-quote-cta {
    justify-self: start;
  }
}

/* ============================================================
   ВКЛЮЧЕНО: 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: design, responsive, performance, security, SEO base, training). The performance illustration is mirrored horizontally (scale x -1). */
.sv-deliverable:nth-child(1) .bi-deliv-art {
  transform: scale(0.89);
}

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

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

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

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

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

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

.bi-price-art--company {
  transform: scale(1.13);
}

.bi-price-art--dev {
  transform: scale(1.11);
}

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