/*
 Theme Name:   Павлово
 Theme URI:    https://efeto.ru/
 Author:       efeto.ru
 Version:      1.1
 Text Domain:  pavlovo
 Description:  Тема для сайта Павлово с кастомными блоками Gutenberg.
*/

/* #region Общие стили */

  /* ----- Шрифты ----- */
  @font-face {
    font-family: 'Geologica';
    src: url('fonts/Geologica-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Geologica';
    src: url('fonts/Geologica-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  /* Geologica Cursive – оригинальные файлы */
  @font-face {
    font-family: 'Geologica Cursive';
    src: url('fonts/Geologica_Cursive-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Geologica Cursive';
    src: url('fonts/Geologica_Cursive-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Geologica Cursive';
    src: url('fonts/Geologica_Cursive-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  /* Unageo – оригинальные файлы (Bold для цифр, Medium на всякий случай) */
  @font-face {
    font-family: 'Unageo';
    src: url('fonts/Unigeo32-Bold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Unageo';
    src: url('fonts/Unigeo32-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

  /* ----- Переменные ----- */
  :root {
    --orange: #FF6928;
    --orange-light: #FF824B;
    --dark: #410A14;
    --white: #FFFFFF;
    --blue-light: #BCE4FA;
    --gray: #D9D9D9;
    --font-geologica: 'Geologica', sans-serif;
    --font-geologica-cursive: 'Geologica', sans-serif;
    --font-unageo: 'Unageo', serif;
  }

  /* ----- Сбросы ----- */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  body {
    margin: 0;
    font-family: var(--font-geologica-cursive);
  }

  /* ----- Контейнер ----- */
  .container {
    width: 1480px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* ----- Типографика ----- */
  .section-title {
    font-family: var(--font-geologica);
    font-weight: 700;
    font-size: 92px;
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--dark);
  }
  .section-subtitle {
    font-family: var(--font-geologica-cursive);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.2;
    color: var(--dark);
  }
  .card-title {
    font-family: var(--font-geologica);
    font-weight: 700;
    font-size: 36px;
    line-height: 1.12;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--dark);
  }
  .card-text {
    font-family: var(--font-geologica-cursive);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--dark);
  }

  /* ----- Кнопки ----- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 100px;
    font-family: var(--font-geologica-cursive);
    font-weight: 500;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    padding: 20px 40px;
    transition: background-color 0.2s;
  }
  .btn-orange {
    background-color: var(--orange);
    color: var(--white);
  }
  .btn-orange:hover {
    background-color: #e55a22;
  }
  .btn-white {
    background-color: var(--white);
    color: var(--orange);
  }
  .btn-white:hover {
    background-color: #f5f5f5;
  }

  /* Кнопки категорий */
  .category-btn {
    font-size: 28.4px;
    font-weight: 500;
    height: 79px;
    padding: 0 40px;
    border-radius: 143px;
    white-space: nowrap;
  }

  /* ----- Верхняя навигация (общие классы) ----- */
  .nav-link {
    font-family: var(--font-geologica-cursive);
    font-weight: 400;
    font-size: 24.6px;
    color: var(--white);
    text-decoration: none;
    white-space: nowrap;
  }

  /* ----- Цифровые указатели ----- */
  .number-circle {
    width: 48.9px;
    height: 48.9px;
    background-color: var(--dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .number-circle span {
    font-family: var(--font-unageo);
    font-weight: 800;
    font-size: 34px;
    color: var(--white);
  }

  /* ----- Карточки мест ----- */
  .card {
    display: flex;
    gap: 40px;
    align-items: flex-start;
  }
  .card-image {
    width: 489px;
    border-radius: 30px;
    object-fit: cover;
  }
  .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* ----- Секция-обложка ----- */
  .cover-section {
    background-color: var(--orange);
    border-radius: 53px;
    height: 365px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
  }
  .cover-title {
    font-family: var(--font-geologica-cursive);
    font-weight: 400;
    font-size: 36.6px;
    letter-spacing: 0.02em;
    line-height: 1.2;
  }

  /* ----- Сетка категорий ----- */
  .category-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }

/* #endregion */

/* #region Хедер */
  .header-wrapper {
    position: relative;
    overflow: hidden;
    background-color: #FF6928;
    height: 1150px;
  }

  .header-container {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
  }

  /* ----- Фоновые изображения ----- */
  .hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
  }

  /* Десктопный фон */
  .hero-bg--desktop {
    display: block;
    background-image: url('images/hero-desctop.svg');
    /*background-size: cover;*/
    background-position: center top;
  }

  /* Мобильный фон – по умолчанию скрыт */
  .hero-bg--mobile {
    display: none;
    background-image: url('images/hero-mob.svg');
    background-size: cover;
    background-position: center -50px;
    width: 100%;
    height : 642px;
    background-size :100% 642px;
  }

  /* ----- Верхняя навигационная полоса ----- */
  .top-nav {
    background-color: var(--orange-light);
    border-radius: 0 0 30px 30px;
    height: 147px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 40px;
    padding-right: 40px;
    position: relative;
    z-index: 2;                  /* поверх фона */
  }

  .nav-left,
  .nav-right {
    display: flex;
    align-items: center;
    gap: 60px;
  }

  .header-logo {
    flex-shrink: 0;
  }

  .mobile-logo {
    display: none;
  }

  .logo-img {
    height: 53px;
    width: auto;
    display: block;
  }

  .top-nav .btn-white {
    padding: 10px 32px;
    font-size: 20px;
  }

  /* ----- Hero-секция (десктоп) ----- */
  .hero-section {
    position: relative;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 20px 20px;
  }

  .hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding-top: 40px;
    padding-bottom: 100px;
  }

  .hero-title {
    font-family: var(--font-geologica);
    font-weight: 700;
    font-size: 92px;
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--white);
    margin: 0 0 40px;
  }

  .hero-description {
    font-family: var(--font-geologica-cursive);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.25;
    color: var(--white);
    margin: 0 auto;
    max-width: none;
    text-align: center;
  }

  /* ----- Мобильная версия ----- */
  @media (max-width: 768px) {
    .header-wrapper {
      aspect-ratio: auto;   /* сбрасываем фиксированную пропорцию */
      height: auto;       
      min-height:  auto;
    }

    .header-container {
      max-width: 100%;
      padding: 0;
    }

    .top-nav {
      height: 54px;
      padding: 0;
      border-radius: 0;
      background-color: #FF824B;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
    }

    .nav-left {
      display: flex;
      gap: 20px;
      margin-left: 20px;
    }

    .nav-right {
      display: flex;
      gap: 20px;
      margin-right: 20px;
    }

    .nav-link {
      font-size: 10.8px;
      font-weight: 400;
      line-height: 1.2;
    }

    .top-nav .btn-white {
      width: 105px;
      height: 22px;
      padding: 0;
      font-size: 10.8px;
      line-height: 1;
      border-radius: 83px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FF6928;
      background-color: #FFFFFF;
    }

    .header-logo {
      display: none;
    }

    .mobile-logo {
      display: flex;
      justify-content: center;
      margin-top: 12px;
      position: relative;
      z-index: 2;
    }
    .mobile-logo img {
      height: 30px;
      width: auto;
    }

    /* Переключаем фоны */
    .hero-bg--desktop {
      display: none;
    }
    .hero-bg--mobile {
      display: block;
    }

    .hero-section {
      min-height: auto;
      height: 420px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      padding: 15px;
      margin-bottom: 0;
      position: relative;
    }

    .hero-content {
      position: relative;
      z-index: 1;
      width: 100%;
      text-align: center;
      padding: 20px 0 40px;
    }

    .hero-title {
      font-size: 32px;
      line-height: 1.1;
      margin-bottom: 20px;
    }

    .hero-description {
      font-size: 15px;
      line-height: 1.2;
      max-width: 280px;
      margin-left: auto;
      margin-right: auto;
    }

    .routes-section {
      margin-top: 0;
    }

    .site-main {
      margin-top: 0;
    }
  }
/* #endregion */

/* #region Блок "Маршруты" */

  /* ----- Внешний контейнер ----- */
  .routes-section {
    background-color: #410A14;
    width: 100%;
    overflow: hidden;                /* на всякий случай, чтобы ничего не вылезало */
    position: relative;
    z-index: 2;                      /* поверх фона */
    margin-top: -290px;              /* наезжает на низ hero */
  }

  /* ----- Общие стили для контейнеров (десктоп и мобильный) ----- */
  .routes-container {
    max-width: 1480px;
    margin: 0 auto;
    padding: 60px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
  }

  .routes-title {
    font-family: var(--font-geologica);
    font-weight: 700;
    font-size: 66.9px;
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--white);
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .routes-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
    max-width: 971px;
  }

  .route-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity 0.2s;
  }

  .route-link:hover {
    opacity: 0.85;
  }

  /* Десктопные размеры */
  .routes-desktop .route-link img {
    display: block;
    height: 79px;
    width: auto;
  }

  /* Мобильные размеры и скрытие по умолчанию */
  .routes-mobile {
    display: none;
  }
  .routes-mobile .route-link img {
    display: block;
    height: 38px;
    width: auto;
  }

    @media (max-width: 768px) {
    .routes-section {
      margin-top: 0;             /* на мобильных не наезжаем */
      z-index: auto;
    }
    .routes-desktop {
      display: none;
    }
    .routes-mobile {
      display: flex;
      flex-direction: column;
      align-items: center;          /* ← центрируем заголовок и кнопки */
      gap: 24px;
      padding: 40px 20px;
      max-width: 100%;
      width: 100%;
      box-sizing: border-box;
    }
    .routes-mobile .routes-title {
      font-size: 28px;
      text-align: center;          /* заголовок тоже центрирован */
      white-space: normal;
      flex-shrink: 1;
    }
    .routes-mobile .routes-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;     /* ← кнопки по центру */
      gap: 10px;
      max-width: 100%;
      width: 100%;
      box-sizing: border-box;
    }

    /* Убираем фиксированную ширину – кнопки сами подстроятся */
    .routes-mobile .route-link img {
      display: block;
      height: 38px;
      width: 100%;
      max-width: 100%;
    }

    /* Предотвращаем горизонтальную прокрутку */
    .routes-section {
      overflow-x: hidden;
    }
    body {
      overflow-x: hidden;
    }
  }

/* #endregion */

/* #region Оранжевый футер в стиле Figma */

.site-footer--orange {
    background: #FF6928;
    color: #fff;
    border-radius: 53px; /* примерно как в макете */
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 40px 20px;
    box-sizing: border-box;
}

.footer-widgets {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    max-width: 1140px;
    margin: 0 auto;
}

.footer-col {
    flex: 1;
    min-width: 200px;
}

.footer-col h4 {
    margin-top: 0;
    font-size: 18px;
    font-weight: 700;
}

.footer-col p,
.footer-col li {
    font-size: 14px;
    opacity: 0.9;
    margin: 0 0 10px;
    line-height: 1.4;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col a {
    color: #fff;
    text-decoration: none;
}

.footer-col a:hover {
    text-decoration: underline;
}

/* Нижняя строка */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 20px;
    margin-top: 30px;
    text-align: center;
    font-size: 14px;
}

.footer-bottom p {
    margin: 4px 0;
}

.footer-credits {
    font-size: 12px;
    opacity: 0.6;
}

.footer-credits a {
    color: inherit;
    text-decoration: underline;
}
/* #endregion */


/* ============================================================
   ЕДИНЫЙ ДЕСКТОПНЫЙ АДАПТИВ (vw) 
   ============================================================ */
@media (min-width: 769px) {
    /* Глобальные поля 8vw */
    body {
        padding-left: 8vw !important;
        padding-right: 8vw !important;
        box-sizing: border-box !important;
    }
    body .header-wrapper,
    body .routes-section,
    body .site-footer--orange {
        margin-left: -8vw !important;
        margin-right: -8vw !important;
        width: calc(100% + 16vw) !important;
        padding-left: 8vw !important;
        padding-right: 8vw !important;
        box-sizing: border-box !important;
        max-width: none !important;
    }
    body .header-container,
    body .routes-container {
        max-width: 1480px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* === Масштабирование хедера (шапка + hero) === */
    .header-wrapper {
        height: 59.8958vw;                     /* 1150 / 1920 */
        max-height: 1150px;
    }

    /* Десктопный hero-фон: делаем его всегда на всю ширину экрана и пропорционально сжимаем */
    .hero-bg--desktop {
        display: block !important;
        background-size: 100% auto !important; /* маcштабируется строго по ширине */
        background-position: center top !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 100vw !important;
        height: 100% !important;
    }

    /* Навигационная панель */
    .top-nav {
        height: 7.6563vw !important;            /* 147 / 1920 */
        padding-left: 2.0833vw !important;      /* 40 / 1920 */
        padding-right: 2.0833vw !important;
        border-radius: 0 0 1.5625vw 1.5625vw !important; /* 30 / 1920 */
    }
    .nav-left,
    .nav-right {
        gap: 3.125vw !important;                /* 60 / 1920 */
    }
    .logo-img {
        height: 2.7604vw !important;            /* 53 / 1920 */
    }
    .nav-link {
        font-size: 1.2813vw !important;         /* 24.6 / 1920 */
    }
    .top-nav .btn-white {
        font-size: 1.0417vw !important;         /* 20 / 1920 */
        padding: 0.5208vw 1.6667vw !important;  /* 10 / 1920, 32 / 1920 */
    }

    /* Hero-секция (текст) */
    .hero-section {
        max-width: 77.0833vw !important;        /* 1480 / 1920 */
        padding: 0 1.0417vw 1.0417vw !important;/* 0, 20, 20 */
    }
    .hero-content {
        padding-top: 2.0833vw !important;       /* 40 / 1920 */
        padding-bottom: 5.2083vw !important;    /* 100 / 1920 */
    }
    .hero-title {
        font-size: 4.7917vw !important;         /* 92 / 1920 */
        margin-bottom: 2.0833vw !important;     /* 40 / 1920 */
    }
    .hero-description {
        font-size: 1.4583vw !important;         /* 28 / 1920 */
    }

    /* === Блок "Маршруты" (десктоп) === */
    .routes-container.routes-desktop {
        padding: 3.125vw 1.0417vw !important;   /* 60, 20 */
        gap: 2.0833vw !important;               /* 40 */
    }
    .routes-desktop .routes-title {
        font-size: 3.4844vw !important;         /* 66.9 / 1920 */
    }
    .routes-desktop .routes-grid {
        gap: 1.0417vw !important;               /* 20 */
        max-width: 50.5729vw !important;        /* 971 / 1920 */
    }
    .routes-desktop .route-link img {
        height: 4.1146vw !important;            /* 79 / 1920 */
        width: auto !important;
    }

    /* Фикс наложения: делаем отрицательный margin-top масштабируемым */
    .routes-section {
        margin-top: -15.1042vw !important;
    }
}