/* ============================================
   Common levels for cards that stand in one row (loaded last on every inner page, see base.html).
   Rule of the site: inside sibling cards the label, title, text and button start at the same height,
   even when a neighbour's title takes one more line. The cards share the row tracks of their parent grid (subgrid);
   browsers without subgrid simply keep the layouts from the component stylesheets.
   Check: site/tools/qa-levels.js
   ============================================ */

/* ---- hero facts: the big value sits on the top line of every cell, the caption may wrap below it ---- */
.ph-fact, .pnh-fact{ justify-content: flex-end; }

/* ---- small things that need no subgrid ---- */
.dcx a{ grid-template-rows: auto 1fr auto; }                 /* document summary cards: «Подробнее» on the bottom line */

@supports (grid-template-rows: subgrid){

  /* ---- ruled list of features (.fx): title | text ---- */
  .fx > li{ display: grid; grid-template-rows: subgrid; grid-row: span 2; align-content: start; }

  /* ---- series specs in the comparison rows: caption | value ---- */
  .pcl-specs > div{ display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; align-content: start; }

  /* ---- photo tiles (.aud): spacer | kicker | name | text | chips.
     The tile used to have a min-height and text pinned to the bottom, so a longer name pushed the kicker up.
     Now the free space above the text is a row of its own, shared by the whole row of tiles. ---- */
  .aud-tile{ display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; min-height: 0; --aud-top: 110px; }
  .aud-xl, .aud-l{ min-height: 0; --aud-top: clamp(150px, 20vh, 220px); }
  .aud-t{ min-height: 0; --aud-top: 130px; }
  .aud-tile::before{ content: ""; grid-row: 1; min-height: var(--aud-top); }
  .aud-body{ grid-row: 2 / span 4; display: grid; grid-template-rows: subgrid; row-gap: 8px; align-content: start; }
  .aud-kicker{ grid-row: 1; }
  .aud-name{ grid-row: 2; }
  .aud-text{ grid-row: 3; }
  .aud-chips{ grid-row: 4; }
  @media (max-width: 620px){
    .aud-tile, .aud-xl, .aud-l, .aud-t{ min-height: 0; --aud-top: 100px; }
  }

  /* ---- old content cards (.cd-grid): photo | kicker | name | text | specs | link ---- */
  .cd-grid > .cd-card{ display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 0; }
  .cd-card > a, .cd-in{ display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; row-gap: 0; height: auto; }
  .cd-media{ grid-row: 1; }
  .cd-body{ grid-row: 2 / span 5; display: grid; grid-template-rows: subgrid; row-gap: 0; gap: 0; align-content: start; }
  .cd-kicker{ grid-row: 1; }
  .cd-name{ grid-row: 2; }
  .cd-kicker + .cd-name{ margin-top: 8px; }
  .cd-text{ grid-row: 3; margin-top: 8px; }
  .cd-specs{ grid-row: 4; margin-top: 12px; }
  .cd-more{ grid-row: 5; align-self: end; margin-top: 8px; }

  /* ---- model cards (.md-grid): photo | tag | name | text ---- */
  .md-grid > .md-card{ display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
  .md-card > a, .md-in{ display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; row-gap: 0; height: auto; }
  .md-media{ grid-row: 1; }
  .md-body{ grid-row: 2 / span 3; display: grid; grid-template-rows: subgrid; row-gap: 0; gap: 0; align-content: start; }
  .md-tag{ grid-row: 1; }
  .md-name{ grid-row: 2; }
  .md-tag + .md-name{ margin-top: 6px; }
  .md-text{ grid-row: 3; margin-top: 6px; }

  /* ---- hub and «related» cards (.hb-grid): photo | meta | name | chips | text ---- */
  .hb-grid > .hb-card{ display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; }
  .hb-grid > .hb-card[hidden]{ display: none; }
  .hb-card > a{ display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; row-gap: 0; height: auto; }
  .hb-media{ grid-row: 1; }
  .hb-card .hb-body{ grid-row: 2 / span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; gap: 0; align-content: start; }
  .hb-meta{ grid-row: 1; }
  .hb-name{ grid-row: 2; margin-top: 8px; }
  .hbx-chips{ grid-row: 3; margin-top: 8px; padding-top: 0; }
  .hb-text{ grid-row: 4; margin-top: 8px; }
  /* the featured article of the blog spans two columns and two rows of cards and keeps its own layout */
  @media (min-width: 761px){
    .hb-grid.hb-featured:not(.is-filtered) > .hb-card:first-child{ display: block; grid-row: span 10; }
    .hb-grid.hb-featured:not(.is-filtered) > .hb-card:first-child > a{ display: flex; height: 100%; }
    .hb-grid.hb-featured:not(.is-filtered) > .hb-card:first-child .hb-body{ display: flex; }
    .hb-grid.hb-featured:not(.is-filtered) > .hb-card:first-child .hb-name,
    .hb-grid.hb-featured:not(.is-filtered) > .hb-card:first-child .hb-text{ margin-top: 0; }
  }

  /* ---- project cases (.auc): photo on the left, year | title | text | link on the right ---- */
  @media (min-width: 521px){
    .auc > li{ display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
    .auc-card{ grid-template-rows: subgrid; grid-row: 1 / -1; row-gap: 0; height: auto; }
    .auc-media{ grid-row: 1 / -1; }
    .auc-body{ grid-column: 2; grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; row-gap: 0; gap: 0; align-content: start; justify-items: start; }
    .auc-year{ grid-row: 1; margin-bottom: 10px; }
    .auc-body > b{ grid-row: 2; }
    .auc-text{ grid-row: 3; margin-top: 10px; }
    .auc-go{ grid-row: 4; align-self: end; margin-top: 10px; }
  }

  /* ---- calculator presets: name | numbers ---- */
  .hyc-presets button{ grid-template-rows: subgrid; grid-row: span 2; row-gap: 5px; gap: 5px; align-content: start; }
  .hyc-press button{ grid-template-rows: none; grid-row: auto; align-content: center; }   /* buttons of typical pressures hold one number — nothing to align */

  /* ---- order steps (.pno-steps) while they stand in a row: number | title | text ---- */
  @media (min-width: 901px){
    .pno-steps > li{ display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; justify-items: start; align-content: start; }
  }
}

/* the first card of a hub loses its «featured» size when a filter is on or on phones — it is a normal card again */
@supports (grid-template-rows: subgrid){
  .hb-grid.hb-featured.is-filtered > .hb-card:first-child{ grid-row: span 5; }
  @media (max-width: 760px){ .hb-grid.hb-featured > .hb-card:first-child{ grid-row: span 5; } }
}

@supports (grid-template-rows: subgrid){
  /* ---- SMC catalogue groups: head | list of sub-groups — the dividing line stays on one level ---- */
  .smc-groups > .smc-group{ display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; align-content: start; }
  .smc-group-links{ align-content: start; }

  /* ---- catalogue bento on /products: card body | chips of series. A big card takes two rows of cards. ---- */
  .pnc-grid > .pnc-card{ display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; }
  .pnc-grid > .pnc-xl{ display: flex; grid-row: span 4; }
  .pnc-chips{ align-content: start; }
}

@supports (grid-template-rows: subgrid){
  /* ---- «Как выбрать» points of a product group: title | text ---- */
  @media (min-width: 821px){
    .pgd-list > li{ display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; align-content: start; }
  }
  /* long names of SMC sub-groups must wrap inside the card, not widen the page on phones */
  .smc-groups > .smc-group > *{ min-width: 0; }
  .smc-group-links a{ overflow-wrap: anywhere; }
}

/* Cards with optional rows (no chips, no kicker, no text…): the parent's row gap would stay inside the card
   as an empty 16px band for every missing row. So these grids have no row gap at all,
   and the distance between rows of cards is the bottom margin of a card (taken back after the last row). */
@supports (grid-template-rows: subgrid){
  .hb-grid, .cd-grid, .md-grid, .aud, .auc{ --lv-gap: 16px; row-gap: 0; margin-bottom: calc(-1 * var(--lv-gap)); }
  .aud, .auc{ --lv-gap: 14px; }
  .hb-grid > .hb-card, .cd-grid > .cd-card, .md-grid > .md-card, .aud > .aud-tile, .auc > li{ margin-bottom: var(--lv-gap); }
  @media (max-width: 760px){ .cd-grid.cd-m2{ --lv-gap: 10px; row-gap: 0; } }
}

/* the photo of the featured article fills the card and must not set its height:
   otherwise a tall photo stretches the two rows of cards beside it */
@supports (grid-template-rows: subgrid){
  @media (min-width: 761px){
    .hb-grid.hb-featured:not(.is-filtered) > .hb-card:first-child .hb-media img{ position: absolute; inset: 0; }
    .hb-grid.hb-featured:not(.is-filtered) > .hb-card:first-child .hb-media{ min-height: 0; }
  }
}

/* A card that used to be a flex column with `justify-content: flex-end` (text pinned to the bottom) keeps that
   property as a grid — and there it pushes the only column to the right edge and shrinks it to the text width.
   Every card with one column takes the full width again. */
@supports (grid-template-rows: subgrid){
  .aud-tile, .fx > li, .pcl-specs > div, .cd-grid > .cd-card, .cd-card > a, .cd-in, .cd-body, .md-grid > .md-card, .md-card > a, .md-in, .md-body,
  .hb-grid > .hb-card, .hb-card > a, .hb-card .hb-body, .auc > li, .pno-steps > li, .smc-groups > .smc-group, .pnc-grid > .pnc-card, .pgd-list > li, .aud-body{
    justify-content: normal;
  }
  .aud-tile{ grid-template-columns: minmax(0, 1fr); }
}

/* Calculators (payback in automation, drive in hydraulics): label | field | hint of two neighbouring inputs on common levels
   (a label that wraps to two lines used to push its field below the neighbour's).
   «Смен в сутки» is a div with a caption, not fieldset + legend: a legend cannot be a grid item. */
.aur-f .aur-l{ font: 600 14px/1.3 var(--font-display); color: var(--ink); }
@supports (grid-template-rows: subgrid){
  /* only while the inputs stand in pairs; in one column (phones) there is nothing to align */
  @media (min-width: 561px){
    .aur-in > .aur-f:not(.aur-f-wide){ grid-template-rows: subgrid; grid-row: span 3; row-gap: 8px; }
    .aur-in > .aur-f input[type=range]{ align-self: center; margin: 0; }
  }
  @media (min-width: 981px){
    .hyc .aur-in{ grid-template-rows: repeat(7, auto) 1fr; }   /* 2 rows of inputs x 3 lines, presets, formulas take the rest */
  }
}