/* Карточки условий: равные между собой, читаются параллельно. */
@layer theme.components {

.price-cards {
  display: grid;
  margin: 24px 0 0;
  padding: 0;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  list-style: none;
}
.price-cards__card {
  padding: 22px;
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-md);
  background: var(--color-bg-page);
  box-shadow: var(--shadow-card);
}
.price-cards__title { margin-block-end: 10px; }
.price-cards__icon { margin-block-end: 14px; }
/* Фото карточки: единая пропорция, исходник любой — лишнее обрезается. */
.price-cards__media { margin: 0 0 14px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-md); }
.price-cards__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Плоский перечень: без рамок и теней, как у городов отправления. */
.price-cards--plain { gap: 32px var(--space-grid-col); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .price-cards--plain { grid-template-columns: minmax(0, 1fr); } }
.price-cards--plain .price-cards__card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.price-cards__layout--with-slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.82fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.price-cards__slot { min-width: 0; }
/* Слот под карточками: слева, не шире токена слота. */
.price-cards__slot--below { max-inline-size: var(--width-slot); margin-block-start: 32px; }

/* На главной экспедитора типы перевозки и документы читаются как перечни рядом с формой. */
:is(#freight-types, #shipping-documents) .price-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-block-start: 1px solid var(--color-border);
}
:is(#freight-types, #shipping-documents) .section__title { max-width: 430px; }
:is(#freight-types, #shipping-documents) .price-cards__content { min-width: 0; }
:is(#freight-types, #shipping-documents) .price-cards__slot {
  position: sticky;
  top: 24px;
}

:is(#freight-types, #shipping-documents) .price-cards__card {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px 10px;
  align-items: center;
  padding: 26px 0;
  border: 0;
  border-block-end: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
}

:is(#freight-types, #shipping-documents) .price-cards__card::before {
  display: grid;
  width: 26px;
  height: 26px;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  color: var(--color-accent);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  place-items: center;
}

#freight-types .price-cards__card:nth-child(1)::before { content: "FCL"; }
#freight-types .price-cards__card:nth-child(2)::before { content: "LCL"; }
#freight-types .price-cards__card:nth-child(3)::before { content: "AIR"; }
#shipping-documents .price-cards__card::before {
  content: "≡";
  border-radius: var(--radius-sm);
  font-size: 15px;
  letter-spacing: 0;
}
:is(#freight-types, #shipping-documents) .price-cards__title { margin: 0; }
:is(#freight-types, #shipping-documents) .price-cards__card > .prose {
  grid-column: 1 / -1;
  margin: 0;
}
:is(#freight-types, #shipping-documents) .price-cards__card > .prose p + p { margin-block-start: 16px; }
:is(#freight-types, #shipping-documents) .price-cards__card > .prose strong {
  display: block;
  margin-block-end: 4px;
  color: var(--color-text);
}

@media (max-width: 700px) {
  .price-cards__layout--with-slot { grid-template-columns: minmax(0, 1fr); }
  :is(#freight-types, #shipping-documents) .price-cards__slot {
    position: static;
    width: min(100%, 620px);
  }
}

}