/* ============================
   Lazy Block: chain-plate-calculator-promo
   ============================ */

.calculator-promo {
  --grid-color: rgba(114, 114, 114, 0.3);
  padding: var(--section-padding) 0;
  background-color: #191a1a;
  background-image:
    linear-gradient(0deg, transparent 24%, var(--grid-color) 25%, var(--grid-color) 26%, transparent 27%, transparent 74%, var(--grid-color) 75%, var(--grid-color) 76%, transparent 77%, transparent),
    linear-gradient(90deg, transparent 24%, var(--grid-color) 25%, var(--grid-color) 26%, transparent 27%, transparent 74%, var(--grid-color) 75%, var(--grid-color) 76%, transparent 77%, transparent);
  background-size: 15px 15px;
  color: var(--color-white);
}

.calculator-promo__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.calculator-promo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 48px;
  align-items: center;
}

.calculator-promo__content {
  max-width: 640px;
}

.calculator-promo__title {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  color: var(--color-white);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-md);
  text-transform: uppercase;
  text-wrap: balance;
}

.calculator-promo__title::before {
  content: '';
  display: inline-block;
  vertical-align: inherit;
  width: 28px;
  height: 14px;
  margin-right: 12px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 810 387'><g transform='translate(0,387) scale(0.1,-0.1)' fill='%23ffffff'><path d='M1413 3733 c-45 -114 -208 -503 -433 -1033 -43 -102 -142 -338 -220 -525 -78 -187 -180 -428 -225 -535 -45 -107 -85 -204 -88 -215 -4 -11 -36 -85 -71 -165 l-63 -145 -152 -3 -151 -3 0 -549 0 -550 967 2 968 3 258 685 c141 377 279 746 306 820 27 74 53 136 59 138 12 4 30 -34 277 -568 34 -74 85 -182 112 -240 28 -58 61 -127 73 -155 13 -27 60 -129 105 -225 46 -96 113 -238 149 -315 l66 -140 701 0 701 0 225 480 c394 843 415 888 470 1010 30 66 57 128 60 138 12 38 33 12 68 -85 21 -57 68 -184 105 -283 203 -537 247 -653 340 -905 56 -151 109 -294 117 -317 l16 -43 968 0 969 0 0 550 0 550 -154 0 -154 0 -60 143 c-127 298 -285 674 -307 727 -12 30 -54 129 -93 220 -38 91 -114 269 -167 395 -54 127 -135 318 -180 425 -46 107 -133 314 -195 460 -62 146 -124 291 -138 323 l-25 57 -899 -2 -900 -3 -135 -290 c-74 -159 -170 -366 -213 -460 -43 -93 -128 -278 -190 -410 -62 -132 -130 -277 -151 -322 l-38 -83 -44 0 -43 0 -34 73 c-19 39 -69 146 -112 236 -43 89 -78 165 -78 166 0 2 -40 88 -89 192 -49 103 -103 220 -121 258 -112 242 -248 531 -276 588 l-28 57 -901 0 -901 0 -51 -127z'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.calculator-promo__desc {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.65;
  margin: 0 0 var(--space-xl);
  text-wrap: pretty;
}

.calculator-promo__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl);
}

.calculator-promo__list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
}

.calculator-promo__list-item:last-child {
  margin-bottom: 0;
}

.calculator-promo__list-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-white);
  margin-top: 1px;
}

.calculator-promo__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-white);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.calculator-promo__cta:hover,
.calculator-promo__cta:focus-visible {
  background: var(--color-gray-50);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.calculator-promo__cta svg {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.calculator-promo__cta:hover svg,
.calculator-promo__cta:focus-visible svg {
  transform: translateX(4px);
}

.calculator-promo__panel {
  position: relative;
  padding: clamp(24px, 3vw, 36px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.calculator-promo__panel::before {
  content: '';
  position: absolute;
  inset: 16px 16px auto auto;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  opacity: 0.75;
}

.calculator-promo__panel-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: var(--space-xl);
}

.calculator-promo__visual-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  color: var(--color-white);
  opacity: 0.95;
}

.calculator-promo__panel-label {
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.64);
}

.calculator-promo__panel-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.35;
}

.calculator-promo__details {
  position: relative;
  display: grid;
  gap: 12px;
  margin: 0;
}

.calculator-promo__detail {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.calculator-promo__detail dt {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-white);
}

.calculator-promo__detail dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.5;
}

.calculator-promo__animate {
  opacity: 1;
  transform: translateY(0);
}

.js .calculator-promo__animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .calculator-promo__animate--visible {
  opacity: 1;
  transform: translateY(0);
}

.js .calculator-promo__animate--delay {
  transition-delay: 150ms;
}

@media (prefers-reduced-motion: reduce) {
  .calculator-promo__animate,
  .js .calculator-promo__animate {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .calculator-promo__cta svg {
    transition: none;
  }
}

@media (max-width: 1023px) {
  .calculator-promo__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .calculator-promo__content {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .calculator-promo {
    padding: var(--section-padding-sm) 0;
  }

  .calculator-promo__container {
    padding: 0 var(--container-padding-mobile);
  }

  .calculator-promo__title {
    font-size: 28px;
  }

  .calculator-promo__detail {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}