/* ==========================================================
   MARBLE COMPETENCE CENTER
   Exact DOM visual system V2

   Principles:
   - editorial grid
   - flat hierarchy
   - separators instead of card chrome
   - minimal radius
   - no decorative shadows
   - no pill UI
   - document collections remain shared component
   ========================================================== */


/* ==========================================================
   ROOT
   ========================================================== */

.marble-cc {
  --cc-navy: #082f57;
  --cc-navy-deep: #06294b;
  --cc-blue: #008bd2;
  --cc-line: #d8e5ed;
  --cc-line-dark: rgba(255,255,255,.18);
  --cc-muted: #61798c;
  --cc-soft: #f4f8fa;
  --cc-white: #fff;

  width: 100%;
  color: var(--cc-navy);
}


.marble-cc-shell {
  width: min(1180px, calc(100% - 64px));
  margin-inline: auto;
}


.marble-cc h1,
.marble-cc h2,
.marble-cc h3,
.marble-cc p {
  margin-top: 0;
}


.marble-cc a {
  text-underline-offset: 3px;
}


/* ==========================================================
   HERO
   ========================================================== */

.marble-cc-hero {
  margin:
    36px
    0
    0;

  background:
    var(--cc-navy-deep);

  color:
    var(--cc-white);

  border-top:
    1px solid rgba(255,255,255,.12);

  border-bottom:
    1px solid rgba(0,0,0,.12);
}


.marble-cc-hero__grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(360px, .8fr);

  min-height:
    330px;

  padding:
    52px
    0;

  gap:
    72px;

  align-items:
    center;
}


.marble-cc-hero__copy {
  min-width: 0;
}


.marble-cc-eyebrow {
  margin-bottom:
    14px;

  color:
    #77c8f0;

  font-size:
    12px;

  line-height:
    1;

  font-weight:
    700;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;
}


.marble-cc-hero h1 {
  max-width:
    720px;

  margin-bottom:
    22px;

  color:
    #fff;

  font-size:
    clamp(42px, 5vw, 68px);

  line-height:
    .98;

  letter-spacing:
    -.035em;
}


.marble-cc-hero__lead {
  max-width:
    700px;

  margin-bottom:
    28px;

  color:
    rgba(255,255,255,.82);

  font-size:
    18px;

  line-height:
    1.55;
}


.marble-cc-hero__actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    20px;
}


.marble-cc-button {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  min-height:
    42px;

  padding:
    0
    18px;

  border-radius:
    2px;

  font-size:
    13px;

  font-weight:
    700;

  text-decoration:
    none;

  transition:
    background-color .15s ease,
    color .15s ease,
    border-color .15s ease;
}


.marble-cc-button--primary {
  background:
    #fff;

  border:
    1px solid #fff;

  color:
    var(--cc-navy);
}


.marble-cc-button--primary:hover {
  background:
    #eaf5fb;
}


.marble-cc-button--ghost {
  background:
    transparent;

  border:
    1px solid rgba(255,255,255,.4);

  color:
    #fff;
}


.marble-cc-button--ghost:hover {
  border-color:
    #fff;
}


/* ----------------------------------------------------------
   Hero right panel
   ---------------------------------------------------------- */

.marble-cc-hero__panel {
  border-top:
    1px solid rgba(255,255,255,.28);

  border-bottom:
    1px solid rgba(255,255,255,.28);
}


.marble-cc-hero__panel-label {
  padding:
    12px
    0
    10px;

  color:
    #77c8f0;

  font-size:
    11px;

  line-height:
    1;

  font-weight:
    700;

  letter-spacing:
    .1em;

  text-transform:
    uppercase;
}


.marble-cc-hero__panel > a {
  display:
    grid;

  grid-template-columns:
    52px
    minmax(0, 1fr)
    20px;

  align-items:
    center;

  gap:
    16px;

  min-height:
    72px;

  padding:
    14px
    0;

  color:
    #fff;

  border-top:
    1px solid rgba(255,255,255,.18);

  text-decoration:
    none;
}


.marble-cc-hero__panel > a span {
  color:
    #77c8f0;

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    .08em;
}


.marble-cc-hero__panel > a strong {
  font-size:
    14px;

  line-height:
    1.35;

  font-weight:
    650;
}


.marble-cc-hero__panel > a i {
  justify-self:
    end;

  color:
    #77c8f0;

  font-style:
    normal;
}


.marble-cc-hero__panel > a:hover strong {
  text-decoration:
    underline;

  text-underline-offset:
    4px;
}


/* ==========================================================
   COMMON SECTION
   ========================================================== */

.marble-cc-section {
  padding:
    64px
    0;

  border-bottom:
    1px solid var(--cc-line);
}


.marble-cc-section-head {
  display:
    grid;

  grid-template-columns:
    minmax(260px, .7fr)
    minmax(0, 1.3fr);

  gap:
    64px;

  align-items:
    end;

  margin-bottom:
    34px;

  padding-bottom:
    18px;

  border-bottom:
    1px solid var(--cc-line);
}


.marble-cc-section-head h2 {
  margin:
    0;

  font-size:
    clamp(30px, 3vw, 42px);

  line-height:
    1.05;

  letter-spacing:
    -.025em;
}


.marble-cc-section-head > p {
  max-width:
    620px;

  margin:
    0;

  color:
    var(--cc-muted);

  font-size:
    15px;

  line-height:
    1.55;
}


/* ==========================================================
   ABOUT
   ========================================================== */

.marble-cc-about {
  background:
    #fff;
}


.marble-cc-about__grid {
  display:
    grid;

  grid-template-columns:
    minmax(220px, .65fr)
    minmax(0, 1.35fr);

  gap:
    72px;
}


.marble-cc-about h2 {
  margin:
    0;

  font-size:
    34px;

  line-height:
    1.05;

  letter-spacing:
    -.025em;
}


.marble-cc-about__copy {
  max-width:
    760px;
}


.marble-cc-about__copy p {
  margin:
    0;

  color:
    #425f74;

  font-size:
    15px;

  line-height:
    1.65;
}


.marble-cc-about__copy p + p {
  margin-top:
    18px;

  padding-top:
    18px;

  border-top:
    1px solid var(--cc-line);
}


.marble-cc-about__lead {
  color:
    var(--cc-navy) !important;

  font-size:
    20px !important;

  line-height:
    1.5 !important;

  font-weight:
    600;
}


/* ==========================================================
   DIRECTIONS
   ========================================================== */

.marble-cc-directions {
  background:
    var(--cc-soft);
}


.marble-cc-directions__grid {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap:
    56px;

  border-top:
    1px solid var(--cc-line);
}


.marble-cc-direction {
  display:
    grid;

  grid-template-columns:
    48px
    minmax(0, 1fr);

  column-gap:
    18px;

  align-content:
    start;

  min-height:
    150px;

  padding:
    24px
    0;

  border-bottom:
    1px solid var(--cc-line);

  background:
    transparent;

  border-radius:
    0;

  box-shadow:
    none;
}


.marble-cc-direction__number {
  grid-column:
    1;

  grid-row:
    1 / span 2;

  color:
    var(--cc-blue);

  font-size:
    12px;

  line-height:
    1;

  font-weight:
    700;

  letter-spacing:
    .05em;
}


.marble-cc-direction h3 {
  grid-column:
    2;

  margin:
    0
    0
    10px;

  color:
    var(--cc-navy);

  font-size:
    18px;

  line-height:
    1.25;

  letter-spacing:
    -.01em;
}


.marble-cc-direction p {
  grid-column:
    2;

  margin:
    0;

  color:
    #5e7486;

  font-size:
    13px;

  line-height:
    1.55;
}





/* ==========================================================
   HIGH-TECH PROGRAMS
   ========================================================== */

.marble-cc-programs {
  padding:
    70px
    0;

  background:
    var(--cc-navy-deep);

  color:
    #fff;
}


.marble-cc-programs
.marble-cc-section-head {
  border-bottom-color:
    var(--cc-line-dark);
}


.marble-cc-programs
.marble-cc-section-head h2 {
  color:
    #fff;
}


.marble-cc-programs
.marble-cc-section-head > p {
  color:
    rgba(255,255,255,.66);
}


.marble-cc-program {
  display:
    grid;

  grid-template-columns:
    minmax(300px, .8fr)
    minmax(0, 1.2fr);

  gap:
    56px;

  padding:
    34px
    0;

  border-top:
    1px solid var(--cc-line-dark);

  background:
    transparent;

  border-radius:
    0;

  box-shadow:
    none;
}


.marble-cc-program:last-child {
  border-bottom:
    1px solid var(--cc-line-dark);
}


.marble-cc-program__intro {
  min-width:
    0;
}


.marble-cc-program__code {
  margin-bottom:
    14px;

  color:
    #77c8f0;

  font-size:
    12px;

  line-height:
    1;

  font-weight:
    700;

  letter-spacing:
    .1em;

  text-transform:
    uppercase;
}


.marble-cc-program__intro h3 {
  max-width:
    500px;

  margin:
    0
    0
    16px;

  color:
    #fff;

  font-size:
    clamp(26px, 2.7vw, 38px);

  line-height:
    1.05;

  letter-spacing:
    -.025em;
}


.marble-cc-program__intro p {
  max-width:
    560px;

  margin:
    0;

  color:
    rgba(255,255,255,.66);

  font-size:
    14px;

  line-height:
    1.6;
}


/* roadmap */
.marble-cc-program__roadmap {
  min-width:
    0;
}


.marble-cc-program__label {
  margin-bottom:
    10px;

  color:
    #77c8f0;

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}


.marble-cc-program__roadmap ol {
  margin:
    0;

  padding:
    0;

  list-style:
    none;

  border-top:
    1px solid var(--cc-line-dark);
}


.marble-cc-program__roadmap li {
  display:
    grid;

  grid-template-columns:
    46px
    minmax(0, 1fr);

  gap:
    14px;

  align-items:
    center;

  min-height:
    54px;

  padding:
    10px
    0;

  border-bottom:
    1px solid var(--cc-line-dark);
}


.marble-cc-program__roadmap li span {
  color:
    #77c8f0;

  font-size:
    11px;

  font-weight:
    700;
}


.marble-cc-program__roadmap li strong {
  color:
    rgba(255,255,255,.9);

  font-size:
    13px;

  line-height:
    1.4;

  font-weight:
    600;
}


/* goal occupies full width */
.marble-cc-program__goal {
  grid-column:
    1 / -1;

  display:
    grid;

  grid-template-columns:
    170px
    minmax(0, 1fr);

  gap:
    28px;

  padding-top:
    22px;

  border-top:
    1px solid var(--cc-line-dark);
}


.marble-cc-program__goal span {
  color:
    #77c8f0;

  font-size:
    11px;

  line-height:
    1.2;

  font-weight:
    700;

  letter-spacing:
    .07em;

  text-transform:
    uppercase;
}


.marble-cc-program__goal strong {
  max-width:
    800px;

  color:
    #fff;

  font-size:
    15px;

  line-height:
    1.5;

  font-weight:
    600;
}


/* ==========================================================
   MATERIALS
   Keep shared document-collection rendering intact.
   Only spacing around it belongs to this page.
   ========================================================== */

.marble-cc #materials,
.marble-cc [id="materials"] {
  padding-top:
    64px;

  padding-bottom:
    64px;
}


/*
 * Shared document component owns everything inside itself.
 * No item/group/card overrides here.
 */
.marble-cc
.marble-document-collection-public {
  margin-top:
    0;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 980px) {

  .marble-cc-shell {
    width:
      min(100% - 40px, 1180px);
  }


  .marble-cc-hero__grid {
    grid-template-columns:
      minmax(0, 1fr)
      320px;

    gap:
      40px;
  }


  .marble-cc-about__grid,
  .marble-cc-section-head {
    gap:
      40px;
  }


  .marble-cc-program {
    gap:
      36px;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

  .marble-cc-shell {
    width:
      calc(100% - 32px);
  }


  .marble-cc-hero {
    margin-top:
      16px;
  }


  .marble-cc-hero__grid {
    display:
      block;

    min-height:
      0;

    padding:
      34px
      0;
  }


  .marble-cc-hero h1 {
    font-size:
      42px;
  }


  .marble-cc-hero__lead {
    font-size:
      16px;
  }


  .marble-cc-hero__panel {
    margin-top:
      36px;
  }


  .marble-cc-section,
  .marble-cc-programs {
    padding:
      46px
      0;
  }


  .marble-cc-about__grid,
  .marble-cc-section-head {
    display:
      block;
  }


  .marble-cc-about__copy,
  .marble-cc-section-head > p {
    margin-top:
      22px;
  }


  .marble-cc-directions__grid {
    grid-template-columns:
      1fr;

    column-gap:
      0;
  }


  .marble-cc-direction,
  .marble-cc-direction:last-child:nth-child(odd) {
    grid-column:
      auto;

    grid-template-columns:
      42px
      minmax(0, 1fr);
  }


  .marble-cc-program {
    display:
      block;

    padding:
      30px
      0;
  }


  .marble-cc-program__roadmap {
    margin-top:
      28px;
  }


  .marble-cc-program__goal {
    display:
      block;

    margin-top:
      28px;
  }


  .marble-cc-program__goal strong {
    display:
      block;

    margin-top:
      10px;
  }


  .marble-cc-hero__actions {
    gap:
      10px;
  }

}


/* ==========================================================
   VERY SMALL
   ========================================================== */

@media (max-width: 440px) {

  .marble-cc-hero h1 {
    font-size:
      36px;
  }


  .marble-cc-button {
    width:
      100%;

    justify-content:
      space-between;
  }


  .marble-cc-hero__panel > a {
    grid-template-columns:
      44px
      minmax(0, 1fr)
      16px;

    gap:
      10px;
  }

}


.marble-cc-directions__grid
> .marble-cc-direction:nth-child(7) {
  grid-column: 1 / 2 !important;

  width: auto !important;
  max-width: none !important;

  justify-self: stretch !important;

  grid-template-columns:
    30px
    minmax(0, 1fr) !important;
}


.marble-cc-directions__grid
> .marble-cc-direction:nth-child(7)
> .marble-cc-direction__number {
  grid-column: 1 !important;
  grid-row: 1 !important;
}


.marble-cc-directions__grid
> .marble-cc-direction:nth-child(7)
> h3 {
  grid-column: 2 !important;
  grid-row: 1 !important;

  min-width: 0 !important;
}


.marble-cc-directions__grid
> .marble-cc-direction:nth-child(7)
> p {
  grid-column: 2 !important;
  grid-row: 2 !important;

  min-width: 0 !important;
}


/* На мобильном снова обычный последовательный элемент */
@media (max-width: 680px) {

  .marble-cc-directions__grid
  > .marble-cc-direction:nth-child(7) {
    grid-column: auto !important;
  }

}






/* Right focus panel: NIPO / NOPO */
.marble-cc-hero__panel a,
.marble-cc-hero__panel a span,
.marble-cc-hero__panel a strong,
.marble-cc-hero__panel a i {
  color: #ffffff !important;
}

.marble-cc-hero__panel a:hover,
.marble-cc-hero__panel a:focus-visible,
.marble-cc-hero__panel a:hover span,
.marble-cc-hero__panel a:focus-visible span,
.marble-cc-hero__panel a:hover strong,
.marble-cc-hero__panel a:focus-visible strong,
.marble-cc-hero__panel a:hover i,
.marble-cc-hero__panel a:focus-visible i {
  color: #62b8ed !important;
}

/* Secondary hero action: Materials only */
.marble-cc-hero__actions a:last-child {
  color: #ffffff !important;
}

.marble-cc-hero__actions a:last-child:hover,
.marble-cc-hero__actions a:last-child:focus-visible {
  color: #62b8ed !important;
}