/* ==========================================================================
   Додзё Медиа — лендинг
   Макет: Figma «DOJO · Тестовое», кадры 1440 / 390.
   Промежуточные ширины интерполируются clamp() между 390 и 1440 (см. --fluid в base.css).
   Брейкпоинты в em, чтобы раскладка учитывала увеличенный шрифт браузера:
   37.5em = 600px, 56.25em = 900px, 62.5em = 1000px при шрифте 16px.
   Медиазапросы — рядом с компонентом, к которому относятся.
   ========================================================================== */

@font-face {
  font-family: Oranienbaum;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/oranienbaum-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: Oranienbaum;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/oranienbaum-latin-400-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/manrope-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/manrope-latin-400-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Токены (Figma: «Типографика и токены») ---------- */
:root {
  --paper: #f1ede2;
  --ink: #211b18;
  --muted: #655b54;
  --line: #c7beb2;
  --accent: #302038;
  --white: #fff;
  --hover: #e9e3d6;
  --image-rule: rgb(106 92 82 / 55%);
  --font-display: oranienbaum, "Times New Roman", serif;
  --font-text: manrope, "Segoe UI", arial, sans-serif;

  /* Кегли: десктоп 1440 / мобайл 390, межстрочный у заголовков = кегль + 4px */
  --fs-h1: clamp(2.75rem, 2.1rem + 2.6667vw, 4.5rem); /* 44 → 72 */
  --fs-h2: clamp(2rem, 1.6286rem + 1.5238vw, 3rem); /* 32 → 48 */
  --fs-small: 0.875rem; /* Small 14/22 */
  --lh-small: 1.5714;
  --rule: 1px solid var(--line);
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 3px;
}

/* ---------- База ---------- */
html {
  scrollbar-color: var(--line) var(--paper);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.625; /* 16 / 26 */
}

::selection {
  background: var(--accent);
  color: var(--paper);
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

[id] {
  scroll-margin-top: 24px;
}

main:focus {
  outline: none; /* фокус после ссылки-пропуска, обводка не нужна */
}

/* Ссылка «Перейти к содержимому» — видна только при фокусе с клавиатуры */
.skip-link {
  position: absolute;
  z-index: 10;
  top: 8px;
  left: 8px;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--white);
  font-size: var(--fs-small);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* ---------- Типографика ---------- */
.label {
  font-size: 0.75rem;
  line-height: 1.5; /* 12 / 18 */
  letter-spacing: 1px;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--muted);
}

.title-1,
.title-2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: calc(1em + 4px);
  overflow-wrap: break-word; /* длинное слово при увеличенном шрифте не выходит за экран */
}

.title-1 {
  font-size: var(--fs-h1);
}

.title-2 {
  font-size: var(--fs-h2);
}

.text-link {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

@media (hover: hover) {
  .text-link:hover {
    text-decoration-line: underline;
  }
}

/* ---------- Кнопка (Figma: DOJO / Button — default / hover / focus) ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  min-width: min(218px, 100%);
  min-height: 48px;
  padding: 14px 20px;
  border: 0;
  background: var(--accent);
  color: var(--white);
  font-size: var(--fs-small);
  line-height: 1.4286; /* 14 / 20 */
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out);
}

@media (hover: hover) {
  .button:hover {
    background: var(--ink);
  }
}

/* ---------- Шапка ---------- */
.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 24px;
  box-shadow: inset 0 -1px 0 var(--line); /* линия не добавляет высоты, как обводка в Figma */
}

.logo {
  min-width: 0;
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.125; /* 32 / 36 */
  text-decoration: none;
}

.header__nav-list {
  display: flex;
  gap: 32px;
}

/* Кнопка меню 44×44 (Figma: Menu / open, Menu / close) */
.menu-toggle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--rule);
  background: transparent;
  transition: background-color 0.2s var(--ease-out);
}

@media (hover: hover) {
  .menu-toggle:hover {
    background: var(--hover);
  }
}

.menu-toggle__icon {
  width: 20px;
  height: 20px;
}

.menu-toggle__icon--close,
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--open {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon--close {
  display: block;
}

/* Раскрытое мобильное меню (Figma: 05 · Mobile / меню открыто) */
.mobile-menu {
  padding-top: 12px;
  padding-bottom: 24px;
}

.mobile-menu__link {
  display: block;
  padding: 12px;
}

.mobile-menu__cta {
  width: 100%;
}

@media (max-width: 56.2499em) {
  .header__nav,
  .header__cta {
    display: none;
  }
}

@media (min-width: 56.25em) {
  .header__nav {
    min-width: 304px; /* ширина блока навигации в макете */
  }

  .menu-toggle,
  .mobile-menu {
    display: none;
  }
}

/* ---------- Первый экран ---------- */
.hero {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 20px + 4 * var(--fluid), 24px);
  padding-top: clamp(32px, 32px + 16 * var(--fluid), 48px);
  padding-bottom: clamp(40px, 40px + 24 * var(--fluid), 64px);
}

.hero__intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero__aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--muted);
}

.hero__lead {
  max-width: 40ch;
}

/* Тонкие линии сверху и снизу изображения — поверх картинки, без влияния на высоту */
.hero__media {
  position: relative;
}

.hero__media::before,
.hero__media::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  left: 0;
  height: 0.7px;
  background: var(--image-rule);
}

.hero__media::before {
  top: 0;
}

.hero__media::after {
  bottom: 0;
}

.hero__image {
  width: 100%;
  height: clamp(210px, 210px + 272 * var(--fluid), 482px);
  object-fit: cover;
}

/* Две колонки с 1000px: на более узких экранах заголовок 72px не помещается в две строки */
@media (min-width: 62.5em) {
  .hero__intro {
    flex-direction: row;
    align-items: flex-end;
    gap: 48px;
  }

  .hero__title {
    flex: 2 1 0;
    max-width: 768px;
  }

  .hero__aside {
    flex: 1 1 0;
    max-width: 384px;
  }
}

/* ---------- Избранные работы ---------- */
.projects__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 24px + 8 * var(--fluid), 32px);
  padding-top: clamp(40px, 40px + 8 * var(--fluid), 48px);
  padding-bottom: clamp(48px, 48px + 16 * var(--fluid), 64px);
  box-shadow: inset 0 1px 0 var(--line);
}

.projects__heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.projects__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 56.25em) {
  .projects__heading {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
  }

  .projects__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

/* Карточка проекта: вся карточка — одна ссылка (Figma: DOJO / Project card) */
.project-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 15px; /* + рамка 1px = 16px внутреннего поля, изображение 352px, как в макете */
  border: var(--rule);
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out);
}

@media (hover: hover) {
  .project-card:hover {
    background: var(--hover);
  }
}

.project-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.project-card__title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.1429; /* 28 / 32 */
  text-transform: uppercase;
}

.project-card__tags,
.project-card__more {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.project-card__tags {
  color: var(--muted);
}

.project-card__more {
  margin-top: auto;
}

/* Планшет: карточка горизонтальная, чтобы изображение 16:10 во всю ширину не занимало экран */
@media (min-width: 37.5em) and (max-width: 56.2499em) {
  .project-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    gap: 12px 24px;
  }

  .project-card__media {
    grid-row: 1 / -1;
  }

  .project-card__more {
    align-self: end;
  }
}

/* ---------- Контакты / подвал ---------- */
.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: clamp(32px, 32px + 16 * var(--fluid), 48px);
  padding-bottom: 24px;
  box-shadow: inset 0 1px 0 var(--line);
}

.contact {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.contact__email {
  color: var(--muted);
}

.contact__cta {
  width: 100%;
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--muted);
}

@media (min-width: 37.5em) {
  .contact__cta {
    align-self: flex-start;
    width: auto;
  }
}

@media (min-width: 56.25em) {
  .contact {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  .contact__cta {
    align-self: auto; /* по центру строки, как в макете */
  }

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    gap: 24px;
  }
}

/* ---------- Режим высокой контрастности: линии на тенях и фонах в нём не рисуются ---------- */
@media (forced-colors: active) {
  .header__bar {
    border-bottom: 1px solid CanvasText;
  }

  .projects__inner,
  .footer__inner {
    border-top: 1px solid CanvasText;
  }

  .hero__media::before,
  .hero__media::after {
    background: CanvasText;
  }
}