/* ——— Root Variables ——— */
      /* Defines color palette and typography variables that can be easily customized */
      :root {
        --accent: #c49a6c;       /* Акцентный цвет */
        --accent-hover: #b4834f; /* Цвет при наведении */
        --dark: #2e2e2e;         /* Основной текст */
        --light: #f8f8f8;        /* Фон страницы */
        --white: #ffffff;
        --font-base: 'Poppins', sans-serif; /* Базовый шрифт */
        --fs-xxl: 3rem;    /* Размер H1 */
        --fs-xl: 2.5rem;   /* Размер H2 */
        --fs-lg: 1.25rem;  /* Размер вступительного текста */
        --fs-md: 1rem;     /* Размер основного текста */
      }

      /* Poppins 300, 400, 600 – latin + latin-300-ext */
      /* poppins-300 - latin_latin-ext */
      @font-face {
        font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 300;
        src: url('../fonts/poppins-v23-latin_latin-ext-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      }
      /* poppins-regular - latin_latin-ext */
      @font-face {
        font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 400;
        src: url('../fonts/poppins-v23-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      }
      /* poppins-600 - latin_latin-ext */
      @font-face {
        font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 600;
        src: url('../fonts/poppins-v23-latin_latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      }
      
      /* ——— Global Reset ——— */
      /* Reset margins, paddings and box-sizing for all elements */
      *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      body {
        font-family: var(--font-base);
        font-size: var(--fs-md);
        color: var(--dark);
        line-height: 1.6;
        background-color: var(--light);
      /* новее — делает страницу flex-контейнером во всю высоту */
      //  display: flex;
      //  flex-direction: column;
      //  min-height: 100vh;      /* гарантирует высоту ≥ высоты экрана */
      }
      a {
        color: inherit;
        text-decoration: none;
      }

      /* ——— Layout Helpers ——— */
      /* Container widths and typography defaults for a consistent layout */
      .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
      }
      h1, h2, h3 {
        font-weight: 600;
        color: var(--dark);
      }


/* ——— Navigation Bar ——— */
nav { background: var(--white); box-shadow: 0 2px 10px rgba(0,0,0,0.05); padding: 1rem 0; position: sticky; top: 0; z-index: 100; }
/* .container внутри nav становится относительным, 
   чтобы позиционировать гамбургер абсолютно относительно него */
nav .container {
  position: relative;           /* задаёт контекст позиционирования для .hamburger */
  display: flex;                /* горизонтальный флекс-контейнер */
  justify-content: space-between; /* логотип слева, меню/гамбургер справа */
  align-items: center;          /* выравнивание по вертикали */
}
/* Отступ у логотипа слева для единого оформления */
.logo {
  padding-left: 1.5rem;         /* фиксированный отступ слева */
}
.nav-links {
  padding-right: 1.5rem;         /* фиксированный отступ слева */
}
/* ——— Navigation Links ——— */
/* Сам список ссылок (ul) отображается флексом и имеет интервалы */
nav ul {
  list-style: none;             /* убираем маркеры списка */
  display: flex;                /* горизонтальный ряд пунктов меню */
  gap: 1.125rem;                /* расстояние между пунктами */
}

/* ——— Hamburger Button ——— */
/* Кнопка-гамбургер из трёх полосок, по умолчанию скрыта на больших экранах */
.hamburger {
  position: absolute;           /* фиксируется внутри nav .container */
  top: 50%;                     /* центрируем по вертикали относительно контейнера */
  right: 1.5rem;                  /* отступ справа */
  transform: translateY(-50%);  /* точное вертикальное центрирование */
  display: none;                /* будет показана только в медиа-запросе */
  flex-direction: column;       /* полоски выстраиваются вертикально */
  justify-content: space-between; /* равные промежутки между полосками */
  width: 24px;                  /* ширина всей кнопки */
  height: 18px;                 /* высота всей кнопки */
  background: none;             /* без фона */
  border: none;                 /* без рамки */
  padding: 0;                   /* без внутренних отступов */
  cursor: pointer;              /* курсор-поинтер при наведении */
  z-index: 200;                 /* поверх выпадающего меню */
}

/* Сами «полоски» внутри кнопки */
.hamburger span {
  display: block;               /* блочный элемент для управления размерами */
  width: 100%;                  /* растягиваем на всю ширину кнопки */
  height: 2px;                  /* высота каждой полоски */
  background: var(--dark);      /* цвет полоски из переменной темы */
  border-radius: 1px;           /* чуть скругляем концы полосок */
}

/* Ховер для ссылок */
nav a:hover {
  color: var(--accent);
}

      /* ——— Header / Hero ——— */
      /* Hero section with background image, overlay and centered text */
      header {
	    max-width: 1200px;         /* та же максимальная ширина */
		margin: 0 auto;
        position: relative;
        height: 40vh;
        background: url('../img/claire.png') center/cover no-repeat;
        display: flex;
        flex-direction: column;
        align-items: flex-end;      /* сдвигаем контент вправо */
        padding-right: 5%;          /* отступ справа */
        text-align: right;          /* выравнивание текста по правому краю */
        color: var(--white);
        justify-content: center;    /* по вертикали */
      }
      header::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*background: rgba(0,0,0,0.45);*/
      }
      header > * {
        position: relative;
        z-index: 1;
      }
      header h1 {
	    margin-top: 0;
        font-size: var(--fs-xxl);
        margin-bottom: .5rem;
        text-shadow: 0 2px 6px rgba(0,0,0,0.4);
      }
      header p {
        font-size: var(--fs-lg);
        margin-bottom: 1.5rem;
      }

      /* ——— Buttons ——— */
      /* Primary button styles: color, padding, border-radius and hover effect */
      .btn {
        display: inline-block;
        padding: .75rem 1.5rem;
        background: var(--accent);
        color: var(--white);
        border: none;
        border-radius: 50px;
        cursor: pointer;
        transition: background .3s;
      }
      .btn:hover {
        background: var(--accent-hover);
      }

      /* ——— Section Base ——— */
      /* Base section styles: vertical padding and heading alignment */
      section {
        padding: 2rem 0;
        scroll-margin-top: 3rem;
      }
      .section-padding {
		padding-left: 1rem;
		padding-right: 1rem;
      }
      .section--light {
        background: var(--white);
      }
      .section--light-padding {
        background: var(--white);
		padding-left:1rem;
		padding-right: 1rem;
      }
      section h2 {
        text-align: center;
        margin-bottom: 2rem;
        font-size: var(--fs-xl);
      }

/* ——— About Section ——— */
/* Базовая стилизация контейнера */
#about .about__content {
  max-width: 1200px;
  margin: 0 auto;
//  font-size: 1.125rem;
//  line-height: 1.5;
  padding: 0 1rem;       /* горизонтальные отступы */
}

/* Приветствие (занимает всю ширину контейнера) */
#about .about__content .about-greeting {
  margin-bottom: 1rem;   /* отступ под блоком */
  font-size: 1.5rem;
  text-align: center;
}
#about .about__content .about-greeting p {
  text-align: left;
  text-indent: 2rem;      отступ первой строки (можно менять) */
  margin-bottom: 1rem;
}

/* Подробный блок (скрыт по умолчанию) */
#about .about__content .about-details.collapsed {
  display: none;
}

/* Подробный блок разворачивается в грид две колонки */
#about .about__content .about-details:not(.collapsed) {
  display: grid;
  grid-template-columns: 1fr 1fr; /* текст и картинка */
  gap: 2rem;
  font-size: 1.5rem;
  align-items: start;             /* выравнивание по верху */
  margin-bottom: 1rem;            /* отступ до кнопки */
}

/* Стили параграфов внутри подробного блока */
#about .about__content .about-details p {
  text-align: justify;
  text-indent: 2rem;
  margin-bottom: 0.5rem;
}

/* Стили изображения внутри подробного блока */
#about .about__content .about-details img {
  width: 100%;
  border-radius: 15px;
}

/* Кнопка «Mehr anzeigen» / «Weniger anzeigen» */
.about-toggle-btn {
  display: block;
  margin: 1rem auto 0;
  background: var(--accent);
  color: #fff;
  padding: .75rem 1.5rem;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: background .3s;
}
.about-toggle-btn:hover {
  background: #b4834f;
}

      /* ——— Services Grid ——— */
      /* Responsive grid layout for service cards with gap and auto-fit columns */
      .services {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(282px, 1fr));
        gap: 1.125rem;
      }
      .card {
	    cursor: pointer;
        background: var(--white);
        border-radius: 20px;
        padding: 1.5rem;
        box-shadow: 0 4px 16px rgba(0,0,0,0.06);
        text-align: center;
        transition: transform .3s;
      }
      .card:hover {
        transform: translateY(-6px);
      }
      .card h3 {
        //margin-top: 1rem;
        font-size: 1.25rem;
      }
      /* Стили для изображения в карточке услуги */
      .card__img {
        width: 100%;           /* картинка растягивается по ширине карточки */
        height: auto;          /* сохраняет пропорции */
        border-radius: 20px; /* скруглённые углы под стиль карточки */
        object-fit: cover;     /* кадрирует изображение по центру */
        //margin-bottom: 1rem;   /* небольшой отступ до заголовка */
      }
      .teaser {
        margin-bottom: 1rem;
        //font-size: 1.25rem;
      }	  
      /* ——— Gallery Grid ——— */
      /* Responsive image gallery grid with fixed-height thumbnails and object-fit */
      .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;	
		padding-left: 1rem;
        padding-right: 1rem;
      }
      .gallery img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        border-radius: 15px;
      }
/* ——— Lightbox Gallery ——— */
.lightbox {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.85);
  display: none;               /* скрыт по умолчанию */
  align-items: center;
  justify-content: center;
  z-index: 500;                /* выше модалок и навигации */
}
.lightbox.open {
  display: flex;               /* flex-контейнер для центрирования */
}
.lightbox__img {
  max-width: 90%;
  max-height: 80%;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.5rem;
  cursor: pointer;
  padding: .5rem;
  line-height: 1;
}
.lightbox__close {
  top: 1rem;
  right: 1.5rem;
}
.lightbox__prev {
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__next {
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__close:focus,
.lightbox__prev:focus,
.lightbox__next:focus {
  outline: 2px solid var(--accent);
}

      /* ——— Modal & Read More ——— */
      /* Read more button and modal dialog styles for detailed content display */
      .read-more-btn {
        background: var(--accent);
        color: var(--white);
        border: none;
        padding: .5rem 1rem;
        border-radius: 50px;
        cursor: pointer;
        transition: background .3s;
        font-size: .9rem;
      }
      .read-more-btn:hover {
        background: var(--accent-hover);
      }
      .modal {
        display: none;               /* По умолчанию скрыта */
        position: fixed;             /* Фиксированное позиционирование */
        top: 0; left: 0;
        width: 100%; height: 100%;   /* Покрывает весь экран */
        background: rgba(0,0,0,0.5); /* Полупрозрачный фон */
        justify-content: center;     /* Центрирование по горизонтали */
        align-items: center;         /* Центрирование по вертикали */
        padding: 1rem;
      }
      .modal.open {
        display: flex;               /* Показать при открытии */
      }
      .modal-content {
        background: var(--white);
        border-radius: 15px;
        max-width: 600px;
        width: 100%;
        max-height: 80vh;
        overflow-y: auto;
        padding: 2rem;
        position: relative;
      }
      .modal-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
      }

      /* ——— Contact & Footer ——— */
      /* Grid layout for contact info and styles for footer background and text */
      .contact-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
        align-items: center;
		padding-left: 1rem;
        padding-right: 1rem;
      }
      footer {
        background: #222;
        color: #ddd;
        text-align: center;
        padding: 2rem 0;
        font-size: .9rem;
		margin-top: auto;
      }
      footer a:hover {
        text-decoration: underline;
      }

/* ——— Responsive ——— */
/* Адаптивные стили для экранов до 768px */
@media (max-width: 768px) {
  /* Показываем гамбургер-кнопку */
  .hamburger {
    display: flex;
  }

  /* Скрываем основной список, приклеиваем его к правому краю,
     ширина = ширине самого широкого пункта + 25px отступы */
  nav .nav-links {
    display: none;
    position: absolute;
    top: 166%;
    right: 0;              /* выравнивание по правому краю */
    width: max-content;       /* ширина зависит от контента */
    white-space: nowrap;      /* не даём пунктам переноситься */
    padding: 25px;             /* отступы внутри фона */
    background: var(--white);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    border-radius: 6px;
    flex-direction: column;   /* пункты меню – в колонку */
    gap: 1rem;                /* расстояние между пунктами */
  }

  /* Показываем список, когда nav имеет класс .open */
  nav.open .nav-links {
    display: flex;
  }

  /* Увеличиваем читаемость ссылок в выпадающем меню */
  nav .nav-links a {
    font-size: 2.5rem;       /* больший и жирный шрифт */
    font-weight: 400;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.5);
  }

  /* Адаптация шапки */
  header {
    height: 40vh;
    background: url('../img/claire.png') center/cover no-repeat;
	justify-content: flex-start;    /* по вертикали */
	padding: 0% 5% 0;  /* 2rem сверху, 5% по бокам, 0 снизу */
  }
  header h1 {
    font-size: 2rem;
	margin-top: 0;
  }
  header p {
    font-size: 1rem;
	text-shadow: -2px 2px 4px rgba(0,0,0,0.5);
  }
	  .small-title {
        font-size: 30px;
      }
  /* Переключаем About-секцию на одну колонку */
  #about .about__content {
 //   gap: 15px;
    font-size: 0.9rem;
  }
  #about .about__content .about-greeting {
    font-size: 0.9rem;
  }
  #about .about__content .about-greeting p {
    text-align: left;   /* выравнивание по ширине */
    text-indent: 2rem;      отступ первой строки (можно менять) */
    //margin-bottom: 1rem;   /* отступ между абзацами */
  }
  /* Подробный блок: текст и картинка в одну колонку */
  #about .about__content .about-details:not(.collapsed) {
    display: grid;
    grid-template-columns: 1fr; /* одна колонка */
    font-size: 0.9rem;
	//margin-bottom: 1rem;   /* отступ между абзацами */
  }
 /* ---------- Klaro: компактная модалка на телефонах ---------- */
  /* основной контейнер модалки */
  #klaro .cookie-modal {
    width: 92%;                        /* вместо 100 % */
    max-width: 420px;                  /* не шире 420 px */
    max-height: 85vh;                  /* оставляем немного места сверху/снизу */
    top: 7vh;                          /* смещаем от края */
    border-radius: 14px;
    overflow: hidden;                  /* скругление работает и у контента */
  }

  /* внутренняя прокрутка вместо «растягивания» всего окна */
  #klaro .cookie-modal__body {
    max-height: 60vh;                  /* остаётся 60 % высоты под список сервисов */
    overflow-y: auto;
  }

  /* уменьшаем отступы и заголовок, чтобы влазило больше текста */
  #klaro .cm-modal h1 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }
  #klaro .cm-modal .cm-modal__content {
    padding: 1.25rem;
  }
 }