/*
 * /prajs-list/ (WP-11; boards Prajs 1440 and Prajs-mobile 390; page-prajs-list.php), on the tokens of css/base.css.
 * Loaded only on this page (body class k-type-prajs). The two-price tables, the theses and the help row are components
 * (css/components.css, template-parts/price-table.php); the form is css/dialogs.css. This file lays the stored text
 * out as the boards' sections:
 *   1. breadcrumbs, H1, intro paragraph;
 *   2. «Сколько стоит аренда компрессора»: theses, table, help row;
 *   3. «Продувка, опрессовка и пескоструй»: table, closing paragraph;
 *   4. the first stored pair on the pale band: «Что входит в аренду» | the «Где заказать…» card;
 *   5. the second pair on white: «Арендовать компрессор» with the form card | «Контактная информация».
 * The stored text is one flow inside .k-prajs__content: every child keeps the 1200 px column, the pairs span the page
 * and centre their own column. Breakpoints max-width 1199px, 1023px, 767px and the table component's 359px; checked
 * down to 320 px.
 */

/* ---------- 1. Breadcrumbs, H1 ---------- */

.k-type-prajs .k-prajs__head {
  padding-top: 28px;
}

.k-type-prajs .k-prajs__title {
  margin: 20px 0 0;
}

/* ---------- The stored text: one 1200 px column ---------- */

.k-type-prajs .k-prajs__content.page-text > * {
  margin-left: max(var(--k-gutter), calc((100% - var(--k-container)) / 2));
  margin-right: max(var(--k-gutter), calc((100% - var(--k-container)) / 2));
}

/* The intro (section 1) and the closing paragraph (section 3): a 760 px measure. */
.k-type-prajs .k-prajs__content.page-text > p {
  max-width: 760px;
  margin-top: 24px;
  margin-bottom: 0;
}

/* Sections 2 and 3 start 56 px under the text before them. */
.k-type-prajs .k-prajs__content.page-text > h2 {
  margin-top: 56px;
  margin-bottom: 0;
}

.k-type-prajs .k-prajs__content.page-text > .k-ptable {
  margin-top: 20px;
}

.k-type-prajs .k-prajs__content.page-text > .k-ptable--works {
  margin-top: 24px;
}

/* A TablePress table (the fallback of [kompresorii_prices] while the price options are empty, and the stored
   [table id=…] after a rollback of content bundle 2) sets width: 100% !important; inside the side margins above that
   would push it past the viewport, so it takes the column's width instead. */
.k-type-prajs .k-prajs__content.page-text > table {
  width: calc(100% - 2 * max(var(--k-gutter), calc((100% - var(--k-container)) / 2))) !important;
}

/* The board's empty action header cell is 170 px plus the cell's default 1 px sides (150 px below 1024 px). */
.k-type-prajs .k-ptable__table thead .k-ptable__action {
  width: 172px;
}

/* Before the stored group pairs (rollback of content bundle 2), the last text still ends above the footer. */
.k-type-prajs .k-prajs__content.page-text > :last-child:not(.kmp-prajs-pair) {
  margin-bottom: 72px;
}

/* ---------- 4 and 5. The stored pairs: main text | side, 672 + 480 with a 48 px gap ---------- */

.k-type-prajs .k-prajs__content.page-text > .kmp-prajs-pair {
  margin: 72px 0 0;
  padding: 72px 0;
  background: var(--k-band);
}

.k-type-prajs .k-prajs__content.page-text > .kmp-prajs-pair ~ .kmp-prajs-pair {
  margin-top: 0;
  background: var(--k-white);
}

.k-type-prajs .kmp-prajs-pair > .wp-block-group__inner-container {
  width: 100%;
  max-width: calc(var(--k-container) + 2 * var(--k-gutter));
  margin: 0 auto;
  padding: 0 var(--k-gutter);
  display: grid;
  /* 1024–1199: the side keeps 400 px, so «Контактная информация» stays on one line. */
  grid-template-columns: minmax(0, 672fr) minmax(400px, 480fr);
  gap: 48px;
  align-items: start;
}

.k-type-prajs .kmp-prajs-pair .wp-block-group {
  min-width: 0;
  margin: 0;
}

.k-type-prajs .kmp-prajs-pair .wp-block-group__inner-container > :first-child {
  margin-top: 0;
}

.k-type-prajs .kmp-prajs-pair .wp-block-group__inner-container > :last-child {
  margin-bottom: 0;
}

.k-type-prajs .kmp-prajs-pair h2.wp-block-heading {
  margin: 0;
}

/* «Что входит в аренду»: the check-mark list (kompresorii_prajs_content()), then the links paragraph. */
.k-type-prajs .kmp-prajs-main .k-icon-list {
  margin: 20px 0 0;
}

.k-type-prajs .kmp-prajs-main .k-icon-list + p {
  max-width: 620px;
  margin: 20px 0 0;
}

/* «Где заказать аренду компрессоров»: a white card. */
.k-type-prajs .kmp-prajs-pair:not(.kmp-prajs-pair ~ .kmp-prajs-pair) .kmp-prajs-side {
  padding: 32px;
  border: 1px solid var(--k-hairline);
  border-radius: var(--k-radius-card);
  background: var(--k-white);
}

.k-type-prajs .kmp-prajs-pair:not(.kmp-prajs-pair ~ .kmp-prajs-pair) .kmp-prajs-side h2.wp-block-heading {
  font-size: 24px;
  line-height: 30px;
  letter-spacing: 0;
}

.k-type-prajs .kmp-prajs-pair:not(.kmp-prajs-pair ~ .kmp-prajs-pair) .kmp-prajs-side h2 + p {
  margin: 16px 0 0;
}

/* «Арендовать компрессор»: the form in a card. */
.k-type-prajs .kmp-prajs-main .wpcf7 {
  margin-top: 24px;
  padding: 32px;
  border: 1px solid var(--k-hairline);
  border-radius: var(--k-radius-card);
  background: var(--k-white);
}

/* «Контактная информация»: the stored contact lines as the boards' list (kompresorii_prajs_content()). */
.k-type-prajs .k-prajs-contacts {
  margin: 24px 0 0;
  padding: 32px;
  list-style: none;
  border-radius: var(--k-radius-card);
  background: var(--k-band);
}

.k-type-prajs .k-prajs-contacts__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--k-hairline);
}

.k-type-prajs .k-prajs-contacts__item:first-child {
  padding: 0 0 20px;
  border-top: 0;
}

.k-type-prajs .k-prajs-contacts__item:first-child:last-child {
  padding-bottom: 0;
}

.k-type-prajs .k-prajs-contacts__item > .k-ui-icon {
  flex: none;
  margin-top: 2px;
  color: var(--k-blue);
}

.k-type-prajs .page-text .k-prajs-contacts__text {
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.k-type-prajs .k-prajs-contacts__label {
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  color: var(--k-muted);
}

.k-type-prajs .k-prajs-contacts__value {
  font-size: 17px;
  line-height: 1.55;
  color: var(--k-ink);
}

.k-type-prajs .page-text .k-prajs-contacts__value a {
  display: block;
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  color: var(--k-ink);
  text-decoration: none;
  white-space: nowrap;
}

.k-type-prajs .page-text .k-prajs-contacts__value a:hover {
  color: var(--k-blue);
}

/* ---------- 768–1023: the pairs stack (text, then the card; the form, then the contacts) ---------- */

@media (max-width: 1023px) {
  .k-type-prajs .k-ptable__table thead .k-ptable__action {
    width: 150px;
  }

  /* Section spacing 56 px, as on the other pages at these widths (72 px from 1024). */
  .k-type-prajs .k-prajs__content.page-text > .kmp-prajs-pair {
    margin-top: 56px;
    padding: 56px 0;
  }

  .k-type-prajs .k-prajs__content.page-text > .kmp-prajs-pair ~ .kmp-prajs-pair {
    margin-top: 0;
  }

  .k-type-prajs .k-prajs__content.page-text > :last-child:not(.kmp-prajs-pair) {
    margin-bottom: 56px;
  }

  .k-type-prajs .kmp-prajs-pair > .wp-block-group__inner-container {
    display: block;
  }

  .k-type-prajs .kmp-prajs-pair:not(.kmp-prajs-pair ~ .kmp-prajs-pair) .kmp-prajs-side {
    margin-top: 32px;
  }

  .k-type-prajs .kmp-prajs-pair ~ .kmp-prajs-pair .kmp-prajs-side {
    margin-top: 48px;
  }

  .k-type-prajs .kmp-prajs-main .k-icon-list + p {
    max-width: none;
  }
}

/* ---------- Phones (Prajs-mobile) ---------- */

@media (max-width: 767px) {
  .k-type-prajs .k-prajs__head {
    padding-top: 20px;
  }

  .k-type-prajs .k-prajs__title {
    margin-top: 14px;
  }

  .k-type-prajs .k-prajs__content.page-text > p {
    max-width: none;
    margin-top: 16px;
  }

  .k-type-prajs .k-prajs__content.page-text > h2 {
    margin-top: 28px;
  }

  .k-type-prajs .k-prajs__content.page-text > .k-ptable {
    margin-top: 16px;
  }

  .k-type-prajs .k-prajs__content.page-text > .k-ptable--works + p {
    margin-top: 20px;
  }

  .k-type-prajs .k-ptable .k-help--row {
    margin-top: 12px;
    padding: 14px 16px 16px;
  }

  .k-type-prajs .k-prajs__content.page-text > :last-child:not(.kmp-prajs-pair) {
    margin-bottom: 32px;
  }

  .k-type-prajs .k-prajs__content.page-text > .kmp-prajs-pair {
    margin-top: 32px;
    padding: 24px 0 28px;
  }

  .k-type-prajs .k-prajs__content.page-text > .kmp-prajs-pair ~ .kmp-prajs-pair {
    margin-top: 0;
  }

  .k-type-prajs .kmp-prajs-main .k-icon-list {
    margin-top: 12px;
    gap: 8px;
  }

  .k-type-prajs .kmp-prajs-main .k-icon-list > li {
    gap: 10px;
  }

  .k-type-prajs .kmp-prajs-main .k-icon-list > li > .k-ui-icon--check {
    width: 24px;
    height: 24px;
    margin-top: 0;
  }

  .k-type-prajs .kmp-prajs-main .k-icon-list + p {
    margin-top: 12px;
  }

  .k-type-prajs .kmp-prajs-pair:not(.kmp-prajs-pair ~ .kmp-prajs-pair) .kmp-prajs-side {
    margin-top: 16px;
    padding: 16px;
  }

  .k-type-prajs .kmp-prajs-pair:not(.kmp-prajs-pair ~ .kmp-prajs-pair) .kmp-prajs-side h2.wp-block-heading {
    font-size: 22px;
    line-height: 28px;
  }

  .k-type-prajs .kmp-prajs-pair:not(.kmp-prajs-pair ~ .kmp-prajs-pair) .kmp-prajs-side h2 + p {
    margin-top: 12px;
  }

  .k-type-prajs .kmp-prajs-main .wpcf7 {
    margin-top: 16px;
    padding: 16px;
  }

  .k-type-prajs .kmp-prajs-pair ~ .kmp-prajs-pair .kmp-prajs-side {
    margin-top: 32px;
  }

  .k-type-prajs .k-prajs-contacts {
    margin-top: 16px;
    padding: 16px;
  }

  .k-type-prajs .k-prajs-contacts__item {
    gap: 12px;
    padding-top: 14px;
  }

  .k-type-prajs .k-prajs-contacts__item:first-child {
    padding: 0 0 12px;
  }

  .k-type-prajs .page-text .k-prajs-contacts__text {
    gap: 0;
  }

  /* The phone number keeps its own text box, 2 px under «Телефон» as at 1440, so the focus ring (base.css) stays clear
     of the label; ::after makes the 44 px tap target of Prajs-mobile. The line stays 30 px, as on the board. */
  .k-type-prajs .page-text .k-prajs-contacts__value a {
    position: relative;
    width: fit-content;
    margin-top: 2px;
  }

  .k-type-prajs .page-text .k-prajs-contacts__value a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 44px;
    transform: translateY(-50%);
  }

  .k-type-prajs .k-prajs-contacts__value {
    font-size: 16px;
    line-height: 24px;
  }

  /* The table rows: the board's 116 + 104 px price columns from 380 px up. Narrower, the two price columns give way
     equally down to 109 + 91 px (where «Цена за смену» and «Цена с НДС» still fit on one line) and the action column
     keeps the button's 114 + 12 px; that holds down to 360 px. */
  .k-type-prajs .k-ptable__table tr {
    grid-template-columns: minmax(109px, 116px) minmax(91px, 104px) minmax(126px, 1fr);
  }
}

/* ---------- Narrow phones (320–359): 10 px cell sides, an 8 px button side ---------- */

@media (max-width: 359px) {
  /* The headers stay on one line down to 344 px (107 + 89 px); below that they read «Цена / за смену» and
     «Цена / с НДС» (prepositions bound in price-table.php), bottom-aligned above their columns. */
  .k-type-prajs .k-ptable__table tr {
    grid-template-columns: minmax(90px, 107px) minmax(74px, 89px) minmax(114px, 1fr);
  }

  .k-type-prajs .k-ptable__table thead th {
    white-space: normal;
  }

  .k-type-prajs .k-ptable__table thead th.k-ptable__price,
  .k-type-prajs .k-ptable__table thead th.k-ptable__vat {
    align-self: end;
  }

  .k-type-prajs .k-ptable__table thead th.k-ptable__price,
  .k-type-prajs .k-ptable__table thead th.k-ptable__vat,
  .k-type-prajs .k-ptable__table tbody td.k-ptable__price,
  .k-type-prajs .k-ptable__table tbody td.k-ptable__vat {
    padding-left: 10px;
  }

  .k-type-prajs .k-ptable__table .k-button--small {
    padding: 0 8px;
  }
}