/**
 * Section: Pack calculator ("Bigger pack, the sweeter price per piece.")
 *
 * Pink gingham paper with torn edges (the design's artwork, recoloured from
 * lilac exactly as the design does with hue-rotate, baked into the image).
 * A torn white note on the left, the calculator card on the right.
 */

.packs {
  position: relative;
  padding-block: var(--section-space-l);
  padding-inline: var(--space-gutter);
  background-image: url('../../img/brand/paper-gingham-pink.webp?v=2');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Straight after the cream category band (homepage), the dips of the torn top
   edge show that cream rather than the white page, so the gingham reads as
   laid on top of it with no white strip between. */
.category-grid + .packs {
  background-image:
    url('../../img/brand/paper-gingham-pink.webp?v=2'),
    linear-gradient(var(--surface-alt) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover, 100% 100%;
}

.packs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-m);
}

.pack-note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  padding: var(--space-xl) var(--space-l);
  background: var(--surface);
  clip-path: var(--torn);
  filter: drop-shadow(0 3px 3px rgba(118, 97, 151, 0.13));
}

.pack-note h2 {
  font-size: var(--text-h2);
}

.pack-note p {
  max-width: 44ch;
}

.calculator {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-l) var(--space-m);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.calculator h3 {
  font-size: var(--text-h4);
}

.calculator h3 em {
  color: var(--brand-accent);
}

.calculator .field select {
  color: var(--ink);
}

.totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
  padding-top: var(--space-s);
  border-top: var(--border-hair) solid var(--hairline);
}

.totals > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.totals > div:last-child {
  align-items: flex-end;
  text-align: right;
}

.totals dt {
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-strong);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.totals dd {
  font-family: var(--font-body);
  font-weight: var(--weight-strong);
  font-size: var(--text-price);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.totals dd.is-saving {
  color: var(--brand-accent);
}

.calc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-s);
}

.calculator-caption {
  font-size: var(--text-xs);
}

@media (min-width: 62rem) {
  .packs-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-l);
  }

  .pack-note {
    padding: var(--space-2xl) var(--space-xl);
  }

  .calculator {
    padding: var(--space-l);
  }
}