@import url("./visual-patterns.css");

/* A001 cost estimate: P001-11 labels sit immediately before the price. */
.cost-card--price-pattern .cost-pattern {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.5rem;
  align-items: center;
  column-gap: .75rem;
}

.cost-pattern__route {
  display: grid;
  grid-template-columns: 6.25rem 2rem auto;
  align-items: center;
  gap: .125rem;
  min-width: 0;
}

.ui-transfer__source {
  min-width: 0;
  white-space: nowrap;
}

.ui-transfer__target { min-width: 0; }

/* Page typography is separate from the shared visual formats. */
.cost-card--price-pattern, .b001-cost {
  --transfer-font-size: 14px;
  --transfer-source-font-size: 12px;
  --transfer-arrow-size: 1.4rem;
  --price-unit-size: var(--font-size-body);
}
.ui-transfer__source .ui-transfer__label { width: 100%; }

.cost-card--price-pattern .cost-pattern strong {
  justify-self: end;
  font-size: 1.75rem;
  white-space: nowrap;
}

.cost-card--price-pattern .cost-pattern strong small {
  white-space: nowrap;
}

@media (max-width: 767px) {
  .cost-card--price-pattern .cost-pattern {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: .5rem;
  }

  .cost-pattern__route {
    grid-column: 1 / -1;
  }

  .cost-card--price-pattern .cost-pattern strong {
    grid-column: 2;
  }
}

@media (max-width: 767px) {
  .cost-card--price-pattern .cost-pattern { container-type: inline-size; }
  .cost-card--price-pattern .cost-pattern strong {
    grid-column: 1 / -1;
    font-size: min(50px, 18cqi);
    padding-top: 10px;
  }
}

.cost-card--price-pattern .cost-pattern strong { background-image: none; padding-inline: 0; }

/* Keep the route above the price when the card has insufficient inline space. */
.cost-card--price-pattern .cost-pattern { container-type: inline-size; }
@container (max-width: 400px) {
  .cost-card--price-pattern .cost-pattern__route,
  .cost-card--price-pattern .cost-pattern > strong { grid-column: 1 / -1; }
}