/* ==========================================================================
   Page layout - a CMS page rendered by pages.tpl: Услуги and its siblings
   (За нас, Политика за защита на личните данни, Общи условия).

   Composition only. Every value is from the Services frame (1006:2101), with
   that frame's whole-frame +5px shift removed - its footer sits at 168/1062
   where five of the eight frames sit at 163/1057.

   The frame's containers disagree with each other, as they do everywhere in
   this file: the hero is 1188 wide and the card grid is 1230, and neither is
   centred on the canvas. Both are centred here, which is the reconciliation
   DESIGN.md's Container Debt Rule asks for; the widths themselves are real and
   are kept.
   ========================================================================== */

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

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

/* --- hero: 1188x548, dark panel over the left 372 ----------------------- */

.p-page__hero{
  width:min(var(--c-container), 100% - 2 * var(--c-page-gutter));
  margin:24px auto 0;   /* y159 */
  /* 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;
}

/* --- what the agency takes on: the five guarantees ---------------------- */
/* Услуги only (services.tpl passes `promises`). The five binding commitments
   were point 2 of 11 in the first card, under a photograph; PRODUCT.md's
   second principle says they carry the persuasion, so they sit directly
   under the hero, before the lists (critique, 28 Sep 2026).

   Built from what the system has: the section heading, ONE Paper Cream card
   at the container's width, and five `.c-stat--promise` inside it (cards.css)
   divided by the gold rule the heading underlines already use - gold as a
   hairline, and no colour the page did not already carry. The green stays
   the heading rule's and the fold's; the figures are ink. */

.p-page__promises{
  width:min(var(--c-container), 100% - 2 * var(--c-page-gutter));
  margin:40px auto 0;   /* the grid's own 40 under the hero */
}

.p-page__promise-list{
  list-style:none;
  margin:30px 0 0;      /* the heading rule to the card */
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
}

.p-page__promise{
  padding:0 24px;
  border-left:1px solid var(--c-gold-rule);
}
.p-page__promise:first-child{ padding-left:0; border-left:0; }
.p-page__promise:last-child{ padding-right:0; }

/* --- card grid: 600x237 cards, 30px column gutter, 40px row gutter ------ */

/* 600 + 30 + 600 is the 1230, so two equal fractions at the frame's own
   column gutter ARE the frame's row - and they shrink the cards instead of
   widening the gap, which is what `space-between` around two fixed tracks
   did the moment the page was narrower than 1230. */
.p-page__cards{
  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(2, minmax(0, 1fr));
  gap:40px 30px;
  /* A CARD TAKES ITS OWN HEIGHT. The frame's cards are all 237 because its
     placeholder copy is six lines in each of them; the CMS holds numbered
     lists of eight to fourteen items and they differ by a factor of three, so
     a stretched row asserts an equivalence the content does not have and
     pays for it in cream - the second Услуги card came out with half its box
     empty under four lines of copy. `start` is the honest row: a ragged
     column bottom rather than a box that promises content it has not got.
     The other half of open question 4, `layout` 27 Aug 2026; the paragraph
     rhythm inside the card is in typography.css. */
  align-items:start;
}

.p-page__card{
  /* the frame's cards are a fixed 237; real CMS copy is not, so the height is
     a floor rather than a lock */
  min-height:237px;
  padding:20px 40px 40px;
}

.p-page__card .c-card__body{ margin-top:19px; }

/* --- the fold: each list's first four points, then «Вижте всички» -------- */
/* 46 points in four lists was the page's weight (critique, 28 Sep 2026).
   services.php cuts each list after its fourth point and the rest sits in a
   native <details>: a keyboard control and an announced state with no
   script, and with no script it still opens. The summary is `.c-more` - the
   section link's own 20/600 green - with a chevron that turns, and its two
   labels swap on [open]. The fold's body carries on the list's own rhythm:
   the summary sits in the 28px paragraph gap the fourth point leaves. */

.p-page__fold-toggle{
  list-style:none;           /* the UA's disclosure triangle */
  margin-top:-4px;           /* the gap is the paragraph's 28, not 32 */
}
.p-page__fold-toggle::-webkit-details-marker{ display:none; }
.p-page__fold-toggle::after{
  content:"";
  width:8px; height:8px;
  margin-top:-4px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform var(--c-ease);
}
.p-page__fold[open] > .p-page__fold-toggle::after{
  margin-top:4px;
  transform:rotate(-135deg);
}
.p-page__fold-toggle:focus-visible{
  outline:2px solid var(--c-green);
  outline-offset:4px;
  border-radius:var(--c-r-detail);
}
.p-page__fold-open{ display:none; }
.p-page__fold[open] .p-page__fold-open{ display:inline; }
.p-page__fold[open] .p-page__fold-closed{ display:none; }
.p-page__fold-body{ margin-top:28px; }

/* --- the closing contact band ------------------------------------------- */
/* The band itself is `.c-cta-band` in media.css - one component for the six
   surfaces that draw it. All this page says is the gap above it. */

.p-page .c-cta-band{ margin-top:40px; }   /* y1301, 40 under the grid's 1261 */

/* --- the plain-content variant ------------------------------------------ */
/* The pages with no cards - За нас, the policy pages - have no frame in the
   design file. They reuse the system's own measure rather than inventing a
   layout: one cream card at the card grid's width, body copy at the 521px
   measure the whole system uses. */

.p-page__content{
  /* width and padding come from .c-card--prose: the card IS the 521
     measure plus its 40px sides. */
  margin:40px auto 0;
}

/* .c-card__body's 521 cap used to be lifted here and re-applied by the page's
   own prose rule, but the two selectors were 0,2,0 against 0,1,0 - so the cap
   never came back and this card ran CMS copy at 1150, about 145 characters a
   line. .c-prose carries the measure now and nothing lifts it. */

/* Prose is .c-prose in typography.css - four templates render CMS copy
   and this block used to be copied into each of their stylesheets. */

.p-page__media{
  width:min(var(--c-container), 100% - 2 * var(--c-page-gutter));
  margin:24px auto 0;
}
.p-page__media img,
.p-page__media iframe{
  display:block;
  width:100%;
  border:0;
  border-radius:var(--c-r-surface);
}
.p-page__media iframe{ height:520px; }

/* ==========================================================================
   Below 1360 - the closing band stops being a fixed height with a card
   pinned inside it.

   x784 of a full-bleed 1920 band is 40.8333% of it, so the card is in the
   same place at the designed width and a proportion of the band anywhere
   else; below 1120 it flows and the band takes its height from it, because
   a 462px card holding a form is taller than a 666px band the moment the
   form's own fields start wrapping.
   ========================================================================== */

@media (max-width: 1119px){
  /* Two 600s at 1230 hold their proportion all the way down and their
     content does not: the card is a 24px title over a paragraph of real CMS
     copy, and DESIGN.md already records that this page's cards come out 792
     tall against the frame's 237. */
  .p-page__cards{ grid-template-columns:minmax(0, 1fr); }

  /* Five columns of a sentence each stop fitting before the card grid does;
     the strip becomes a list of rows - figure left, sentence right - with
     the gold rule between rows instead of between columns. */
  .p-page__promise-list{ grid-template-columns:minmax(0, 1fr); }
  .p-page__promise,
  .p-page__promise:first-child,
  .p-page__promise:last-child{
    padding:16px 0;
    border-left:0;
    border-top:1px solid var(--c-gold-rule);
  }
  .p-page__promise:first-child{ padding-top:0; border-top:0; }
  .p-page__promise:last-child{ padding-bottom:0; }
}

@media (max-width: 639px){
  /* The hero is `media.css`'s own object below 640 - full bleed, 390 tall,
     the panel at 42%. All this has to do is stop holding it in a container. */
  .p-page__hero{ width:100%; margin-top:16px; min-height:0; }
  /* 24 of padding and 20 between, both measured on the Listing frame's three
     stacked panels and already carried by `cards.css`. */
  .p-page__card{ min-height:0; padding:20px 24px 24px; }
  .p-page__cards{ gap:20px; margin-top:20px; }
  .p-page__promises{ margin-top:24px; }
  .p-page__promise-list{ margin-top:20px; padding:20px 24px; }
  .p-page__media{ width:min(var(--c-container), 100% - 2 * var(--c-page-gutter)); }
  .p-page__media iframe{ height:auto; aspect-ratio:16 / 9; }
}