/* ===========================================================
 * Lookbook — страница /lookbook
 * Дизайн Figma. Все font-weight на 1 шаг легче из-за Chrome rendering.
 * Figma 300 → CSS 200; Figma 200 → CSS 100; Figma 100 → CSS 100 (минимум).
 * =========================================================== */

.jvis-lookbook {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 80px;
    box-sizing: border-box;
    font-family: 'Onest', Arial, sans-serif;
    color: #000;
}

/* ---- Page title (Figma: 30px Light/300) ---- */
.jvis-lookbook__header {
    padding: 24px 0 32px;
}
.jvis-lookbook__page-title {
    font-family: 'Onest', Arial, sans-serif;
    font-weight: 200;
    font-size: 30px;
    line-height: 1;
    margin: 0;
    color: #000;
}

/* ---- Hero (Figma: 489px высота, заголовок 62px Light/300, uppercase, white) ---- */
.jvis-lookbook__hero {
    height: 489px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jvis-lookbook__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
}
.jvis-lookbook__hero-inner {
    position: relative;
    z-index: 1;
    padding: 0 40px;
}
.jvis-lookbook__hero-title {
    font-family: 'Onest', Arial, sans-serif;
    font-weight: 200;
    font-size: 62px;
    line-height: 1.1;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    letter-spacing: 0;
}

/* ---- Quote (центр, лёгкий шрифт) ---- */
.jvis-lookbook__quote {
    padding: 60px 40px;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}
.jvis-lookbook__quote p {
    font-family: 'Onest', Arial, sans-serif;
    font-weight: 200;
    font-size: 16px;
    line-height: 1.6;
    color: #000;
    margin: 0 0 8px;
}
.jvis-lookbook__quote p:last-child { margin-bottom: 0; }

/* ---- Section (Figma: 48px gap, заголовок 26px Light/300) ---- */
.jvis-lookbook__section {
    margin-top: 48px;
}
.jvis-lookbook__section-title {
    font-family: 'Onest', Arial, sans-serif;
    font-weight: 200;
    font-size: 26px;
    line-height: 1;
    margin: 0 0 24px;
    color: #000;
}

/* ---- Masonry grid (12 cols, grid-template-areas) ---- */
.jvis-lookbook__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:
        "a1 a1 a1 a1 a2 a2 a2 a2 a3 a3 a3 a3"
        "w  w  w  w  w  w  w  w  w  w  w  w"
        "b  b  b  b  b  s1 s1 s1 s1 s1 s1 s1"
        "b  b  b  b  b  s2 s2 s2 s2 s2 s2 s2";
    grid-template-rows: 470px 400px 220px 220px;
    gap: 16px;
}
.jvis-lookbook__card--a1 { grid-area: a1; }
.jvis-lookbook__card--a2 { grid-area: a2; }
.jvis-lookbook__card--a3 { grid-area: a3; }
.jvis-lookbook__card--wide { grid-area: w; }
.jvis-lookbook__card--big { grid-area: b; }
.jvis-lookbook__card--s1 { grid-area: s1; }
.jvis-lookbook__card--s2 { grid-area: s2; }

/* ---- Card ---- */
.jvis-lookbook__card {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 32px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
}
.jvis-lookbook__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%);
    transition: background 0.3s ease;
}
.jvis-lookbook__card:hover::before {
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.85) 100%);
}
.jvis-lookbook__card-title {
    position: relative;
    z-index: 1;
    font-family: 'Onest', Arial, sans-serif;
    font-weight: 200;
    font-size: 26px;
    line-height: 1.2;
    color: #fff;
    max-width: 90%;
}
.jvis-lookbook__card--big-title .jvis-lookbook__card-title {
    font-size: 40px;
    max-width: 95%;
}

/* ---- Адаптив ---- */
@media (max-width: 900px) {
    .jvis-lookbook__hero { height: 380px; }
    .jvis-lookbook__hero-title { font-size: 48px; }
    .jvis-lookbook__grid {
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas:
            "a1 a1 a1 a2 a2 a2"
            "a3 a3 a3 a3 a3 a3"
            "w  w  w  w  w  w"
            "b  b  b  b  b  b"
            "s1 s1 s1 s1 s1 s1"
            "s2 s2 s2 s2 s2 s2";
        grid-template-rows: 360px 360px 320px 380px 200px 200px;
    }
    .jvis-lookbook__card--big-title .jvis-lookbook__card-title { font-size: 32px; }
}
@media (max-width: 600px) {
    .jvis-lookbook { padding: 0 16px 48px; }
    .jvis-lookbook__hero { height: 320px; }
    .jvis-lookbook__hero-title { font-size: 32px; }
    .jvis-lookbook__quote { padding: 32px 0; }
    .jvis-lookbook__quote p { font-size: 17px; }
    .jvis-lookbook__grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "a1" "a2" "a3" "w" "b" "s1" "s2";
        grid-template-rows: repeat(7, 280px);
        gap: 12px;
    }
    .jvis-lookbook__card { padding: 24px; }
    .jvis-lookbook__card-title { font-size: 22px; }
    .jvis-lookbook__card--big-title .jvis-lookbook__card-title { font-size: 26px; }
}