/* Start:/anniversary/css/style.css?178393209914146*/
/* ============================================================
   Мегарозыгрыш к 30-летию Берёзки — Строительный фестиваль
   HTML + CSS, БЭМ, адаптив
   ============================================================ */

/* ---------- Шрифт заголовков ---------- */
@font-face {
    font-family: 'TT Rounds Neue';
    src: url('/anniversary/css/../fonts/TTRoundsNeue-Black.woff2') format('woff2'),
         url('/anniversary/css/../fonts/TTRoundsNeue-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ---------- Переменные ---------- */
:root {
    --font-head: 'TT Rounds Neue', 'Montserrat', Arial, sans-serif;

    --c-green:        #85bc3f;
    --c-green-dark:   #6ea82c;
    --c-heading:      #2C742E;
    --c-orange:       #FFAE00;
    --c-cream:        #fcf5e7;
    --c-text:         #414141;
    --c-muted:        #9a9a9a;

    /* широкая колонка контента (~13% поля по краям, как в макете) */
    --container: 1400px;
}

/* ---------- База / сброс ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    color: var(--c-text);
    line-height: 1.4;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a   { text-decoration: none; color: inherit; }
ul  { margin: 0; padding: 0; list-style: none; }
h1, h2, p { margin: 0; }

/* ---------- Общий контейнер ---------- */
.breadcrumbs__container,
.hero__container,
.entertainment__container,
.family__container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 15px;
}

/* ============================================================
   ХЛЕБНЫЕ КРОШКИ
   ============================================================ */
.breadcrumbs {
    padding: 16px 0;
    font-size: 13px;
}
.breadcrumbs__container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.breadcrumbs__link    { color: var(--c-muted); transition: color .2s; }
.breadcrumbs__link:hover { color: var(--c-green); }
.breadcrumbs__sep     { color: #cfcfcf; }
.breadcrumbs__current { color: #6f6f6f; }

/* ============================================================
   HERO — баннер на всю ширину
   ============================================================ */
.hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 1100 / 470;      /* пропорции макета */
    min-height: 340px;
    display: flex;
    align-items: flex-start;       /* плашка «висит» от верха, как в макете */
}

/* фон (газон + магазин) */
.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* вырезанная семья поверх фона */
.hero__people {
    position: absolute;
  bottom: 0;
  left: 65%;
  transform: translateX(-50%);
  height: 80%;
  width: auto;
  z-index: 1;
  pointer-events: none;
}

/* Рваные края: зубцы ЦВЕТА ФОНА «надкусывают» фото (как в макете) */
.hero__edge {
    position: absolute;
    left: 0;
    width: 100%;
    height: 16px;
    z-index: 4;
}
.hero__edge--top {
    top: -1px;
    background: #fff;              /* цвет страницы над баннером */
    -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 22px 100% repeat-x;
            mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 22px 100% repeat-x;
}
.hero__edge--bottom {
    bottom: 0;
    background: var(--c-cream);    /* цвет секции под баннером */
    -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 22px 100% repeat-x;
            mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 22px 100% repeat-x;
}

.hero__container {
    position: relative;
    z-index: 3;
}

/* Зелёная плашка-баннер: зубцы сверху + острый низ, висит от верха */
.hero__badge {
position: relative;
  display: flex;
  max-width: 535px;
  margin-top: 0;
  padding: 69px 36px 30px;
  background: var(--c-green);
  color: #fff;
  text-align: center;
  gap: 24px;
  flex-direction: column;
  align-items: center;
}
.hero__badge::before {   /* зелёные зубцы сверху (торчат вверх) */
    content: "";
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 100%;
    height: 12px;
    background: var(--c-green);
    -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 21px 100% repeat-x;
            mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 21px 100% repeat-x;
}
.hero__badge::after {    /* острый низ (пятиугольник) */
    content: "";
    position: absolute;
    left: 0;
    top: calc(100% - 1px);
    width: 100%;
    height: 52px;
    background: var(--c-green);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.hero__title {
    color: #fff;
    margin: 0;
    font-family: var(--font-head);
    font-size: 49px;
    font-weight: 900;
    line-height: 1.12;
    text-transform: uppercase;
}
.hero__date {
    font-size: 23px;
    font-weight: 700;
	color: #FFE100;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin: 0;
}
.hero__subtitle {
font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  max-width: 340px;
    margin: 0;
}

/* ============================================================
   РАЗВЛЕЧЕНИЯ
   ============================================================ */
.entertainment {
    position: relative;
    background: var(--c-cream);
    padding: 150px 0 90px;
    overflow: hidden;
}

.entertainment__container { position: relative; z-index: 2; }

.entertainment__title {
    position: relative;
    margin-bottom: 100px;
    text-align: center;
    font-family: var(--font-head);
    font-size: 47px;
    font-weight: 900;
    line-height: 120%;
    text-transform: uppercase;
	letter-spacing: 1.5px;
    color: var(--c-heading);
}
.entertainment__sparkle {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-150px);
    width: 40px;
    height: auto;
}

/* --- Сетка карточек: диагональный каскад — 2-й ряд смещён вправо на 1 колонку --- */
.cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}
.card:nth-child(1) { grid-area: 1 / 1; }   /* ряд 1: колонки 1-2-3 */
.card:nth-child(2) { grid-area: 1 / 2; }
.card:nth-child(3) { grid-area: 1 / 3; }
.card:nth-child(4) { grid-area: 2 / 2; }   /* ряд 2: колонки 2-3-4 */
.card:nth-child(5) { grid-area: 2 / 3; }
.card:nth-child(6) { grid-area: 2 / 4; }

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 360px;
    padding: 24px 64px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 26px rgba(120, 120, 70, .09);
}
.card::before  {
    display: none;
}
.card__icon {
    width: auto;
    height: 202px;
    object-fit: contain;
    margin-bottom: 54px;
}
.card__text {
    color: #3f3f3f;	
	font-weight: 700;
	font-size: 24px;
	line-height: 120%;
	text-align: center;
    margin-top: auto;
}
.card__note {
    font-size: 24px;
    font-weight: 700;
    color: var(--c-orange);
    margin-top: 10px;
}

/* Карточка розыгрыша */
.card--promo {
    justify-content: flex-start;
    padding-top: 46px;
}
.card__hint {
    position: absolute;
    top: 14px;
    left: 16px;
    right: 16px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    color: #E93415;
}
.card__button {
    margin-top: 16px;
    display: inline-block;
    padding: 11px 24px;
    background: var(--c-green);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    transition: .3s;
}
.card__button:hover { background: var(--c-green-dark); color: #fff; transition: .3s; }

/* ---------- Декор: конфетти и шары (картинки) ---------- */
.entertainment__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}
.entertainment__confetti {
    position: absolute;
    top: 0;
    height: auto;
}
.entertainment__confetti--left  {
    left: 0;
    width: 40%;
    max-width: 760px;
    top: 168px;
}
.entertainment__confetti--right {
    right: 0;
    width: 30%;
    max-width: 570px;
    top: -273px;
}

.balloon { position: absolute; height: auto; }
.balloon--yellow {
    left: 84px;
    top: 51px;
}
.balloon--red {
    right: 62px;
    top: 400px;
}

/* ============================================================
   ПРИХОДИТЕ ВСЕЙ СЕМЬЁЙ — блок на всю ширину
   ============================================================ */
.family {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #f2f8ea, #e8f2d9);
}
.family::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 16px;
    z-index: 4;
    content: '';
    background: var(--c-cream);
    -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 22px 100% repeat-x;
    mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 22px 100% repeat-x;
}

.family__container { position: relative; z-index: 2; }

.family__content {
    max-width: 500px;
    padding: 110px 0 137px;
    display: flex;
    gap: 30px;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.family__heart {
    height: auto;
}
.family__title {
    font-family: var(--font-head);
    font-size: 49px;
    font-weight: 900;
    line-height: 1.08;
    text-transform: uppercase;
    color: var(--c-heading);
    margin: 0;
    text-align: center;
}
.family__info {
    font-size: 23px;
    line-height: 120%;
    color: #2C742E;
    margin: 0;
}

/* Фото магазина справа, мягко растворяется в фоне слева */
.family__image {
    position: absolute;
    top: 0;
    right: 0;
    width: 42%;
    height: 100%;
    /*object-fit: cover;
    object-position: center;*/
    z-index: 0;
    -webkit-mask: linear-gradient(to right, transparent 0, #000 17%);
            mask: linear-gradient(to right, transparent 0, #000 17%);
}

/* Облака-акварель — мягкая дымка у левого края фото магазина */
.family__cloud { position: absolute; z-index: 1; pointer-events: none; }
.family__cloud--1 { left: 0%;  top: 0;  opacity: .8; }   /* облако слева */
.family__cloud--2 {
    left: 40%;
    top: 50%;
    width: 500px;
    opacity: .85;
    transform: translateY(-50%);
}
@media (max-width: 1599px) {
    .family__cloud--2 {
        left: 25%;
    }
    .family__image {
        width: 50%;
    }
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 1399px) {
    .card {
        padding: 24px;
    }
    .family__image {
        width: 67%;
    }
    .family__cloud--2 {
        left: 11%;
    }
}
@media (max-width: 1199px) {
    .hero__people {
        left: auto;
        right: 0;
        transform: none;
    }
    .hero__badge {
        max-width: 460px;
    }

    .hero__title     { font-size: 36px; }

    .entertainment        { padding: 56px 0 70px; }
    .entertainment__title { font-size: 28px; margin-bottom: 40px; }
    .entertainment__sparkle { transform: translateX(-120px); width: 34px; }

    /* на планшете каскад убираем, сетку центрируем */
    .cards { grid-template-columns: repeat(2, 1fr); max-width: 657px; margin: 0 auto; }
    .cards .card { grid-area: auto; }
    .card__icon {
        margin-bottom: 30px;
    }
    .card.card--promo {
        padding-top: 40px;
    }

    .family__title   { font-size: 33px; }
}

@media (max-width: 991px) {
    /* Декор прячем, чтобы не мешал */
    .entertainment__decor { display: none; }
    .family__cloud        { display: none; }

    /* Блок «семья» — в колонку */
    .family { background: linear-gradient(180deg, #f2f8ea, #eaf3dc); }
    .family__content { max-width: 100%; padding: 46px 0 26px; text-align: center; }
    .family__heart   { margin-left: auto; margin-right: auto; }

    .family__image {
        display: none;
        /*position: static;
        width: 100%;
        height: auto;
        -webkit-mask: none;
                mask: none;*/
    }
    .hero__container {
        z-index: 5;
    }
    .hero {
        margin-top: -16px;
    }
    .hero__people {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
    .hero__badge {
        left: 50%;
        transform: translateX(-50%);
    }
    .hero__badge::after {
        top: calc(100% - 0px);
    }
}

@media (max-width: 767px) {
    .card {
        min-height: 0;
    }
    .card__icon {
        margin-bottom: 0;
    }
}
@media (max-width: 560px) {
    .hero {
        aspect-ratio: auto;
        min-height: 430px;
    }
    .hero__container { padding: 0; }
    .hero__badge     { max-width: 100%; }
    /*.hero__title     { font-size: 23px; }*/
    .hero__people    { height: 78%; max-width: 1000%;}
    .hero__bg {
        object-position: right top;
    }

    .entertainment__sparkle { display: none; }
    .cards {
        grid-template-columns: 1fr;
        max-width: 90%;
    }


    .family__title { font-size: 28px; }
    .family__info  { font-size: 15px; }
}

/* End */
/* /anniversary/css/style.css?178393209914146 */