/* ==========================================================================
   Page layout - Обучения / Кариера, rendered by career.tpl.

   Composition only. Every value is from the Academy frame (1006:2246), which
   is one of the five frames with no whole-frame shift: its footer sits at
   163/1057 where Services, Blog and Contacts sit at 168/1062.

   The frame is the Services composition with two changes - six cards instead
   of four, and a 570px CV band instead of the 666px contact band - so the
   crumb, hero and card-grid geometry below is identical to page-pages.css by
   measurement, not by inheritance. Both were read off their own frame.
   ========================================================================== */

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

.p-career__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-career__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;
}

/* --- card grid: 600x237 cards, three rows ------------------------------- */
/* x345/975 with a 30px column gutter, rows at y747/1024/1301 - a 40px row
   gutter under a 237 card. Same grid as Услуги, one row deeper. */

/* 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 rather than
   the gap the moment the page is narrower than 1230. */
.p-career__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-career__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-career__card .c-card__body{ margin-top:19px; }

/* --- the closing CV band ------------------------------------------------ */
/* Band 1920x570 at y1578, 40 under the grid's 1538 bottom. The band itself is
   `.c-cta-band--wide` in media.css - the same object Екип draws - and all this
   page says is the gap above it. */

.p-career .c-cta-band{ margin-top:40px; }

/* 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-career__media{
  width:min(var(--c-container), 100% - 2 * var(--c-page-gutter));
  margin:24px auto 0;
}
.p-career__media img,
.p-career__media iframe{
  display:block;
  width:100%;
  border:0;
  border-radius:var(--c-r-surface);
}
.p-career__media iframe{ height:520px; }

/* ==========================================================================
   Below 1360 - the CV band stops being a fixed 570 with a 607px card in it.
   Identical to `page-team.css`'s, because it is the same band.
   ========================================================================== */

@media (max-width: 1359px){
}

@media (max-width: 1119px){
  .p-career__cards{ grid-template-columns:minmax(0, 1fr); }
}

@media (max-width: 639px){
  .p-career__hero{ width:100%; margin-top:16px; min-height:0; }
  .p-career__card{ min-height:0; padding:20px 24px 24px; }
  .p-career__cards{ gap:20px; margin-top:20px; }
  /* `forms.css` collapses the wide CV card onto the narrow 324 one here, so
     the band only has to stop right-aligning it - the frame centres it. */
  .p-career__media{ width:min(var(--c-container), 100% - 2 * var(--c-page-gutter)); }
  .p-career__media iframe{ height:auto; aspect-ratio:16 / 9; }
}