/* ==========================================================================
   Page layout - Блог, rendered by news.tpl (and the article page, snews.tpl,
   which is not built yet).

   Composition only. Every value is from the Blog frame (1006:2418), which is
   one of the three frames carrying the whole-frame 5px shift: its footer sits
   at 168/1062 where the Academy and Careers frames sit at 163/1057. The shift
   does NOT reach the content - the featured article sits at x366 on this
   frame and on all four others that draw a hero, and the card grid's painted
   edges land on 321 and 1598 exactly. Only the footer is shifted here.

   The container is confirmed rather than assumed. Scanning a pixel row across
   the grid finds the cards painted from 321 to 1598: 1278 wide, centred, with
   321px gutters - the same 1278 the nav sets and DESIGN.md's Container Debt
   Rule names as the majority reading. The 420x280 node boxes are the art
   without its 2px of shadow bleed, so 3x420 + 2x7 = 1274 sits inside 1278
   with the shadow filling the difference.
   ========================================================================== */

.p-blog{
  background:var(--c-field);
  /* NO PADDING BELOW ANY MORE. The frame's 67 was the gap between its third
     card row and the footer band, and it was the whole of what this page put
     between its content and the site's chrome - which is what made open
     question 15 a question. The page closes with `.c-cta-band` now, like
     every other surface in the design, and the band meets the footer the way
     it does on the other five. */
}

.p-blog__crumbs{
  width:min(var(--c-container), 100% - 2 * var(--c-page-gutter));
  margin:20px auto 0;   /* y121, 20px under the 101px header band */
}

/* --- the page's h1 ------------------------------------------------------ */
/* Not in the frame, which draws no page title: it was a hidden line until the
   critique (28 Sep 2026) found nothing on screen said which page this was.
   The article page's head, number for number - 40 under the crumbs, 40 over
   the block - at the Headline role every visible h1 takes, 30 below 1120. */

.p-blog__head{
  width:min(var(--c-container), 100% - 2 * var(--c-page-gutter));
  margin:40px auto 0;
}
.p-blog__head .c-heading{
  font-size:var(--c-fs-headline);
  line-height:var(--c-lh-serif);
}

/* --- the featured article: the page hero, 1188x548 ---------------------- */

.p-blog__featured{
  width:min(var(--c-container), 100% - 2 * var(--c-page-gutter));
  margin:40px auto 0;   /* 40 under the h1, as the article's photograph */
  /* a FLOOR, not a height: `.c-hero` is a flex item that stretches to
     it and grows past it when the panel's own copy needs more
     (media.css, `.c-hero`). */
  display:flex;
  min-height:548px;
}

/* --- the card grid: 3 x 420x280 ---------------------------------------- */
/* Columns at x323/750/1177 and rows at y747/1041/1335 - a 7px column gutter
   and a 14px row gutter, which is much tighter than anything else in the
   system and is drawn that way on all nine cards. `justify-content:center`
   keeps the 1274 of cards centred in the 1278 container so the shadow bleed
   lands where the frame paints it. */

.p-blog__grid{
  width:min(var(--c-container), 100% - 2 * var(--c-page-gutter));
  margin:40px auto 0;   /* y747, 40 under the hero's 707 bottom */
  display:grid;
  grid-template-columns:repeat(3, 420px);
  justify-content:center;
  gap:14px 7px;
}

/* --- pagination --------------------------------------------------------- */
/* Not in the frame. It renders only when there is more than one page, so on a
   site with fewer than seven articles this page is exactly what the frame
   draws. The 40 is the grid's own row rhythm continued. */

.p-blog__pager{
  margin-top:40px;
}

/* ==========================================================================
   The article page - snews.tpl

   NO FRAME. Every value here is either borrowed from a measured object on the
   Blog frame (the 1188 column, the 548 photo slot, the 40px section rhythm)
   or from the precedent `pages.tpl` set for a frameless CMS page (one cream
   card at the card grid's 1230 with copy at the 521 measure). The template's
   own comment carries the reasoning; this file carries the numbers.
   ========================================================================== */

.p-article{ background:var(--c-field); }

.p-article__crumbs{
  width:min(var(--c-container), 100% - 2 * var(--c-page-gutter));
  margin:20px auto 0;   /* y121, the same 20 under the 101px header band */
}

/* --- title block -------------------------------------------------------- */
/* The chip's 2px stroke is Field Grey, which is this page's ground, so on
   cream it reads as a bare gold pill rather than a bordered one. That is the
   same object, not a variant. */

.p-article__head{
  width:min(var(--c-container), 100% - 2 * var(--c-page-gutter));
  margin:40px auto 0;
}

.p-article__head .c-datechip{ display:inline-flex; }

.p-article__head .c-heading{
  display:block;
  margin-top:var(--c-inset);
  /* a real article title is long; the 48px display needs a measure or it runs
     the full 1188 and reads as a banner rather than a heading */
  /* Less the rule's own 14px overhang, or a heading allowed to fill its
     column takes its tracked rule past the page gutter - the same cap
     `typography.css` puts on `.c-heading` at this width, restated because
     this selector is more specific and would otherwise beat it. */
  max-width:min(900px, 100% - 14px);
}

/* --- the article's photograph ------------------------------------------- */
/* The hero's own 1188x548 slot, so an article photo sits exactly where the
   featured article's did on the index the reader came from. Uploads vary in
   ratio, so the box is fixed and the image covers it. */

.p-article__media{
  width:min(var(--c-container), 100% - 2 * var(--c-page-gutter));
  /* 1188x548 is 2.168, and the ASPECT is what survives a narrower page: a
     fixed 548 under a 361px column is a letterbox with a portrait crop in
     it. */
  aspect-ratio:1188 / 548;
  margin:40px auto 0;
  border-radius:var(--c-r-surface);
  overflow:hidden;
  box-shadow:var(--c-sh-photo);
}

.p-article__media img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}

/* --- the body ----------------------------------------------------------- */

.p-article__body{
  /* width and padding come from .c-card--prose: the card IS the 521 measure
     plus its 40px sides, which is why the article's photograph above it is
     the wide object on this page and the reading column is the narrow one. */
  margin:40px auto 0;
}

.p-article__body .c-card__body{ margin-top:0; }

/* Aligned to the reading column rather than to the photograph above it: it
   closes the article, not the page. */
.p-article__back{
  width:min(calc(var(--c-measure) + 2 * var(--c-pad)), 100% - 2 * var(--c-page-gutter));
  margin:40px auto 0;
}

/* --- the closing contact band ------------------------------------------- */
/* The Услуги band, reused whole: same photograph, same 666 height, same card
   at 784/40. Nothing about it is re-derived here. */

/* The band is `.c-cta-band` in media.css. This page only says the gap. */
.p-article .c-cta-band,
.p-blog .c-cta-band{ margin-top:40px; }

/* ==========================================================================
   Below 1360 - the card row's three 420s and the closing band's pinned card.

   The floor is 420, the card's own designed width, not `.c-grid--3`'s 260: a
   260 floor packs FOUR tracks into the 1278 container and the row would go
   from three-up to four-up as the page got NARROWER. With 420 it goes
   3 -> 2 -> 1, which is the only monotonic reading - the same call
   `page-search.css` makes about the same card.
   ========================================================================== */

@media (max-width: 1359px){
  .p-blog__grid{
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    justify-content:stretch;
  }
}

@media (max-width: 1119px){
  .p-blog__head .c-heading{ font-size:var(--c-fs-display-sm); }
}

@media (max-width: 639px){
  /* The hero is `media.css`'s own object below 640 - full bleed, 390 tall. */
  .p-blog__head{ margin-top:24px; }
  .p-blog__featured{ width:100%; margin-top:24px; min-height:0; }
  /* 10 between stacked property and article cards, which is the photograph's
     own pitch on the Search and landing frames (738 -> 989 at a 241 card).
     The desktop 14/7 is the Blog grid's own. */
  .p-blog__grid{ gap:10px; margin-top:24px; }
  .p-blog__pager{ margin-top:24px; }

  .p-article__head{ margin-top:24px; }
  .p-article__media{ margin-top:24px; }
  .p-article__body,
  .p-article__back{ margin-top:24px; }
}