/**
 * Inspiration Page
 * Grid layout with link-card components
 */

.container--inspiration {
    padding-top: 80px;
    padding-bottom: 80px;
}

/* Hero Section */
.inspiration-hero {
    grid-column: 1 / -1;
    margin-bottom: 24px;
    text-align: center;
    display: block;
}

.inspiration-hero__title {
    font-family: var(--font-display);
    font-size: var(--font-size-display-2-desktop);
    font-weight: 400;
    line-height: var(--line-height-display-2-desktop);
    color: var(--color-content);
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

/* Divider between sections */
.inspiration-divider {
    grid-column: 2 / span 10; /* колонки со 2-й по 11-ю включительно */
    height: 1px;
    background-color: var(--color-border-a8);
    margin: 20px 0; /* суммарный отступ сверху+снизу = 40px */
}

.inspiration-divider:first-of-type {
    margin-top: 0;
}

/* Inspiration Section */
.inspiration-section {
    grid-column: 1 / -1;
    margin-bottom: 0; /* отступ создается разделителями */
}

.inspiration-section:last-child {
    margin-bottom: 0;
}

.inspiration-section__content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--grid-gap);
}

.inspiration-section__title {
    grid-column: 1;
    font-family: var(--font-display);
    font-size: var(--font-size-display-3-desktop);
    font-weight: 400;
    line-height: var(--line-height-display-3-desktop);
    color: var(--color-content);
    margin: 0;
    padding: 0;
    text-transform: none;
    letter-spacing: -0.02em;
    align-self: start;
}

.inspiration-section__grid {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
    gap: var(--grid-gap);
    align-self: start;
}

.inspiration-section__grid--masonry {
    display: block;
    column-width: 256px;
    column-gap: var(--grid-gap);
}

.inspiration-section__grid--masonry .link-card {
    width: 100%;
    max-width: 100%;
    display: inline-flex;
    margin: 0 0 24px;
    break-inside: avoid;
    page-break-inside: avoid;
}

.inspiration-section__grid--masonry .link-card__image {
    width: 100%;
}

.inspiration-section__grid--masonry .link-card--book {
    width: 100%;
}

.inspiration-section__grid--masonry .link-card--book .link-card__image {
    width: 194px;
}

.inspiration-section__grid--masonry .like-item {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border-a8);
}

.page-toolbar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.page-toolbar__filter {
    flex-wrap: wrap;
}

.page-toolbar__search {
    width: 300px;
    flex-shrink: 0;
}

.like-empty {
    margin: 16px 0 0 0;
    font-family: var(--font-body);
    font-size: var(--font-size-body-4-desktop);
    font-weight: 300;
    line-height: var(--line-height-body-4-desktop);
    color: var(--color-content-a40);
}

/* Tablet (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container--inspiration {
        padding-top: 64px;
        padding-bottom: 64px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .inspiration-hero {
        margin-bottom: 40px;
    }

    .inspiration-hero__title {
        font-size: var(--font-size-display-2-tablet);
        line-height: var(--line-height-display-2-tablet);
    }

    .inspiration-divider {
        margin: 40px 0;
    }

    .inspiration-section {
        margin-bottom: 0; /* отступ создается разделителями */
    }

    /* Секции в одну колонку: заголовок сверху, контент снизу */
    .inspiration-section__title {
        margin-bottom: 20px;
    }

    .inspiration-section__grid {
        grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
    }

    .inspiration-section__grid--masonry {
        column-width: 256px;
    }

    .page-toolbar {
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
        margin-bottom: 24px;
    }

    .page-toolbar__filter {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
    }

    .page-toolbar__search {
        width: 240px;
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    .container--inspiration {
        padding-top: 40px;
        padding-bottom: 40px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .inspiration-hero {
        margin-bottom: 40px;
    }

    .inspiration-hero__title {
        font-size: var(--font-size-display-2-mobile);
        line-height: var(--line-height-display-2-mobile);
    }

    .inspiration-divider {
        grid-column: 1 / -1;
        margin: 40px 0;
    }

    .inspiration-section {
        margin-bottom: 0; /* отступ создается разделителями */
    }

    .inspiration-section__title {
        margin-bottom: 20px;
        font-size: var(--font-size-display-3-mobile);
        line-height: var(--line-height-display-3-mobile);
    }

    .inspiration-section__grid {
        grid-template-columns: 1fr; /* 1 карточка в ряд на мобильном */
    }

    .inspiration-section__grid--masonry {
        column-count: 1;
    }

    .page-toolbar {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 20px;
    }

    .page-toolbar__search {
        width: 100%;
    }

    .like-empty {
        font-size: var(--font-size-body-4-mobile);
        line-height: var(--line-height-body-4-mobile);
    }
}