/*
=========================================================
Home page
=========================================================
*/


/*
=========================================================
Section eyebrow
=========================================================
*/

.section__eyebrow {
    margin-bottom: var(--space-sm);

    color: var(--color-primary-strong);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);

    letter-spacing: .04em;
    text-transform: uppercase;
}


/*
=========================================================
About section
=========================================================
*/

.about-section {
    position: relative;
    overflow: hidden;

    background-color: var(--color-background);
}

.about-section::before {
    content: "";

    position: absolute;
    top: 3rem;
    right: -8rem;

    width: 22rem;
    height: 22rem;

    border-radius: 50%;

    background-color:
        rgba(110, 198, 255, .08);

    pointer-events: none;
}

.about-section__header {
    position: relative;
    z-index: 1;

    max-width: 880px;
}

.about-section__intro {
    display: grid;

    gap: var(--space-md);

    max-width: 820px;
}

.about-section__intro p {
    margin: 0;

    color: var(--color-text-light);

    font-size: var(--font-size-lg);
    line-height: 1.75;
}

.about-section__intro strong {
    color: var(--color-text);
}


/*
=========================================================
History timeline
=========================================================
*/

.about-history {
    position: relative;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: var(--space-xl);

    margin-bottom: var(--space-3xl);
}

.about-history::before {
    content: "";

    position: absolute;
    top: 3.5rem;
    left: 7%;

    width: 86%;
    height: 3px;

    border-radius: var(--radius-round);

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-secondary),
            var(--color-warning),
            var(--color-accent)
        );
}

.history-card {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;

    padding:
        var(--space-lg)
        var(--space-lg)
        var(--space-xl);

    border:
        1px solid
        rgba(77, 181, 247, .16);

    border-radius: var(--radius-lg);

    background-color:
        rgba(255, 255, 255, .94);

    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);
}

.history-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(77, 181, 247, .34);

    box-shadow: var(--shadow-md);
}

.history-card__year {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 76px;
    min-height: 38px;

    margin-bottom: var(--space-md);

    padding:
        var(--space-xs)
        var(--space-md);

    border-radius: var(--radius-round);

    color: var(--color-text);

    background-color: var(--color-primary-hover);

    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);

    box-shadow: var(--shadow-sm);
}

.history-card__marker {
    width: 18px;
    height: 18px;

    margin-bottom: var(--space-lg);
    margin-left: var(--space-sm);

    border:
        4px solid
        var(--color-background);

    border-radius: 50%;

    background-color: var(--color-primary-hover);

    box-shadow:
        0 0 0 3px
        rgba(77, 181, 247, .26);
}

.history-card__title {
    margin-bottom: var(--space-sm);

    color: var(--color-text);

    font-size: var(--font-size-xl);
}

.history-card__text {
    margin: 0;

    color: var(--color-text-light);

    line-height: 1.7;
}


/*
=========================================================
About features
=========================================================
*/

.about-features {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--space-xl);
}

.feature-card {
    position: relative;
    overflow: hidden;

    padding: var(--space-xl);

    border:
        1px solid
        rgba(77, 181, 247, .14);

    border-radius: var(--radius-xl);

    background:
        linear-gradient(
            145deg,
            var(--color-background) 0%,
            var(--color-background-alt) 100%
        );

    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}

.feature-card::after {
    content: "";

    position: absolute;
    right: -42px;
    bottom: -42px;

    width: 110px;
    height: 110px;

    border-radius: 50%;

    background-color:
        rgba(110, 198, 255, .10);
}

.feature-card:hover {
    transform: translateY(-6px);

    box-shadow: var(--shadow-md);
}

.feature-card__icon {
    position: relative;
    z-index: 1;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: var(--space-lg);

    border-radius: 50%;

    background-color:
        rgba(110, 198, 255, .18);

    font-size: 1.75rem;
}

.feature-card:nth-child(2) .feature-card__icon {
    background-color:
        rgba(154, 214, 157, .22);
}

.feature-card:nth-child(3) .feature-card__icon {
    background-color:
        rgba(255, 209, 102, .25);
}

.feature-card__title {
    position: relative;
    z-index: 1;

    margin-bottom: var(--space-sm);

    color: var(--color-text);

    font-size: var(--font-size-xl);
}

.feature-card__text {
    position: relative;
    z-index: 1;

    margin: 0;

    color: var(--color-text-light);

    line-height: 1.7;
}


/*
=========================================================
Gallery
=========================================================
*/

.gallery-section {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            var(--color-background) 0%,
            rgba(234, 248, 255, .55) 100%
        );
}

.gallery-section::before {
    content: "";

    position: absolute;
    top: -8rem;
    left: -8rem;

    width: 22rem;
    height: 22rem;

    border-radius: 50%;

    background-color:
        rgba(255, 209, 102, .10);

    pointer-events: none;
}

.gallery-section__header {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: var(--space-xl);
}

.gallery-section__header > div {
    max-width: 760px;
}

.gallery-section__link {
    display: inline-flex;
    align-items: center;

    gap: var(--space-sm);

    flex-shrink: 0;

    padding:
        var(--space-sm)
        var(--space-md);

    border:
        1px solid
        rgba(77, 181, 247, .22);

    border-radius: var(--radius-round);

    color: var(--color-primary-strong);

    background-color:
        rgba(255, 255, 255, .82);

    font-weight: var(--font-weight-semibold);

    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast);
}

.gallery-section__link:hover {
    transform: translateY(-2px);

    border-color:
        rgba(77, 181, 247, .44);

    background-color: var(--color-background);
}

.gallery-grid {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    grid-template-rows:
        repeat(2, minmax(230px, 1fr));

    gap: var(--space-lg);
}

.gallery-card {
    position: relative;
    overflow: hidden;

    min-height: 230px;

    margin: 0;

    border-radius: var(--radius-xl);

    background-color: var(--color-background-alt);

    box-shadow: var(--shadow-sm);

    isolation: isolate;

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}

.gallery-card--large {
    grid-column: span 2;
    grid-row: span 2;

    min-height: 480px;
}

.gallery-card:nth-child(2),
.gallery-card:nth-child(3),
.gallery-card:nth-child(4) {
    grid-column: span 2;
}

.gallery-card:hover {
    transform: translateY(-5px);

    box-shadow: var(--shadow-lg);
}

.gallery-card::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            180deg,
            transparent 38%,
            rgba(20, 35, 56, .82) 100%
        );

    pointer-events: none;
}

.gallery-card__image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .7s ease;
}

.gallery-card:hover .gallery-card__image {
    transform: scale(1.06);
}

.gallery-card__caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;

    display: flex;
    flex-direction: column;

    gap: var(--space-xs);

    padding: var(--space-xl);

    color: var(--color-background);
}

.gallery-card__category {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);

    letter-spacing: .04em;
    text-transform: uppercase;

    opacity: .86;
}

.gallery-card__title {
    font-size:
        clamp(
            var(--font-size-lg),
            2vw,
            1.55rem
        );

    line-height: 1.2;
}

.gallery-card--large .gallery-card__title {
    font-size:
        clamp(
            1.5rem,
            3vw,
            2.25rem
        );
}


/*
=========================================================
News
=========================================================
*/

.news-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--space-xl);
}

.news-card {
    padding: var(--space-xl);

    border:
        1px solid
        rgba(77, 181, 247, .14);

    border-radius: var(--radius-lg);

    background-color: var(--color-background);

    box-shadow: var(--shadow-sm);
}

.news-card__date {
    display: block;

    margin-bottom: var(--space-md);

    color: var(--color-primary-strong);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.news-card__title {
    margin-bottom: var(--space-md);

    color: var(--color-text);
}

.news-card__summary {
    margin-bottom: var(--space-lg);

    color: var(--color-text-light);
}

.news-card__link {
    color: var(--color-primary-strong);

    font-weight: var(--font-weight-semibold);
}


/*
=========================================================
Contacts
=========================================================
*/

.contacts-grid {
    display: grid;
    grid-template-columns:
        minmax(0, .8fr)
        minmax(360px, 1.2fr);

    gap: var(--space-xl);
}

.contacts-info,
.contacts-map {
    padding: var(--space-xl);

    border:
        1px solid
        rgba(77, 181, 247, .14);

    border-radius: var(--radius-lg);

    background-color: var(--color-background);

    box-shadow: var(--shadow-sm);
}

.contacts-info__address,
.contacts-info__item {
    margin-bottom: var(--space-md);

    color: var(--color-text-light);

    font-style: normal;
}

.contacts-map {
    min-height: 320px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color-text-light);

    background-color: var(--color-background-alt);
}


/*
=========================================================
Responsive
=========================================================
*/

@media (max-width: 1199.98px) {
    .about-history {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .about-history::before {
        display: none;
    }

    .history-card__marker {
        display: none;
    }

    .gallery-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-rows: auto;
    }

    .gallery-card--large {
        grid-column: span 2;
        grid-row: auto;

        min-height: 430px;
    }

    .gallery-card:nth-child(2),
    .gallery-card:nth-child(3),
    .gallery-card:nth-child(4) {
        grid-column: span 1;

        min-height: 260px;
    }
}

@media (max-width: 991.98px) {
    .about-features {
        grid-template-columns: 1fr;
    }

    .gallery-section__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .news-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .contacts-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .about-section__intro p {
        font-size: var(--font-size-md);
    }

    .about-history {
        grid-template-columns: 1fr;

        gap: var(--space-lg);

        margin-bottom: var(--space-2xl);
    }

    .history-card {
        padding: var(--space-lg);
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-card--large,
    .gallery-card:nth-child(2),
    .gallery-card:nth-child(3),
    .gallery-card:nth-child(4) {
        grid-column: auto;

        min-height: 280px;
    }

    .gallery-card--large {
        min-height: 360px;
    }

    .gallery-card__caption {
        padding: var(--space-lg);
    }

    .news-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .feature-card,
    .news-card,
    .contacts-info,
    .contacts-map {
        padding: var(--space-lg);
    }

    .history-card__year {
        min-width: 68px;

        font-size: var(--font-size-md);
    }

    .gallery-card,
    .gallery-card--large {
        min-height: 250px;
    }

    .gallery-section__link {
        width: 100%;

        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .history-card,
    .feature-card,
    .gallery-card,
    .gallery-card__image,
    .gallery-section__link {
        transition: none;
    }

    .history-card:hover,
    .feature-card:hover,
    .gallery-card:hover,
    .gallery-section__link:hover {
        transform: none;
    }

    .gallery-card:hover .gallery-card__image {
        transform: none;
    }
}

/*
=========================================================
M1 contacts — compact but not cramped
---------------------------------------------------------
Desktop refinement only.
Everything above the contacts section remains untouched.
=========================================================
*/

@media (min-width: 1200px) {
    .contacts-section {
        padding-block:
            clamp(2.25rem, 3vw, 3rem);
    }

    .contacts-section__header {
        display: grid;
        grid-template-columns:
            minmax(300px, .72fr)
            minmax(0, 1.28fr);

        align-items: end;

        max-width: none;
        gap: var(--space-xl);

        margin-bottom: var(--space-xl);
    }

    .contacts-section__header > div:first-child {
        max-width: 460px;
    }

    .contacts-section__header .section__title {
        margin-bottom: var(--space-sm);
    }

    .contacts-section__header .section__description {
        margin-bottom: 0;

        font-size: var(--font-size-md);
        line-height: 1.55;
    }

    .contacts-section__quick-actions {
        justify-self: start;

        display: flex;
        align-items: center;
        flex-wrap: wrap;

        gap: var(--space-sm);
    }

    .contacts-section__quick-actions .contacts-button {
        min-height: 42px;

        padding:
            .5rem
            var(--space-md);
    }

    .contacts-layout {
        display: grid;
        grid-template-columns:
            minmax(340px, 1.35fr)
            minmax(0, 2fr);

        align-items: stretch;

        gap: var(--space-lg);
    }

    .contacts-main-card {
        min-height: 0;

        padding: var(--space-lg);
    }

    .contacts-main-card__heading {
        margin-bottom: var(--space-md);
    }

    .contacts-main-card__icon {
        width: 46px;
        height: 46px;
    }

    .contacts-main-card__title {
        font-size: var(--font-size-lg);
    }

    .contacts-main-card__items {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            var(--space-sm)
            var(--space-md);
    }

    .contact-item {
        min-height: 58px;

        padding:
            .65rem
            .75rem;
    }

    .contact-item__icon {
        width: 34px;
        height: 34px;
    }

    .contact-item small {
        font-size: var(--font-size-xs);
    }

    .contact-item strong {
        font-size: var(--font-size-sm);
        line-height: 1.35;
    }

    .contacts-buildings {
        display: grid;
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: var(--space-lg);
    }

    .building-card {
        min-height: 0;

        padding: var(--space-lg);
    }

    .building-card__heading {
        margin-bottom: var(--space-md);
    }

    .building-card__icon {
        width: 42px;
        height: 42px;
    }

    .building-card__title {
        font-size: var(--font-size-lg);
    }

    .building-card__address {
        min-height: 3.25em;

        margin-bottom: var(--space-lg);

        line-height: 1.55;
    }
}

/*
=========================================================
M1 contacts — final desktop typography
---------------------------------------------------------
Финальная правка утверждённой главной:
чуть меньше шрифт в контактных значениях, чтобы
email и режим работы не ломались на лишние строки.
=========================================================
*/

@media (min-width: 1200px) {
    .contacts-layout {
        grid-template-columns:
            minmax(400px, 1.48fr)
            minmax(0, 2fr);
    }

    .contacts-main-card__items {
        gap:
            var(--space-sm)
            .75rem;
    }

    .contact-item {
        gap: .6rem;

        padding:
            .6rem
            .65rem;
    }

    .contact-item > span:last-child {
        min-width: 0;
    }

    .contact-item small {
        font-size: .72rem;
        line-height: 1.25;
    }

    .contact-item strong {
        font-size: .80rem;
        line-height: 1.3;
    }

    .contact-item[href^="mailto:"] strong {
        font-size: .94rem;
        white-space: nowrap;
    }

    .contact-item--static strong {
        font-size: .94rem;
        line-height: 1.35;
    }

    .contacts-buildings {
        gap: var(--space-md);
    }

    .building-card {
        padding:
            var(--space-lg)
            var(--space-md);
    }
}

/*
=========================================================
M1 FINAL — APPROVED HOME COMPOSITION
=========================================================
Включается с 1024px, потому что реальный рабочий desktop
пользователя имеет ширину около 1160px.
=========================================================
*/

@media (min-width: 1024px) {

    /* О детском саде + преимущества */
    .home-about-layout {
        display: grid;
        grid-template-columns:
            minmax(285px, .82fr)
            minmax(0, 2.18fr);
        align-items: stretch;
        gap: 1.5rem;
    }

    .home-about-copy {
        min-width: 0;
    }

    .home-about-copy .about-section__header,
    .home-about-copy .about-section__intro {
        max-width: none;
        margin: 0;
    }

    .home-about-copy .about-section__intro {
        display: grid;
        gap: .65rem;
    }

    .home-about-copy .about-section__intro p {
        font-size: 1.08rem;
        line-height: 1.55;
    }

    .home-about-layout .about-features {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
        align-self: stretch;
    }

    .home-about-layout .feature-card {
        min-height: 100%;
        padding: 1.25rem;
    }

    .home-about-layout .feature-card__icon {
        width: 44px;
        height: 44px;
        margin-bottom: .8rem;
        font-size: 1.35rem;
    }

    .home-about-layout .feature-card__title {
        margin-bottom: .4rem;
        font-size: 1.12rem;
    }

    .home-about-layout .feature-card__text {
        font-size: .92rem;
        line-height: 1.5;
    }

    /* Возрастные категории: заголовок + пояснение в одну строку */
    .home-age-header {
        display: grid;
        grid-template-columns:
            minmax(270px, .72fr)
            minmax(0, 1.28fr);
        align-items: end;
        max-width: none;
        gap: 1.5rem;
        margin-bottom: 1.25rem;
    }

    .home-age-header__title .section__title,
    .home-age-header__description {
        margin-bottom: 0;
    }

    .home-age-header__description {
        max-width: 680px;
        font-size: 1.04rem;
        line-height: 1.5;
    }

    /* Свободные места + галерея: один пояс */
    .home-showcase-layout {
        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);
        align-items: start;
        gap: 1.5rem;
    }

    .home-showcase-panel {
        min-width: 0;
    }

    /* История: заголовок слева, все 5 вех справа в одну строку */
    .home-history-layout {
        display: grid;
        grid-template-columns:
            minmax(190px, .72fr)
            minmax(0, 3.28fr);
        align-items: start;
        gap: 1.25rem;
    }

    .home-history-intro {
        padding-top: .2rem;
    }

    .home-history-intro .section__title {
        margin-bottom: 0;
    }

    .home-history-layout .about-history {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: .8rem;
        margin-bottom: 0;
    }

    .home-history-layout .about-history::before {
        display: block;
        top: 2.45rem;
        left: 4%;
        width: 92%;
    }

    .home-history-layout .history-card {
        padding: 1rem;
    }

    .home-history-layout .history-card__year {
        min-width: 58px;
        min-height: 29px;
        margin-bottom: .55rem;
        padding: .15rem .6rem;
        font-size: .94rem;
    }

    .home-history-layout .history-card__marker {
        display: block;
        width: 13px;
        height: 13px;
        margin-bottom: .75rem;
        border-width: 3px;
    }

    .home-history-layout .history-card__title {
        margin-bottom: .4rem;
        font-size: 1.04rem;
        line-height: 1.25;
    }

    .home-history-layout .history-card__text {
        font-size: .94rem;
        line-height: 1.45;
    }

    /* Контакты: компактный финальный пояс */
    .contacts-section {
        padding-block: 2rem 2.35rem;
    }

    .contacts-section__header {
        display: grid;
        grid-template-columns:
            minmax(260px, .78fr)
            minmax(0, 1.22fr);
        align-items: end;
        max-width: none;
        gap: 1.25rem;
        margin-bottom: 1.15rem;
    }

    .contacts-section__header > div:first-child {
        max-width: 390px;
    }

    .contacts-section__header .section__description {
        margin-bottom: 0;
        font-size: .94rem;
        line-height: 1.45;
    }

    .contacts-section__quick-actions {
        justify-self: start;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .6rem;
    }

    .contacts-section__quick-actions .contacts-button {
        min-height: 38px;
        padding: .42rem .9rem;
        font-size: .9rem;
    }

    .contacts-layout {
        display: grid;
        grid-template-columns:
            minmax(360px, 1.32fr)
            minmax(0, 2.68fr);
        align-items: stretch;
        gap: 1rem;
    }

    .contacts-main-card {
        min-height: 0;
        padding: 1rem;
    }

    .contacts-main-card__heading {
        margin-bottom: .7rem;
    }

    .contacts-main-card__icon {
        width: 40px;
        height: 40px;
    }

    .contacts-main-card__title {
        font-size: 1.08rem;
    }

    .contacts-main-card__items {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .55rem .7rem;
    }

    .contact-item {
        min-height: 52px;
        gap: .5rem;
        padding: .5rem .55rem;
    }

    .contact-item__icon {
        width: 31px;
        height: 31px;
    }

    .contact-item > span:last-child {
        min-width: 0;
    }

    .contact-item small {
        font-size: .76rem;
        line-height: 1.2;
    }

    .contact-item strong {
        font-size: .82rem;
        line-height: 1.25;
    }

    .contact-item[href^="mailto:"] strong {
        font-size: .78rem;
        white-space: nowrap;
    }

    .contact-item--static strong {
        font-size: .78rem;
        line-height: 1.28;
    }

    .contacts-buildings {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .8rem;
    }

    .building-card {
        min-height: 0;
        padding: 1rem;
    }

    .building-card__heading {
        margin-bottom: .65rem;
    }

    .building-card__icon {
        width: 38px;
        height: 38px;
    }

    .building-card__title {
        font-size: 1.03rem;
    }

    .building-card__address {
        min-height: 3em;
        margin-bottom: .85rem;
        font-size: .94rem;
        line-height: 1.45;
    }

    .building-card__map-link {
        font-size: .94rem;
    }
}

/*
=========================================================
M1 FINAL — 2GIS links highlight
---------------------------------------------------------
Финальный акцент для ссылок «Открыть в 2GIS».
=========================================================
*/

.building-card__map-link {
    display: inline-flex;
    align-items: center;

    gap: .35rem;

    width: fit-content;

    padding:
        .38rem
        .65rem;

    border:
        1px solid
        rgba(77, 181, 247, .24);

    border-radius: var(--radius-round);

    color: var(--color-primary-strong);

    background-color:
        rgba(234, 248, 255, .78);

    font-weight: var(--font-weight-semibold);

    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.building-card__map-link:hover {
    transform: translateY(-2px);

    border-color:
        rgba(77, 181, 247, .42);

    background-color:
        var(--color-primary-light);

    box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: reduce) {
    .building-card__map-link {
        transition: none;
    }

    .building-card__map-link:hover {
        transform: none;
    }
}