/* Базовые настройки */
/* === Apparat font family === */

@font-face {
  font-family: "Apparat";
  src: url("fonts/Apparat-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Apparat";
  src: url("fonts/Apparat-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Apparat";
  src: url("fonts/Apparat-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Apparat";
  src: url("fonts/Apparat-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

body.page {
  margin: 0;
  font-family: "Apparat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: #ffffff;
  color: #111111;
  font-weight: 400; /* базовый вес, дальше будем переопределять нужные элементы */
}

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

/* Layout */

.page-header,
.page-main,
.page-footer {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 16px;
}

.page-main--narrow {
  max-width: 920px;
}

.page-header {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 40px 32px;
}

.page-header__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.logo {
  display: block;
  height: 54px;    /* можешь поставить 48px, если хочется крупнее */
  margin-bottom: 24px;
}

.intro {
  margin: 0;
  line-height: 1.5;
  max-width: 520px;
}

.link-ghost {
  font-size: 14px;
  text-decoration: none;
  color: #111111;
}

.link-ghost.small {
  font-size: 12px;
  margin-bottom: 12px;
  display: inline-block;
}

/* Divider */

.divider {
  border: none;
  margin: 0 auto;
  max-width: 1030px;  /* та же ширина, что у хедера и контента */
}

.divider.dotted {
  border-top: 2px dotted #000000;
}

/* Grid of posts */

.posts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 24px;
  margin-top: 32px;
}
.hidden {
  display: none;
}
.post-card {
  background: #ffffff;
  overflow: hidden;
  border-radius: 25px; /* можно оставить или убрать — не играет роли если картинка тоже скруглена */

}

.post-card__image-link {
  display: block;
}

.post-card__image {
 width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 25px;     /* добавили */
}

.post-card__content {
  padding: 16px 12px 20px;
}

.post-card__title {
  display: block;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  text-decoration: none;
  color: #111111;
  margin-bottom: 8px;
}

.post-card__title:hover {
  text-decoration: underline;
}

.post-card__tags {
  margin-bottom: 8px;
}

.tag {
  font-size: 13px;
  color: #2764ff;
  text-decoration: none;
  margin-right: 6px;
}

.tag:hover {
  text-decoration: underline;
}

.post-card__meta {
  font-size: 13px;
  color: #555555;
}

.meta-label {
  font-weight: 500;
}


/* Load more */

.load-more {
  display: flex;
  justify-content: center;
  margin: 40px 0 24px;
}

.button {
  display: inline-block;
  padding: 10px 28px;
  border-radius: 0;
  border: none;
  background-color: #111111;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
}

.button--outline {
  background-color: transparent;
  color: #111111;
  border: 1px solid #111111;
}

/* Post page */

.post-header {
  margin-top: 24px;
  margin-bottom: 16px;
}

.post-title {
  font-size: 28px;
  line-height: 1.3;
  margin: 0 0 8px;
}

.post-tags {
  margin-bottom: 8px;
}

.post-meta {
  font-size: 13px;
  color: #555555;
}

.post-hero {
  margin: 24px 0 32px;
}

.post-hero__image {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
}

.post-body {
  font-size: 16px;
  line-height: 1.6;
}

.post-body p {
  margin: 0 0 18px;
  text-indent: 1.5em;
}

.post-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 32px 0;
}

.post-gallery__image {
  border-radius: 12px;
}

.post-back {
  margin: 48px 0 32px;
  text-align: center;
}

/* Footer */

.page-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 40px;
}

.footer-text {
  max-width: 280px;
  font-size: 14px;
  line-height: 1.5;
}

.page-footer__center {
   display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  align-items: center;
}

.page-footer__right {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
}

.footer-link {
  font-size: 14px;
  text-decoration: none;
  color: #111111;
}

.footer-link:hover {
  text-decoration: underline;
}
.social-link {
  width: 20px;              /* общий квадрат для всех иконок */
  height: 20px;
  display: flex;
  align-items: center;      /* центр по вертикали */
  justify-content: center;  /* центр по горизонтали */
}

.social-link img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  
}
/* Responsive */

@media (max-width: 800px) {
  .page-header,
  .page-main,
  .page-footer {
    padding: 24px 20px 24px;
  }

  .intro {
    font-size: 22px;
    max-width: 100%;
  }

  /* 👉 здесь важно */
  .posts-grid {
    grid-template-columns: 1fr;  /* одна колонка */
    gap: 40px;                   /* вертикальный зазор между карточками */
    margin-top: 32px;
  }

  .post-card__image {
    height: 260px;               /* можно 240, если хочешь ещё компактнее */
  }

  .load-more {
    margin-top: 40px;
  }

  /* Футер — мобильная версия, см. ниже */
  .page-footer {
    flex-direction: column;
    align-items: center;         /* центрируем всё по горизонтали */
    text-align: center;
    gap: 24px;
  }

  .page-footer__left {
    align-items: center;
    text-align: center;
  }

  .page-footer__center {
    align-items: center;
    text-align: center;
  }

  .page-footer__right {
    justify-content: center;
    align-items: center;
  }
}
/* === TWEAKS TO MATCH FIGMA LAYOUT === */

/* Чуть больше воздуха и ширины для основного контейнера */
.page-header,
.page-main,
.page-footer {
  max-width: 1120px;      /* можно подвинуть до 1180, если захочешь ещё шире */
  padding: 40px 40px 32px;
}

/* Лого чуть ниже от края */
.page-header__left .logo {
  margin-bottom: 24px;
}

/* Большой интро-текст, как в макете */
.intro {
  font-size: 28px;
  line-height: 1.4;
  max-width: 780px;
  margin: 0 0 40px;
}

/* Пунктирная линия с хорошими отступами */
.divider.dotted {
  border-top: 3px dotted #000000;
  margin: 0 auto 48px;
}

/* Сетка карточек ближе к макету: больше вертикальных отступов */
.posts-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px 32px;   /* вертикально 56, горизонтально 32 */
  margin-top: 0;
}

/* Карточка — без отдельного фона, только сама картинка скруглена */
.post-card {
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

/* Картинка карточки: большой радиус и высота близко к макету */
.post-card__image {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 41px;
}

/* Текстовый блок ниже картинки — как отдельный “подвал” карточки */
.post-card__content {
  padding: 16px 4px 0;
}

/* Заголовок карточки покрупнее и с чуть большим отступом сверху */
.post-card__title {
  font-size: 18px;
  margin-bottom: 10px;
}

/* Теги чуть легче по тону и с большим межстрочным */
.post-card__tags {
  margin-bottom: 6px;
}

.tag {
  font-size: 14px;
}

/* Кнопка Load more — как в макете: немного воздуха сверху и снизу */
.load-more {
  margin: 56px 0 48px;
}

.button {
  padding: 10px 40px;
  font-size: 15px;
}

/* Футер чуть “собраннее” и с большим верхним отступом */
.page-footer {
  padding-top: 32px;
  padding-bottom: 48px;
}

.page-footer__left .logo {
  margin-bottom: 12px;
}

.footer-text {
  font-size: 13px;
  max-width: 260px;
}

/* Соцсети справа — как мы уже сделали, плюс аккуратный размер */
.page-footer__right {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
}

.social-link {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-link img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.social-ig img {
  position: relative;
  top: 1px;
}

/* Мобильная версия: чуть сжимаем поля */
@media (max-width: 800px) {
  .page-header,
  .page-main,
  .page-footer {
    padding: 24px 20px 24px;
  }

  .intro {
    font-size: 22px;
    max-width: 100%;
  }

  .posts-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .post-card__image {
    height: 240px;
  }

  .load-more {
    margin-top: 40px;
  }
}
/* === INTRO – override === */

.intro {
  font-size: 34px;
  line-height: 1.1;
  max-width: 840px;      /* вот ЭТО значение теперь и будет шириной текста */
  margin: 12px 0 48px;   /* отступ сверху от лого/ссылки и снизу до пунктирной линии */
}


/* === CARDS – match Figma look === */

/* Сетка карточек */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 54px 64px;      /* было 56px 32px – делаем чуть свободнее */
  margin-top: 56px;    /* расстояние от пунктирной линии до первой строки карточек */
}

/* Обёртка карточки – фон не нужен, только контент */
.post-card {
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

/* Картинка карточки – главный акцент */
.post-card__image-link {
  display: block;
}

.post-card__image {
  width: 100%;
  height: 360px;       /* было 280 – делаем чуть горизонтальнее, как в фигме */
  object-fit: cover;
  border-radius: 25px; /* ты говорил, что хочешь 25 – оставляем */
}

/* Текст под картинкой */
.post-card__content {
  padding: 14px 4px 0;  /* вместо 16px – мелкая настройка ритма */
}

/* Заголовок карточки */
.post-card__title {
  display: block;
  font-weight: 700;
  font-size: 20px;      /* было 18 – делаем как в макете */
  line-height: 1.3;
  text-decoration: none;
  color: #111111;
  margin-top: 12px;
  margin-bottom: 10px;
}

.post-card__title:hover {
  text-decoration: underline;
}

/* Теги */
.post-card__tags {
  margin-bottom: 6px;
}

.tag {
  font-size: 14px;
  color: #2764ff;
  text-decoration: none;
  margin-right: 6px;
}

.tag:hover {
  text-decoration: underline;
}

/* Дата */
.post-card__meta {
  font-size: 13px;
  color: #555555;
}

/* Узкая центральная колонка для карточек */
.page-main {
  max-width: 960px;   /* можешь потом поиграть: 940–980 */
}

/* === Hover zoom on card image === */

.post-card__image-link {
  display: block;
  overflow: hidden;             /* чтобы увеличенная картинка не вылезала за рамку */
  border-radius: 25px;          /* совпадает с радиусом картинки */
}

.post-card__image {
  transition: transform 0.25s ease-out;
}

.post-card__image-link:hover .post-card__image {
  transform: scale(1.03);       /* делаем увеличения на 3% — аккуратно и стильно */
}

/* === Typography mapping for Apparat === */

/* To portfolio (в хедере и back-ссылки) — Black */
.link-ghost {
  font-family: "Apparat", system-ui, sans-serif;
  font-weight: 600; /* Semibold */
}

/* Intro — Semibold */
.intro {
  font-family: "Apparat", system-ui, sans-serif;
  font-weight: 600; /* Semibold */
}

/* Заголовок карточки — Black */
.post-card__title {
  font-family: "Apparat", system-ui, sans-serif;
  font-weight: 900; /* Black */
}

/* Теги — Medium */
.tag {
  font-family: "Apparat", system-ui, sans-serif;
  font-weight: 500; /* Medium */
}

/* Дата — Medium */
.post-card__meta {
  font-family: "Apparat", system-ui, sans-serif;
  font-weight: 500; /* Medium */
}

/* Кнопка Load more — Semibold (используем как Bold) */
.button {
  font-family: "Apparat", system-ui, sans-serif;
  font-weight: 600; /* Semibold вместо Bold */
}

/* Подпись в футере под логотипом — Light */
.footer-text {
  font-family: "Apparat", system-ui, sans-serif;
  font-weight: 300; /* Light */
}

/* Список Portfolio / Blog / Contact / Datenschutz / Impressum — Medium */
.footer-link {
  font-family: "Apparat", system-ui, sans-serif;
  font-weight: 500; /* Medium */
}

/* Hover effect for "To portfolio" link */
.link-ghost {
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;          /* чтобы transform работал плавно */
}

.link-ghost:hover {
  color: #FFD000;
  transform: scale(1.05);         /* лёгкое увеличение на 5% */
}

/* Hover effect for Load more button */
.button {
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.button:hover {
  background-color: #FFD000;  /* жёлтый */
  color: #000000;             /* чёрный текст */
  transform: scale(1.05);     /* лёгкое увеличение */
}

/* === FINAL MOBILE OVERRIDES === */
@media (max-width: 800px) {

  /* ОДНА КОЛОНКА ДЛЯ КАРТОЧЕК */
  .posts-grid {
    grid-template-columns: 1fr !important;  /* перебьём все предыдущие */
    gap: 32px !important;
    margin-top: 32px !important;
  }

  .post-card__image {
    height: 260px !important;   /* можешь сделать 240, если хочешь ещё компактнее */
  }

  /* ПАДДИНГИ ПО УМЕНЬШЕННОЙ ШИРИНЕ */
  .page-header,
  .page-main,
  .page-footer {
    padding: 24px 20px 24px !important;
  }

  .intro {
    font-size: 22px !important;
    max-width: 100% !important;
  }

  /* ФУТЕР — ВСЁ ПО ЦЕНТРУ */
  .page-footer {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 24px !important;
  }

  .page-footer__left {
    text-align: center !important;
  }

  .page-footer__center {
    align-items: center !important;
    text-align: center !important;
  }

  .page-footer__right {
    justify-content: center !important;
    align-items: center !important;
  }
} .page-header__top {
    align-items: center !important;  /* выравниваем лого и ссылку по центру вертикали */
  }
 .page-footer__left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;  /* центрируем лого + текст */
    text-align: center !important;
  }
  .page-header__top {
    align-items: center !important; /* центрируем оси */
  }

  /* выравниваем To portfolio визуально */
  .page-header__top .link-ghost {
    display: flex !important;
    align-items: center !important;
    height: 54px;           /* точно как высота твоего логотипа */
  }
  .page-header__top {
    align-items: center !important;
  }

  /* Поднимаем “To portfolio” выше */
  .page-header__top .link-ghost {
    position: relative;
    top: -3px;   /* попробуй -2px, -3px или -4px — подбери идеально */
  }
  .page-header__top {
    align-items: center !important;
  }

  /* Поднимаем “To portfolio” выше */
  .page-header__top .link-ghost {
    position: relative;
    top: -3px;   /* попробуй -2px, -3px или -4px — подбери идеально */
  }
  .page-header__top {
    align-items: center !important;
  }

  /* Поднимаем “To portfolio” выше */
  .page-header__top .link-ghost {
    position: relative;
    top: -3px;   /* попробуй -2px, -3px или -4px — подбери идеально */
  }
  .page-header__top {
    align-items: center !important;
  }

  /* Поднимаем “To portfolio” выше */
  .page-header__top .link-ghost {
    position: relative;
    top: -3px;   /* попробуй -2px, -3px или -4px — подбери идеально */
  }
  .page-header__top {
    align-items: center !important;
  }

  /* Поднимаем “To portfolio” выше */
  .page-header__top .link-ghost {
    position: relative;
    top: -3px;   /* попробуй -2px, -3px или -4px — подбери идеально */
  }
  .page-header__top {
    align-items: center !important;
  }

  /* Поднимаем “To portfolio” выше */
  .page-header__top .link-ghost {
    position: relative;
    top: -3px;   /* попробуй -2px, -3px или -4px — подбери идеально */
  }
.page-header__top {
    align-items: center !important;
  }

  /* Поднимаем “To portfolio” выше */
  .page-header__top .link-ghost {
    position: relative;
    top: -3px;   /* попробуй -2px, -3px или -4px — подбери идеально */
  }




  



/* ===================== ARTICLE LAYOUT ===================== */

/* Кнопка Back */
.back-link {
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  color: #111;
  margin: 12px 0 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: 0.25s ease;
}

.back-link:hover {
  color: #FFD000;
  transform: translateX(-3px);
}

.back-link .arrow {
  font-size: 20px;
  line-height: 1;
}

/* Контейнер статьи — тот же коридор, что и у хедера */
.page-main--article {
  max-width: 1120px;         /* как .page-header */
  margin: 0 auto;
  padding: 24px 40px 64px;   /* 40 слева/справа */
  box-sizing: border-box;
}

/* Заголовок, теги, дата */
.article-header {
  margin-top: 16px;
  margin-bottom: 24px;
}

.article-title {
  margin: 0 0 8px;
  font-size: 32px;
  line-height: 1.25;
  font-weight: 900;          /* Apparat Black */
}

.article-tags {
  margin-bottom: 4px;
}

.article-meta {
  font-size: 13px;
  color: #555;
}

/* Большие горизонтальные картинки (hero) */
.article-hero {
  margin: 32px 0 40px;
}

.article-hero--bottom {
  margin-top: 40px;
}

.article-hero__image {
  width: 100%;               /* от левого до правого края коридора */
  display: block;
  border-radius: 0;
  object-fit: cover;
}

/* Две вертикальные картинки рядом (desktop / tablet) */
.article-gallery {
  width: 100%;
  margin: 40px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 16px;          /* расстояние между изображениями */
  box-sizing: border-box;
}

.article-gallery__item {
  margin: 0;
  width: 100%;
  height: 340px;             /* можно 320–380 по вкусу */
  overflow: hidden;
  border-radius: 0;
}

.article-gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===================== ARTICLE – MOBILE ===================== */
/* Вариант A: на мобильных картинки идут ОДНА ПОД ДРУГОЙ */

@media (max-width: 800px) {
  .page-main--article {
    padding: 24px 20px 48px;
  }

  .article-title {
    font-size: 26px;
  }

  /* галерея: одна колонка вниз */
  .article-gallery {
    grid-template-columns: 1fr;
    row-gap: 24px;
    column-gap: 0;
    margin: 32px 0;
  }

  .article-gallery__item {
    width: 100%;
    height: auto;
    border-radius: 0;
    overflow: hidden;
  }

  .article-gallery__image {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }
}

/* Дополнительный лёгкий тюнинг для совсем узких экранов */
@media (max-width: 480px) {
  .page-main--article {
    padding-left: 12px;
    padding-right: 12px;
  }
}





/* ========== 404 PAGE ========== */

.page-main--404 {
  max-width: 960px;            /* чуть уже, чем 1120, чтобы всё было собраннее */
  margin: 0 auto;
  padding: 40px 40px 72px;     /* сверху чуть больше воздуха */
  text-align: center;
}

.error-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* иллюстрация */
.error-illustration {
  display: block;
  width: 100%;
  max-width: 900px;            /* ограничиваем ширину */
  margin: 0 auto 32px;
}

.error-illustration img {
  width: 100%;
  height: auto;
  display: block;
}

/* заголовок */
.error-title {
  margin: 0 0 24px;
  font-size: 26px;
  line-height: 1.35;
  font-weight: 900;            /* Apparat Black */
}

/* кнопка (используем общий .button) */
.error-actions {
  margin-bottom: 40px;
}

.error-actions .button {
  padding-left: 40px;
  padding-right: 40px;
}

/* мобильные правки */
@media (max-width: 800px) {
  .page-main--404 {
    padding: 32px 20px 56px;
  }

  .error-title {
    font-size: 22px;
  }

  .error-illustration {
    margin-bottom: 24px;
  }
}