/* ==========================================================================
   ГАПОУ МО «Губернский колледж» — основные стили
   --------------------------------------------------------------------------
   Порядок разделов:
     1. Переменные и сброс
     2. Типографика и общие элементы
     3. Шапка: верхняя строка, бренд, меню
     4. Панель «Версия для слабовидящих»
     5. Секции и блоки главной
     6. Подвал
     7. Режимы доступности
     8. Адаптивность
   ========================================================================== */

/* ==========================================================================
   1. ПЕРЕМЕННЫЕ И СБРОС
   ========================================================================== */

:root {
  /* Брендовые цвета колледжа сохранены с прежнего сайта.
     ВАЖНО про контраст: белый текст на светло-голубом #3FB4E0 даёт всего
     2,38:1 — это ниже требуемых 4,5:1 (именно эта проблема была на старом
     сайте). Поэтому #3FB4E0 оставлен как АКЦЕНТ (рамки, фокус, светлые
     заливки на белом), а под белым текстом используются затемнённые
     оттенки того же цвета: 5,3:1 и 7,6:1. */
  --brand:        #3FB4E0;   /* акцент, не под белым текстом */
  --brand-dark:   #1B7398;   /* фон под белым текстом: 5,3:1 */
  --brand-deep:   #0F5A7A;   /* тёмный фон и текст на белом: 7,6:1 */
  --tint:         #B9E6F9;
  --tint-soft:    #E8F6FD;

  --ink:          #1A2733;
  --ink-soft:     #43535F;
  --muted:        #61707C;

  --bg:           #FFFFFF;
  --surface:      #FFFFFF;
  --surface-alt:  #F4FAFD;
  --border:       #D6E4EC;

  --accent-hot:   #C62828;   /* горячие линии */
  --focus:        #F5A623;

  /* Фон сплошных кнопок с белым текстом — меняется в режимах доступности */
  --btn-solid:    #1B7398;

  --radius:       10px;
  --radius-sm:    6px;
  --shadow:       0 1px 2px rgba(16, 42, 60, .06), 0 6px 20px rgba(16, 42, 60, .07);
  --shadow-lg:    0 2px 6px rgba(16, 42, 60, .08), 0 16px 40px rgba(16, 42, 60, .12);

  --container:    1200px;
  --gap:          24px;

  --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: Georgia, "Times New Roman", serif;

  --step:         1;         /* множитель размера шрифта для режима слабовидящих */
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: calc(100% * var(--step));
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
}

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Видимый фокус — обязательное требование доступности */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ==========================================================================
   2. ТИПОГРАФИКА И ОБЩИЕ ЭЛЕМЕНТЫ
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  left: 0; top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--brand-deep);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  /* Прячем через transform, а не через отрицательный left:
     отрицательный left увеличивает scrollWidth страницы
     и даёт горизонтальную прокрутку на мобильных. */
  transform: translateY(-130%);
  transition: transform .15s;
}
.skip-link:focus { transform: translateY(0); color: #fff; }

a { color: var(--brand-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-dark); }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--brand-deep);
  text-decoration: none;
  border-bottom: 2px solid var(--tint);
  padding-bottom: 2px;
  transition: border-color .2s, color .2s;
}
.link-more:hover { border-color: var(--brand); color: var(--brand-dark); }

.section { padding: 48px 0; }
.section--tinted { background: var(--surface-alt); }
/* Блок с горячими линиями: уменьшен нижний отступ, чтобы обращение
   «Дорогие друзья!» было ближе к телефонам (было 96px, стало 28px). */
.section--notices { padding-top: 28px; padding-bottom: 12px; }
/* Секция «О колледже» подтянута к предыдущему блоку. */
.section--about { padding-top: 16px; }

.section__title {
  font-family: var(--font-head);
  font-size: 1.75rem;
  line-height: 1.25;
  margin: 0 0 20px;
  color: var(--ink);
}
.section__title--center { text-align: center; }

.section__lead {
  max-width: 760px;
  margin: 0 auto 24px;
  text-align: center;
  font-size: 1.0625rem;
  color: var(--ink-soft);
}

.section__note {
  max-width: 900px;
  margin: 24px auto 0;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ==========================================================================
   3. ШАПКА
   ========================================================================== */

.site-header { border-bottom: 1px solid var(--border); }

/* --- 3.1. Верхняя строка --- */

.topbar {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  font-size: .875rem;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  flex-wrap: wrap;
  padding-top: 8px;
  padding-bottom: 8px;
}

.topbar__departments { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar__dep img { height: 44px; width: auto; }

.topbar__tools { display: flex; align-items: center; gap: 14px; }
.socials { display: flex; align-items: center; gap: 8px; }

.socials__link {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--btn-solid);
  color: #fff;
  transition: background .2s, transform .15s;
}
.socials__link:hover { background: var(--brand-deep); transform: translateY(-1px); }

.socials__icon { display: block; width: 18px; height: 18px; }
.socials__icon--vk {
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.16 18.3c-6.02 0-9.45-4.13-9.59-11h3.02c.1 5.04 2.32 7.18 4.08 7.62V7.3h2.84v4.36c1.74-.19 3.56-2.17 4.18-4.36h2.84c-.47 2.7-2.45 4.68-3.86 5.5 1.41.66 3.66 2.38 4.52 5.5h-3.13c-.67-2.09-2.34-3.71-4.55-3.93v3.93h-.34z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.16 18.3c-6.02 0-9.45-4.13-9.59-11h3.02c.1 5.04 2.32 7.18 4.08 7.62V7.3h2.84v4.36c1.74-.19 3.56-2.17 4.18-4.36h2.84c-.47 2.7-2.45 4.68-3.86 5.5 1.41.66 3.66 2.38 4.52 5.5h-3.13c-.67-2.09-2.34-3.71-4.55-3.93v3.93h-.34z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.socials__icon--max {
  border: 2px solid currentColor;
  border-radius: 50%;
  background: none;
  position: relative;
}
.socials__icon--max::after {
  content: "";
  position: absolute; inset: 4px;
  border-radius: 50%;
  background: currentColor;
}
.socials__icon--phone {
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.btn-access {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font: inherit;
  font-size: .875rem;
  color: var(--brand-deep);
  background: var(--surface);
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.btn-access:hover { background: var(--btn-solid); color: #fff; }
.btn-access[aria-pressed="true"] { background: var(--btn-solid); color: #fff; }

.topbar__search {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  color: var(--brand-deep);
  border: 1px solid transparent;
  transition: border-color .2s, background .2s;
}
.topbar__search:hover { border-color: var(--brand); background: var(--surface); }

/* --- 3.2. Брендовая строка --- */

/* Белая полоса. Слева — логотип с наименованием, справа — поиск,
   контакты и соцсети. */
.brand {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}

/* Логотип и наименование — слева */
.brand__center {
  grid-column: 1;
  display: flex;
  justify-content: flex-start;
}

.brand__link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  text-align: left;
  text-decoration: none;
  color: var(--ink);
}

/* Текстовый блок справа от логотипа */
.brand__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Полное официальное наименование — две строки, перенос после «учреждение» */
.brand__legal {
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);          /* 15:1 на белом — выделено */
}
.brand__name {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;   /* название — заглавными */
  letter-spacing: .01em;
  color: var(--brand-deep);    /* 7,6:1 на белом */
}
.brand__sub { font-size: .875rem; color: var(--muted); }

.brand__logo { display: grid; place-items: center; }
.brand__logo img,
.brand__logo picture { display: block; }
.brand__logo img { width: auto; height: 150px; margin-top: 4px; }

/* Текстовая замена логотипа — видна только в режиме «скрыть изображения» */
.brand__logo-text {
  display: none;
  font-family: var(--font-head);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--brand-deep);
  white-space: nowrap;
}

/* Правая колонка: поиск, контакты, соцсети — по правому краю */
.brand__side {
  grid-column: 2;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.brand__contacts { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.brand__phone {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--brand-deep);
  text-decoration: none;
  white-space: nowrap;
}
.brand__phone:hover { color: var(--brand-dark); text-decoration: underline; }
.brand__email { font-size: .875rem; color: var(--ink-soft); }
.brand__email:hover { color: var(--brand-dark); }

/* --- 3.3. Главное меню --- */

.mainnav { background: var(--brand-deep); }

.mainnav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.mainnav__item { position: relative; }

.mainnav__link {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  padding: 14px 18px;
  color: #fff;
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
}
.mainnav__link:hover,
.mainnav__link:focus-visible { background: rgba(255, 255, 255, .14); color: #fff; }
.mainnav__link.is-active { background: var(--btn-solid); }

.mainnav__caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .75;
  transition: transform .2s;
}
.mainnav__item--has-children:hover .mainnav__caret { transform: rotate(180deg); }

/* Выпадающее подменю */
.mainnav__sub {
  position: absolute;
  left: 0; top: 100%;
  z-index: 60;
  min-width: 320px;
  max-width: 420px;
  padding: 8px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}

/* У последних пунктов меню подменю раскрывается вправо-влево от края,
   иначе оно вылезает за экран и появляется горизонтальная прокрутка. */
.mainnav__item--has-children:nth-last-child(-n+3) > .mainnav__sub {
  left: auto;
  right: 0;
}

.mainnav__item--has-children:hover > .mainnav__sub,
.mainnav__item--has-children:focus-within > .mainnav__sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}

.mainnav__sublink {
  display: block;
  padding: 9px 20px;
  font-size: .9375rem;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.4;
}
.mainnav__sublink:hover { background: var(--tint-soft); color: var(--brand-deep); }

.mainnav__burger {
  display: none;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 4px;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: none;
  border: 0;
  cursor: pointer;
}
.mainnav__burger-box { display: flex; flex-direction: column; gap: 4px; width: 24px; }
.mainnav__burger-box span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; }

/* ==========================================================================
   4. ПАНЕЛЬ «ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ»
   ========================================================================== */

.access-panel {
  background: var(--surface-alt);
  border-bottom: 2px solid var(--brand);
}
.access-panel__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-end;
  padding-top: 18px;
  padding-bottom: 18px;
}
.access-panel__group { border: 0; margin: 0; padding: 0; }
.access-panel__group legend {
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 8px;
}
.access-panel__opt {
  padding: 8px 14px;
  margin: 0 6px 6px 0;
  font: inherit;
  font-size: .875rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.access-panel__opt:hover { border-color: var(--brand); }
.access-panel__opt[aria-pressed="true"] {
  background: var(--btn-solid);
  border-color: var(--btn-solid);
  color: #fff;
  font-weight: 600;
}
.access-panel__reset {
  padding: 9px 16px;
  font: inherit;
  font-size: .875rem;
  color: #fff;
  background: var(--brand-deep);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.access-panel__reset:hover { background: var(--brand-dark); }

/* ==========================================================================
   5. БЛОКИ ГЛАВНОЙ
   ========================================================================== */

/* --- 5.1. Горячие линии --- */

.hotlines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 0;
}
.hotlines__item {
  margin: 0;
  padding: 16px 20px;
  background: var(--tint-soft);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm);
}
.hotlines__label { display: block; font-size: .9375rem; color: var(--ink-soft); }
.hotlines__phone {
  display: inline-block;
  margin-top: 4px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-hot);
  text-decoration: none;
}
.hotlines__phone:hover { text-decoration: underline; color: #9B1C1C; }

/* --- 5.2. Юбилейный баннер --- */

.anniversary { margin: 0; text-align: center; }
.anniversary__img {
  width: 100%;
  max-width: 800px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* Юбилейная картинка внутри блока «Новости» */
.anniversary--in-news { text-align: left; }
.anniversary--in-news .anniversary__img { max-width: 100%; margin: 0; }

/* --- 5.3. О колледже --- */

.about {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.about__text p { margin: 0 0 16px; font-size: 1.0625rem; color: var(--ink-soft); }
.about__text p:last-child { margin-bottom: 0; }
.about__more { margin: 16px 0 24px; }

/* Фото директора — рядом с обращением «Дорогие друзья!», без подписи.
   На узком экране текст обтекает картинку, на мобильном картинка встаёт сверху. */
.about__intro {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 16px;
}
.about__photo {
  width: 150px;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Кнопки «Виртуальная экскурсия» и «Оставить обращение» — в правой колонке,
   прижаты к правому краю; ниже них идёт «Приёмная кампания». */
.quicklinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 20px;
}
.quicklinks__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  font-weight: 600;
  color: #fff;
  background: var(--btn-solid);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background .2s, transform .15s;
}
.quicklinks__item:hover { background: var(--brand-deep); color: #fff; transform: translateY(-1px); }
.quicklinks__icon { font-size: .875rem; }

.about__aside { display: flex; flex-direction: column; gap: 0; }

.promo {
  display: block;
  padding: 24px;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-deep) 100%);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .2s;
}
.promo:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.promo__eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  /* Светлая плашка с ТЁМНЫМ текстом: белый текст на полупрозрачной белой
     подложке давал 3,84:1 — ниже нормы. Так контраст 7,6:1. */
  color: var(--brand-deep);
  background: rgba(255, 255, 255, .92);
  border-radius: 100px;
}
.promo__title { display: block; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.promo__cta { display: inline-block; margin-top: 14px; font-weight: 700; }

/* Приёмная кампания: делаем блок ниже и шире, чтобы он был вровень
   с соседними кнопками и не выглядел громоздким. */
.promo--wide {
  padding: 18px 20px;
  background: var(--surface);
  border: 2px solid var(--btn-solid);
  color: var(--ink);
}
.promo--wide:hover { color: var(--ink); background: var(--tint-soft); }
.promo--wide .promo__eyebrow {
  color: #fff;
  background: var(--btn-solid);
}
.promo--wide .promo__title { font-size: .9375rem; font-weight: 600; }
.promo--wide .promo__cta { margin-top: 10px; font-size: .9375rem; color: var(--brand-deep); }

.director {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* Фото директора сделано крупнее, как просили: было 84px */
.director__photo { width: 150px; height: auto; border-radius: var(--radius-sm); flex-shrink: 0; }
.director__caption { margin: 0; font-size: 1rem; color: var(--ink-soft); }

/* --- 5.4. Плитки проектов и ссылок --- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 20px;
}

/* «Полезные ссылки» — ровно 6 плиток в ряд на широком экране,
   чтобы картинки помещались целиком и не переносились. */
.tiles--six {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.tiles--six .tile__img { width: 100%; height: auto; }

.tile {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .2s;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.tile__img { width: 100%; height: auto; }

/* --- 5.5. Новости --- */

.news {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.news__side { display: flex; flex-direction: column; gap: 20px; }

.news-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.news-card__img { width: 100%; height: auto; }
.news-card__body { padding: 20px; }
.news-card__title { margin: 0 0 12px; font-family: var(--font-head); font-size: 1.25rem; line-height: 1.35; }
.news-card__title a { color: var(--ink); text-decoration: none; }
.news-card__title a:hover { color: var(--brand-deep); text-decoration: underline; }
.news-card__text { margin: 0 0 14px; font-size: .9375rem; color: var(--ink-soft); }

.news-card--banner { transition: transform .15s, box-shadow .2s; }
.news-card--banner:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.news__all { margin: 0; text-align: center; }

/* --- 5.6. Госуслуги --- */

.gosuslugi { max-width: 900px; margin: 0 auto; }
.gosuslugi__placeholder {
  padding: 28px;
  text-align: center;
  background: linear-gradient(138.4deg, #38bafe 26.49%, #2d73bc 79.45%);
  color: #fff;
  border-radius: var(--radius);
  font-size: 1.0625rem;
}
.gosuslugi__btn {
  display: inline-block;
  margin-top: 16px;
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: #0d4cd3;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.gosuslugi__btn:hover { background: #1d5deb; }

/* --- 5.7. Партнёры --- */

.partners { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.partners__img { width: 100%; height: auto; }

/* --- 5.8. Контакты --- */

.contacts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.contacts__row { margin: 0 0 20px; font-size: 1.0625rem; color: var(--ink-soft); }
.contacts__map {
  min-height: 320px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-alt);
  border: 1px solid var(--border);
}
.contacts__map iframe { display: block; width: 100%; height: 340px; border: 0; }

/* --- 5.9. Страница 404 --- */

.notfound {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.notfound__code {
  margin: 0;
  font-family: var(--font-head);
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--tint);
}

.notfound__title {
  margin: 8px 0 16px;
  font-family: var(--font-head);
  font-size: 1.75rem;
  color: var(--ink);
}

.notfound__text {
  margin: 0 0 28px;
  font-size: 1.0625rem;
  color: var(--ink-soft);
}

.notfound__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
}

.notfound__links li { display: flex; }

.notfound__contact {
  margin: 0;
  font-size: .9375rem;
  color: var(--muted);
}

/* ==========================================================================
   6. ПОДВАЛ
   ========================================================================== */

.site-footer {
  margin-top: 48px;
  background: var(--brand-deep);
  color: #fff;
  padding: 40px 0 24px;
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}
.footer__title { margin: 0 0 14px; font-family: var(--font-head); font-size: 1.125rem; color: #fff; }
.footer__address { font-style: normal; }
.footer__address p, .footer__col p { margin: 0 0 14px; font-size: .9375rem; color: rgba(255, 255, 255, .92); }
.footer__col a { color: #fff; }
.footer__col a:hover { color: var(--tint); }
.footer__hotline { font-size: 1.125rem; font-weight: 700; }
.footer__note { display: block; font-size: .8125rem; color: rgba(255, 255, 255, .75); }
.footer__links li { margin-bottom: 8px; font-size: .9375rem; }

.footer__legal { padding-top: 20px; }
.footer__legal p { margin: 0 0 6px; font-size: .875rem; color: rgba(255, 255, 255, .85); }

/* ==========================================================================
   7. РЕЖИМЫ ДОСТУПНОСТИ
   ========================================================================== */

html.fs-large { --step: 1.2; }
html.fs-huge  { --step: 1.45; }

/* Чёрно-белая */
html.scheme-bw {
  --brand: #4A4A4A; --brand-dark: #333; --brand-deep: #000;
  --tint: #D9D9D9; --tint-soft: #F0F0F0;
  --bg: #fff; --surface: #fff; --surface-alt: #F2F2F2;
  --ink: #000; --ink-soft: #1A1A1A; --muted: #333; --border: #9A9A9A;
  --btn-solid: #000;
}
/* Брендовая строка белая во всех схемах, потому что логотип колледжа
   и эмблемы министерств рассчитаны на светлый фон. Перекрашиваем её
   только в тех схемах, где фон страницы тёмный, — иначе текст
   .brand__name (цвет --brand-deep) пропал бы на тёмной заливке. */
html.scheme-bw .brand { background: #fff; }
html.scheme-bw .mainnav { background: #1A1A1A; }
html.scheme-bw img { filter: grayscale(1); }

/* Белая на чёрном */
html.scheme-wb {
  --brand: #3FB4E0; --brand-dark: #2A8DB5; --brand-deep: #8FD8F5;
  --tint: #123; --tint-soft: #10202B;
  --bg: #000; --surface: #0D0D0D; --surface-alt: #121212;
  --ink: #fff; --ink-soft: #E6E6E6; --muted: #C4C4C4; --border: #3A3A3A;
  --accent-hot: #FF6B6B;
  --btn-solid: #14607F;
}
/* На чёрной схеме фон шапки тёмный, поэтому текст переключаем на светлый.
   Логотипу подложка не нужна — он и так лежит на светлой полосе. */
html.scheme-wb .brand { background: #0A0A0A; }
html.scheme-wb .brand__name,
html.scheme-wb .brand__phone { color: #fff; }
html.scheme-wb .brand__legal { color: #E6E6E6; }
html.scheme-wb .mainnav { background: #000; }
html.scheme-wb .promo { background: #14202A; }
html.scheme-wb .hotlines__item { background: #10202B; }

/* Синяя на голубом */
html.scheme-blue {
  --brand: #0B4F8A; --brand-dark: #083A66; --brand-deep: #062B4D;
  --tint: #BFDCF5; --tint-soft: #D9EAF9;
  --bg: #D9EAF9; --surface: #FFFFFF; --surface-alt: #C9E2F7;
  --ink: #062B4D; --ink-soft: #12456F; --muted: #2C5F8A; --border: #8FBEE4;
  --accent-hot: #8E1B1B;
  --btn-solid: #083A66;
}
html.scheme-blue .brand { background: #fff; }
html.scheme-blue .mainnav { background: #062B4D; }

/* Тёмная на бежевом */
html.scheme-beige {
  --brand: #6B4F2A; --brand-dark: #553D1F; --brand-deep: #3D2B14;
  --tint: #E4D5BC; --tint-soft: #F3EADA;
  --bg: #F7F0E1; --surface: #FFFBF2; --surface-alt: #EFE4D0;
  --ink: #2E2213; --ink-soft: #4A3A24; --muted: #6B5940; --border: #CDB998;
  --accent-hot: #8E1B1B;
  --btn-solid: #553D1F;
}
html.scheme-beige .brand { background: #FFFBF2; }
html.scheme-beige .mainnav { background: #2E2213; }

/* Скрытие изображений */
html.no-images img { display: none !important; }
html.no-images .socials__icon { display: grid !important; }
html.no-images .news-card--banner { display: none; }
/* Логотип — часть идентификации колледжа, при «скрыть изображения» его
   заменяет текстовая надпись, чтобы шапка не осталась пустой. */
html.no-images .brand__logo { display: none; }
html.no-images .brand__logo-text { display: block; }

/* Уважение к системной настройке «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   8. АДАПТИВНОСТЬ
   ========================================================================== */

/* --- Планшет --- */
@media (max-width: 1080px) {
  .about,
  .contacts { grid-template-columns: 1fr; gap: 28px; }
  .news { grid-template-columns: 1fr; gap: 24px; }
  .mainnav__link { padding: 13px 14px; font-size: .875rem; }

  /* Логотип и текст уменьшаем, иначе наименование переносится
     на три строки и шапка раздувается */
  .brand__logo img { height: 104px; }
  .brand__name { font-size: 1.5rem; }
  .brand__legal { font-size: .875rem; }
  .brand__link { gap: 16px; }

  /* «Полезные ссылки»: 6 в ряд уже не помещаются — переходим на 3 */
  .tiles--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Мобильное меню --- */
@media (max-width: 900px) {
  .topbar__inner { justify-content: center; }
  .topbar__departments { justify-content: center; }
  .topbar__tools { justify-content: center; }

  /* Инструменты уходят под логотип, но в одну строку —
     так шапка остаётся компактной */
  .brand__inner {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .brand__side {
    grid-column: 1;
    justify-self: stretch;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
  }
  .brand__contacts { align-items: flex-start; }
  .brand__phone { font-size: 1.125rem; }

  .mainnav__burger { display: flex; }

  .mainnav__list {
    display: none;
    flex-direction: column;
    padding-bottom: 12px;
  }
  .mainnav__list.is-open { display: flex; }

  .mainnav__item { width: 100%; border-top: 1px solid rgba(255, 255, 255, .15); }
  .mainnav__link { padding: 14px 4px; justify-content: space-between; }

  .mainnav__sub {
    position: static;
    min-width: 0; max-width: none;
    opacity: 1; visibility: visible; transform: none;
    display: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, .08);
    padding: 0;
  }
  .mainnav__item.is-expanded > .mainnav__sub { display: block; }
  .mainnav__sublink { color: #fff; padding: 11px 16px; font-size: .9375rem; }
  .mainnav__sublink:hover { background: rgba(255, 255, 255, .14); color: #fff; }

  .mainnav__item--has-children:hover > .mainnav__sub { opacity: 1; visibility: visible; }
}

/* --- Телефон --- */
@media (max-width: 600px) {
  .section { padding: 32px 0; }
  /* На телефоне тоже держим обращение близко к телефонам —
     иначе общий отступ .section перебивает основное правило. */
  .section--notices { padding-top: 20px; padding-bottom: 10px; }
  .section--about { padding-top: 14px; }
  /* На телефоне полное наименование занимает 5 строк и раздувало шапку
     до 263px — почти треть экрана. Показываем только название колледжа. */
  .brand__legal { display: none; }
  .section__title { font-size: 1.375rem; }
  .hotlines__phone { font-size: 1.25rem; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .tiles--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Фото директора на телефоне встаёт над текстом */
  .about__intro { grid-template-columns: 1fr; gap: 14px; }
  .about__photo { width: 130px; }
  .quicklinks { flex-direction: column; }
  .quicklinks__item { justify-content: center; }
  .brand__logo img { height: 76px; }
  .brand__logo-text { font-size: 1.25rem; }
  .brand__name { font-size: 1.375rem; }
  .topbar__dep img { height: 36px; }
  .footer__grid { gap: 24px; }
}

/* Печать */
@media print {
  .topbar, .mainnav, .access-panel, .site-footer .footer__links, .skip-link { display: none; }
  body { font-size: 12pt; color: #000; }
  a { color: #000; text-decoration: underline; }
  .section { padding: 12pt 0; break-inside: avoid; }
}