/* Avakode Hub — the family pages: /audits/, /compliance/, /bridges/, /wordpress/ (lane 2.3, plan §4 «Семейство», mockup Б).
   Loaded on every family page, with or without a stage. The stages of the full scenes are scene.css (the common part) and
   scenes/<scene>.css (one file per scene). The rhythm is the home page's: a 72 px bar, the rail on the left (--hub-gut), sections
   split by hairlines, type first. No shadows, no glass; motion = the reveal of hub.css (transform and opacity on var(--ease)).
   One primary button per screen is the header's, so the buttons here are all ghost pills (avakode_hub_family_actions()). */

.hub-family { --hub-ok: #9FE8C3; } /* «live»; the same green as the board's badge (board.css is not loaded on these pages) */

/* intro: silkscreen, the family's heading, its checked intro */
.hub-family__intro { position: relative; padding: 88px 0 56px; }
body.hub-page .hub-family__title {
  max-width: 14ch; margin: 16px 0 0; overflow-wrap: break-word;
  font-size: clamp(54px, 8.4vw, 124px); line-height: .94; letter-spacing: -.035em;
}
.hub-family__lead { max-width: 54ch; margin: 28px 0 0; color: var(--fg-2); font-size: 19px; }

/* a full block: the set and the products of the other families */
.hub-family__list { padding-bottom: 32px; }
.hub-product { position: relative; padding: 56px 0 64px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--hub-bar) + 16px); }
.hub-product--scene { padding: 0 0 64px; border-top: 0; }
.hub-product__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 48px; align-items: end; }
.hub-product__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.hub-product__tags:empty { display: none; }
body.hub-page .hub-product__name { font-size: clamp(36px, 4.6vw, 64px); line-height: .98; letter-spacing: -.03em; overflow-wrap: break-word; }
.hub-product__phrase { max-width: 56ch; margin: 14px 0 0; color: var(--fg-2); }
.hub-product__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.hub-product__price { margin: 0; font: 500 13px/1.4 var(--mono); letter-spacing: .06em; color: var(--signal-hot); }
.hub-product__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hub-product__host { margin: 0; font: 400 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--muted); }
.hub-product .hub-scene { margin-top: 40px; }
.hub-product--scene .hub-scene { margin-top: 0; }

/* the status of a product («live»; «bundle» for the set) */
.hub-status {
  display: inline-block; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap;
  color: var(--fg-2); font: 500 10px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.hub-status--live { color: var(--hub-ok); border-color: rgba(159,232,195,.3); }

/* the plugins of /wordpress/: one grid, cells split by hairlines (the mockup's four columns) */
.hub-plugins { padding: 56px 0 72px; border-top: 1px solid var(--line); }
body.hub-page .hub-plugins__title { margin: 0 0 32px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1; letter-spacing: -.03em; }
.hub-plugins__grid {
  /* lane 5.4: as on the board — columns from the card's minimum, four at most; a last card alone keeps the width of the
     ones above it. Lane 5.8: the minimum is the board's plugin card (344 px; 256 px held the price, buttons and host but
     gave four columns at 1440 and a logo of 27 px ink against 42 px on the home: one logo size on the site comes first) */
  --hub-card-min: 344px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(max(min(var(--hub-card-min), 100%), 25%), 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.hub-plugin {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px 20px 20px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--hub-bar) + 16px);
}
.hub-plugin .hub-product__tags { margin: 0 0 4px; }
.hub-plugin__name { font-size: 24px; line-height: 1.05; letter-spacing: -.02em; overflow-wrap: break-word; }
/* lane 5.4 (owner 16.10): the head is the plugin's logo (avakode_hub_logo(), one height for all twelve, the width by its
   proportion, at the left) with the status beside it; the phrase under it is one height on all twelve — the most lines
   any of the twelve takes at this width (--hub-one-lines by width below; min-height, never a cut) */
.hub-plugin__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; margin: 0 0 4px; }
/* lane 5.8: the logo's size as on the board (board.css: one frame, 52.08 px, ≤ 480 px 41.66 px, 18.34cqi keeps the
   widest inside); the container is the name, the head's whole width (the status is on the top edge) */
body.hub-page .hub-plugin__name:has(.hub-plogo) { margin: 0; line-height: 0; min-width: 0; flex: 1 1 0; container-type: inline-size; }
.hub-plogo { position: relative; display: inline-block; vertical-align: top; }
.hub-plogo__img { display: block; width: auto; height: min(52.08px, 18.34cqi); }
@media (max-width: 480px) { .hub-plogo__img { height: min(41.66px, 18.34cqi); } }
/* lane 5.16 (owner 16.10): the heading of a product's block is its logo, the mark as big as the header's (the plugin logos'
   height: 52.08 px, ≤ 480 px 41.66 px); the heading is the size container, 100cqi / --hub-prodlogo-ar (the file's own
   width / height) keeps a logo whole in a narrow column. Never squeezed. tests/prodlogo.test.mjs checks the numbers. */
body.hub-page .hub-product__name--logo { margin: 0; line-height: 0; container-type: inline-size; }
.hub-prodlogo { position: relative; display: inline-block; vertical-align: top; }
.hub-prodlogo__img { display: block; width: auto; height: min(52.08px, calc(100cqi / var(--hub-prodlogo-ar))); }
@media (max-width: 480px) { .hub-prodlogo__img { height: min(41.66px, calc(100cqi / var(--hub-prodlogo-ar))); } }
.hub-plugin__phrase { margin: 0; color: var(--fg-2); font-size: 14.5px; line-height: 1.45; min-height: calc(var(--hub-one-lines, 2) * 14.5px * 1.45); }
/* the «Preview · hidden on release» label: a tab on the top edge of the card or the block, out of the flow */
.hub-plugin > .hub-preview-tag,
.hub-product__id > .hub-preview-tag { position: absolute; z-index: 2; top: 0; margin: 0; transform: translateY(-50%); background: var(--bg); }
.hub-plugin > .hub-preview-tag { left: 20px; }
/* lane 5.8 (coordinator 16.10): a plugin's status is a label on the card's top edge, where the board puts «Preview», so the
   logo has the head's whole width and is as high as on the home; with a preview label too, the status takes the right end */
.hub-plugin > .hub-status { position: absolute; z-index: 2; top: 0; left: 20px; margin: 0; transform: translateY(-50%); background: var(--bg); }
.hub-plugin > .hub-preview-tag ~ .hub-status { left: auto; right: 20px; }
/* the most lines of the twelve phrases by width (measured 16.10, every px from 320 to 1440: 2 from 562, 3 at 561 — two
   narrow columns, 1 at 486–560 in one column, 2 under 486), each range widened so a slightly wider font never adds a line;
   tests/e2e/cards-v2.e2e.mjs sweeps 360–1440 */
/* measured 16.10 on the round 2 columns (320–1924): 1 line at 486–588, 2 elsewhere; the one-line range narrowed by ~30 px */
@media (min-width: 516px) and (max-width: 558px) { .hub-plugins__grid { --hub-one-lines: 1; } }
.hub-plugin__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: auto; padding-top: 14px; }
.hub-plugin__price { margin: 0; font: 500 12.5px/1.4 var(--mono); letter-spacing: .04em; color: var(--signal-hot); }
.hub-plugin__host { margin: 0; font: 400 11.5px/1.4 var(--mono); letter-spacing: .04em; color: var(--muted); overflow-wrap: anywhere; }

/* a product shown through also_in: one line to its home page */
.hub-family__also { border-top: 1px solid var(--line); }
.hub-family__also p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0; padding: 22px 0; }
body.hub-page .hub-family__also a { font: 500 20px/1.2 var(--display); color: var(--fg); }
body.hub-page .hub-family__also a:hover { color: var(--signal-hot); }
.hub-family__also a i { font-style: normal; }
.hub-family__also-phrase { color: var(--fg-2); }
.hub-family__also-home { font: 400 11px/1.6 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* the foot: the other families, three hairline columns */
.hub-family__others { padding: 56px 0 96px; border-top: 1px solid var(--line); }
body.hub-page h2.hub-eyebrow { margin: 0 0 24px; font: 500 11px/1.6 var(--mono); }
.hub-family__others-list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.hub-family__others-list li + li { border-left: 1px solid var(--line); }
.hub-family__others-list a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 28px 24px 26px; }
.hub-family__others-list li:first-child a { padding-left: 0; }
.hub-family__others-code { font: 500 11px/1.6 var(--mono); letter-spacing: .22em; color: var(--muted); }
.hub-family__others-name { font: 500 30px/1.05 var(--display); letter-spacing: -.02em; transition: color .4s var(--ease); }
.hub-family__others-name i { display: inline-block; margin-left: 6px; font-style: normal; color: var(--signal-hot); transition: transform .5s var(--ease); }
.hub-family__others-list a:hover .hub-family__others-name { color: var(--signal-hot); }
.hub-family__others-list a:hover .hub-family__others-name i { transform: translateX(4px); }
.hub-family__others-title { color: var(--fg-2); font-size: 15px; }
.hub-family__others-count { margin-top: auto; padding-top: 6px; font: 500 12px/1.4 var(--mono); letter-spacing: .06em; color: var(--signal-hot); }

@media (max-width: 960px) {
  .hub-family__intro { padding: 56px 0 40px; }
  .hub-family__lead { margin-top: 20px; font-size: 17px; }
  .hub-product { padding: 40px 0 48px; }
  .hub-product--scene { padding: 0 0 48px; }
  .hub-product__head { grid-template-columns: minmax(0, 1fr); }
  .hub-product__meta { align-items: flex-start; }
  .hub-product .hub-scene { margin-top: 28px; }
  .hub-plugins { padding: 40px 0 56px; }
  .hub-family__others { padding: 40px 0 72px; }
}
@media (max-width: 860px) {
  .hub-family__others-list { grid-template-columns: minmax(0, 1fr); }
  .hub-family__others-list li + li { border-left: 0; border-top: 1px solid var(--line); }
  .hub-family__others-list li:first-child a { padding-left: 0; }
  .hub-family__others-list a { padding: 22px 0; }
}
@media (max-width: 560px) {
  body.hub-page .hub-family__title { font-size: clamp(40px, 11vw, 54px); }
  .hub-family__others-name { font-size: 26px; }
}

/* lane 5.15 (owner 16.10): the head of a plugin's stage on /wordpress/ (template-parts/family-stage-head.php) is the head of a
   product block (.hub-product__head: label, title, description, price and buttons at the right), with the plugin's logo for
   the title — the logo is the card's (.hub-plogo__img above: 52.08 px, 41.66 px up to 480 px), the title's own box is its
   container, as the card's name is. The stage keeps its caption under it. */
.hub-product--headed { padding: 56px 0 64px; border-top: 1px solid var(--line); }
.hub-product--headed .hub-scene { margin-top: 40px; }
body.hub-page .hub-product__name--logo { margin: 0; line-height: 0; min-width: 0; container-type: inline-size; }
@media (max-width: 960px) {
  .hub-product--headed { padding: 40px 0 48px; }
  .hub-product--headed .hub-scene { margin-top: 28px; }
}

/* lane 5.15, coordinator 16.10: the group «Also in WordPress» is not an unfinished grid. Its columns are /wordpress/'s (the same
   .hub-plugins__grid tracks, so the card and its logo are the same size), but with fewer cards than columns the grid's own top and
   left lines ran to the page's right edge past an empty cell. Here the grid draws nothing: each card is framed (collapsed
   borders: -1px right and bottom, a neighbour paints over the shared line), so the lines end at the last card whatever the
   count of columns (one on a phone, two at 768, up to four). */
.hub-plugins--also .hub-plugins__grid { border: 0; }
.hub-plugins--also .hub-plugin { border: 1px solid var(--line); margin: 0 -1px -1px 0; }