@font-face {
    font-family: 'Roboto';
    src: url('/Roboto.ttf') format('truetype');
}
/*
    Это тот самый общий файл стилей, о котором мы говорили — он подключается
    одной строчкой (<link rel="stylesheet" href="style.css">) на каждой
    странице сайта, и всё, что здесь написано, применяется сразу везде.
    Пока здесь только правила для шапки и подвала — остальное (тетрис-сетка,
    карточки) допишем позже, когда до них дойдём.
*/

/* Шаг 1: у html и body по умолчанию высота "по содержимому".
   Явно говорим им занять 100% высоты окна браузера — иначе дальше
   просто нечему будет быть "всей высотой экрана". */
html, body {
    height: 100%;
    margin: 0;  /* заодно убираем стандартный отступ браузера по краям страницы */
}

/* Шаг 2: превращаем body в вертикальную гибкую колонку.
   Тогда шапка, main и подвал (все — прямые "дети" body) автоматически
   выстраиваются друг под другом, и одному из них можно отдать
   всё оставшееся свободное место. */
body {
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
}

/* Шаг 3: именно этот блок (тег <main class="main-content"> в index.html)
   забирает себе всё пустое место между шапкой и подвалом.
   flex: 1 0 auto означает "разрешено расти (1), не разрешено сжиматься
   меньше своего содержимого (0), начальный размер — по содержимому (auto)".
   Именно из-за этого правила при малом количестве контента на странице
   подвал не окажется посередине экрана, а останется прижат к низу. */
.main-content {
    flex: 1 0 auto;
}

/* Правило для шапки (тег <header class="site-header"> внутри header.html) */
.site-header {
    display: flex;              /* включаем гибкую раскладку */
    justify-content: space-between; /* логотип — к левому краю, контакты — к правому, между ними всё свободное место */
    flex-wrap: wrap;                 /* на очень узких экранах блоки разрешено переносить друг под друга */
    align-items: center;        /* выравниваем логотип и текст по центру по высоте */
    padding: 15px 20px;         /* внутренний отступ шапки от края блока до содержимого */
    box-sizing: border-box;     /* чтобы padding не увеличивал общую ширину блока */
    border-bottom: 10px solid rgb(33, 167, 63); /* та самая тонкая зелёная линия снизу */
}

.site-header__contacts-group {
    display: flex;
    gap: 20px; /* расстояние между соседними блоками контактов внутри группы */
}

/* Ограничиваем высоту логотипа, чтобы большая картинка не растянула всю шапку */
.site-header__logo {
    height: 75px;
    width: auto; /* ширина подстроится сама, чтобы картинка не исказилась */
}

/* Блок с телефоном и почтой справа */
.site-header__contacts {
    text-align: right;
    font-size: 14px;
    color: #333;
    display: flex;
    flex-direction: column; /* телефон и почта — друг под другом */
    gap: 10px;
}

/* Добавляем подчёркивание аля ссылка и заменяем синий цвет у ссылок телефона/почты */
.site-header__contacts a {
    font-weight: bold;
    color: #333;
    text-decoration: underline;
}

/* Правило для подвала (тег <footer class="site-footer"> внутри footer.html) */
.site-footer {
    display: flex;
    justify-content: space-between; /* левый блок и правый блок — по разным краям */
    gap: 20px;                       /* расстояние между блоками, если экран узкий и они сближаются */
    flex-wrap: wrap;                 /* на очень узких экранах блоки разрешено переносить друг под друга */
    background-color: #313131;       /* тёмная заливка подвала */
    color: #f4f4f4;                  /* светлый текст, чтобы было видно на тёмном фоне */
    padding: 20px;
    box-sizing: border-box;
}

/* Убираем стандартные отступы у абзацев внутри подвала — по умолчанию
   браузер добавляет вокруг <p> лишние поля, а нам это здесь не нужно */
.site-footer p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5; /* расстояние между строк текста для читаемости */
}
.site-footer a {
    color: inherit;
/*    font-weight: bold;*/
    text-decoration: underline;
}
.site-footer__about {
    flex: 2;
}

.site-footer__address {
    flex: 1;
}

/* Широкая кнопка-баннер на всю ширину страницы */
.wide-banner-link {
    display: block;
    margin: 20px;             /* та самая просьба про отступ 20px со всех сторон */
    padding: 20px;
    box-sizing: border-box;
    background-color: white;
    color: rgb(33, 167, 63);  /* текст фирменным зелёным вместо белого на зелёном */
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 2px;
    border: 2px solid rgb(33, 167, 63); /* контур того же зелёного, раз заливка стала белой */
    border-radius: 12px;      /* скруглённые углы */
    box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* лёгкая тень — чтобы блок читался как приподнятая кнопка, а не плоская полоса */
}
/* Контейнер карусели: включаем горизонтальную прокрутку с "прилипанием" к каждой картинке */
.carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;         /* прокрутка всегда "доезжает" ровно до края картинки */
    -webkit-overflow-scrolling: touch;     /* плавная инерционная прокрутка на iPhone */
}

/* Каждая картинка занимает ровно всю ширину экрана и не сжимается */
.carousel__slide {
    flex: 0 0 100%;
    width: 100%;
    height: auto;       /* высота подстраивается сама, сохраняя пропорции картинки */
    display: block;
    scroll-snap-align: start; /* именно к этой точке "прилипает" прокрутка */
}

/* Сетка каталога: сама решает, сколько карточек влезает в ряд —
   4 на широком мониторе, 1 на телефоне, без единого фиксированного брейкпоинта */
.tetris-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin: 20px;
}

/* Карточка — тот же стиль, что у кнопки Технопарка: белая, скруглённая, с тенью */
.catalog-card {
    display: flex;
    flex-direction: column;
    background-color: white;
    border: 2px solid rgb(33, 167, 63);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    overflow: hidden;
    text-decoration: none;
    color: #333;
}

.catalog-card__image {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.catalog-card__title {
    margin: 10px 15px 5px 15px;
    font-size: 16px;
    color: rgb(33, 167, 63); /* тот же зелёный, что и заголовок кнопки Технопарка */
    font-weight: bold;
}

.catalog-card__price {
    margin: 0 15px 15px 15px;
    font-size: 14px;
    color: #777;
}

/* Обёртка — точка отсчёта для абсолютного позиционирования */
.carousel-wrapper {
    position: relative;
    width: 100%;
    /* Высота автоматически определится картинками, 
       но если картинки разной высоты — можно зафиксировать: */
    /* height: 400px; */
}

/* Наложение — поверх карусели
/* Родительский контейнер — относительное позиционирование */
.carousel-wrapper {
    position: relative;
    /* высота автоматическая от картинок, можно зафиксировать при необходимости */
}

/* Контейнер оверлеев — абсолютно поверх карусели */
.overlays-container {
    position: absolute;
    top: 30px;
    left: 30px;
    right: 30px;         /* симметричные отступы от краёв */
    display: flex;
    flex-wrap: wrap;     /* перенос на новую строку при нехватке места */
    gap: 20px;           /* расстояние между оверлеями */
    pointer-events: none; /* чтобы клики проходили сквозь контейнер, но не сквозь оверлеи */
}

/* Сам оверлей — теперь обычный блок в потоке */
.overlay {
    background: white;
    padding: 30px 40px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    box-sizing: border-box;
    text-align: center;
    flex: 1 1 auto;      /* позволяет блокам расти/сжиматься */
    min-width: 280px;    /* минимальная ширина, чтобы не слишком мельчили */
    max-width: 800px;    /* как у вас было */
    pointer-events: auto; /* внутри оверлея клики работают */
}

/* Дополнительный стиль для второго оверлея (если нужно выделить) */
.overlay--second {
    /* можно задать другой фон или отступы, если нужно */
}

/* Адаптация iframe внутри оверлея */
.overlay iframe {
    max-width: 100%;
    border: none;
}
/* Контейнер для двух колонок внутри оверлея */
.two-col {
    display: flex;
    flex-wrap: wrap;          /* перенос на узких экранах */
    gap: 20px;                /* отступ между колонками */
    margin-top: 15px;
}

/* Каждая колонка */
.two-col__item {
    flex: 1 1 250px;          /* базовая ширина 250px, разрешаем расти и сжиматься */
    min-width: 150px;         /* чтобы не стали слишком узкими */
    box-sizing: border-box;
}

/* Картинка внутри колонки — на всю ширину */
.two-col__item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;       /* лёгкое скругление, опционально */
}