.academy-main {
  --academy-ink: var(--graphite);
  background: var(--frost);
  color: var(--academy-ink);
}

.academy-main ::selection {
  background: var(--gold);
  color: var(--graphite);
}

.academy-breadcrumb {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  min-height: 3.5rem;
  border-bottom: 1px solid var(--line);
  color: #615d57;
  font-size: 0.8125rem;
}

.academy-breadcrumb a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: inherit;
  text-underline-offset: 0.25em;
}

/* The page opens on the banner in page-banner.css. What used to be the hero's right column —
   the three steps of a training day — is now a band of its own directly under it. */
.academy-method-band {
  padding-block: clamp(2.5rem, 4.5vw, 4.5rem);
}

.academy-paths > *,
.academy-formats > *,
.academy-inquiry > * {
  min-width: 0;
}

.academy-section-heading h2,
.academy-formats h2,
.academy-certainties h2,
.academy-inquiry h2 {
  margin: 0;
  max-width: 13ch;
  font-weight: 300;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.academy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  margin-top: 1.5rem;
}

.academy-primary {
  min-height: 3.25rem;
  padding: 0.85rem 1.35rem;
}

.academy-email {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--graphite);
  text-underline-offset: 0.3em;
}

.academy-method {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--graphite);
  list-style: none;
}

.academy-method li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.25rem 1rem;
  padding: 1.25rem 0 1.4rem;
  border-bottom: 1px solid var(--line);
}

.academy-method li > span {
  grid-row: 1 / 3;
  color: var(--gold-text);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
}

.academy-method strong {
  font-size: 1.125rem;
  font-weight: 600;
}

.academy-method small {
  color: #615d57;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* A stacked list was right in a narrow hero column. Across the full band the three steps
   stand side by side, divided by the same hairline rules the rest of the page uses. */
@media (min-width: 768px) {
  .academy-method {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: #bbb6ae;
  }

  .academy-method li {
    padding: clamp(1.5rem, 2.4vw, 2.25rem) clamp(1.25rem, 2vw, 2rem);
    border-bottom: 0;
    background: var(--frost);
  }
}

.academy-paths {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr);
  border-top: 1px solid var(--graphite);
  border-bottom: 1px solid var(--graphite);
}

.academy-section-heading {
  padding: clamp(3rem, 5vw, 5rem) clamp(2rem, 4vw, 4rem) clamp(3rem, 5vw, 5rem) 0;
}

.academy-section-heading h2,
.academy-formats h2,
.academy-certainties h2,
.academy-inquiry h2 {
  font-size: clamp(2.4rem, 4vw, 4.5rem);
  line-height: 1.02;
}

.academy-section-heading p,
.academy-formats-intro > p,
.academy-inquiry > div > p {
  max-width: 55ch;
  margin: 1.5rem 0 0;
  color: #615d57;
  line-height: 1.65;
}

.academy-path {
  display: flex;
  min-height: 30rem;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2rem, 4vw, 4rem);
  border-left: 1px solid var(--line);
}

.academy-path-hair {
  background: var(--graphite);
  color: var(--frost-bright);
}

.academy-path-hair .academy-path-index {
  color: #e3c47f;
}

.academy-path-index {
  margin: 0 0 clamp(3rem, 7vw, 7rem);
  color: var(--gold-text);
  font-variant-numeric: tabular-nums;
}

.academy-path h3 {
  margin: 0;
  font-size: clamp(2.1rem, 3vw, 3.5rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.academy-path > p {
  max-width: 42ch;
  margin: 2rem 0;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.academy-path a {
  display: inline-flex;
  width: fit-content;
  min-height: 2.75rem;
  align-items: center;
  color: inherit;
  text-underline-offset: 0.35em;
}

.academy-formats {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(24rem, 1fr);
  gap: clamp(4rem, 9vw, 10rem);
  padding-block: var(--section-gap);
}

.academy-format-list {
  margin: 0;
  border-top: 1px solid var(--graphite);
}

/* The format name is a sub heading (32px at 1440). Beside its description it ran into the
   text ("Индивидуально · 1:1"); above it, the name keeps one line at every width. */
.academy-format-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  padding-block: 2rem;
  border-bottom: 1px solid var(--line);
}

.academy-format-list dt {
  font-size: 1.7rem;
}

.academy-format-list dd {
  margin: 0;
  color: #57534e;
  line-height: 1.65;
}

.academy-certainties {
  padding-block: clamp(4rem, 7vw, 7rem);
  background: #e9e7e3;
}

.academy-certainties ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(3rem, 5vw, 5rem) 0 0;
  padding: 0;
  background: #bbb6ae;
  list-style: none;
}

.academy-certainties li {
  display: flex;
  min-height: 13rem;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.75rem, 3vw, 3rem);
  background: #e9e7e3;
}

/* Long Russian and German certainty labels have no break opportunity of their own.
   Without this the label painted outside its cell and pushed the document wider
   than the viewport at 200% zoom, which is the same break behaviour the paths and
   the hero already use. The type scale is unchanged. */
.academy-certainties strong {
  font-size: clamp(1.7rem, 2.4vw, 2.5rem);
  font-weight: 300;
  overflow-wrap: anywhere;
}

.academy-certainties span {
  color: #57534e;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.academy-certainties li { min-width: 0; }

.academy-inquiry {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(19rem, 0.75fr);
  gap: 2rem clamp(3rem, 8vw, 9rem);
  padding-block: var(--section-gap);
}

.academy-inquiry > ul {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--graphite);
  list-style: none;
}

.academy-inquiry > ul li {
  min-height: 3.75rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.academy-inquiry-actions {
  margin-top: 0.5rem;
}

.academy-note {
  align-self: end;
  margin: 0;
  color: #615d57;
  font-size: 0.875rem;
  line-height: 1.5;
}

.academy-main a:focus-visible {
  outline: 3px solid var(--gold-text);
  outline-offset: 4px;
}

@media (hover: hover) {
  .academy-path a:hover,
  .academy-email:hover,
  .academy-breadcrumb a:hover {
    color: var(--gold-text);
  }
}

/* Below 1200px the heading cell is too narrow for "направления." at the section size: it
   takes the full row and the two paths share the next one. */
@media (max-width: 1199px) {
  .academy-paths {
    grid-template-columns: 1fr 1fr;
  }

  .academy-section-heading {
    grid-column: 1 / -1;
    padding-right: 0;
  }

  .academy-path-lashes {
    border-left: 0;
  }
}

@media (max-width: 1023px) {

  .academy-formats,
  .academy-inquiry {
    grid-template-columns: 1fr;
  }

  .academy-inquiry-actions {
    margin-top: 1rem;
  }
}

@media (max-width: 767px) {
  .academy-paths,
  .academy-certainties ul {
    grid-template-columns: 1fr;
  }

  /* In one column the cards are read top to bottom: no stretched gaps between label,
     title and text. */
  .academy-path {
    min-height: 0;
    justify-content: flex-start;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .academy-path-index {
    margin-bottom: 1.5rem;
  }

  .academy-path > p {
    margin: 1rem 0 1.25rem;
  }

  .academy-certainties li {
    min-height: 0;
    justify-content: flex-start;
    gap: 0.75rem;
  }

  .academy-actions,
  .academy-actions > .button {
    width: 100%;
  }

  .academy-actions > .button {
    justify-content: space-between;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .academy-main *,
  .academy-main *::before,
  .academy-main *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}
.academy-photographs { padding-block: clamp(2.5rem, 5vw, 5rem); }
.academy-photograph-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); margin-top: 2rem; }
.academy-photograph-grid figure { min-width: 0; margin: 0; }
.academy-photograph-grid a { position: relative; display: flex; justify-content: center; background: var(--graphite); }
.academy-photograph-grid picture { display: block; width: 100%; }
.academy-photograph-grid img { display: block; width: 100%; height: min(35vw, 34rem); object-fit: contain; }
.academy-photo-expand { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 44px; height: 44px; color: var(--gold-text); background: var(--frost-bright); }
.academy-photo-expand .ui-icon { width: 1.25rem; height: 1.25rem; }
.academy-photograph-grid a:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }
.academy-photograph-grid figcaption { padding-block: 0.9rem; border-bottom: 1px solid var(--line-strong); font-size: 1rem; }
@media (max-width: 767px) {
 .academy-photograph-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
 .academy-photograph-grid img { height: auto; max-height: 80svh; }
}

.academy-formats + .academy-inquiry { padding-top: 0; }