/* ==========================================================================
   Лендинг «WasserKRAFT и "Русский дом"» 2026
   Макет: Figma wasserkraft.ru → «Русский дом» (контент 1520px при 1920px)
   Брейкпоинты повторяют .container темы ru: 1910 / 1336 / 991 / 767
   ========================================================================== */

.rd-page {
    --rd-navy: #00263e;
    --rd-blue: #032b80;
    --rd-grey: #4d4d4d;
    --rd-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    --rd-text: 20px;
    --rd-h2: 40px;
    --rd-label: 22px;
    --rd-gap: 60px;

    color: #000;
    padding-bottom: 80px;
}

.rd-page p {
    margin: 0;
}

.rd-page img {
    max-width: none;
    max-height: none;
}

.rd-page__title {
    margin: 30px 0 38px;
    color: var(--rd-blue);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.36;
}

/* --- Общие элементы ---------------------------------------------------- */

.rd-section {
    margin-top: var(--rd-gap);
}

.rd-section--intro {
    margin-top: 24px;
}

.rd-text {
    font-size: var(--rd-text);
    line-height: 1.36;
}

.rd-text p + p {
    margin-top: 1.36em;
}

.rd-text--center {
    text-align: center;
}

/* Заголовок секции: подпись с линиями, H2 и линия снизу */
.rd-heading {
    margin-bottom: 40px;
    text-align: center;
}

.rd-heading::after {
    content: '';
    display: block;
    width: 313px;
    max-width: 60%;
    height: 4px;
    margin: 38px auto 0;
    background: var(--rd-navy);
}

.rd-heading--plain {
    margin-bottom: 23px;
}

.rd-heading--plain::after {
    display: none;
}

.rd-heading__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    color: var(--rd-navy);
    font-size: var(--rd-label);
    line-height: 1.36;
}

.rd-heading__label::before,
.rd-heading__label::after {
    content: '';
    flex: 0 1 130px;
    height: 1px;
    background: var(--rd-grey);
}

.rd-heading__title {
    margin: 14px 0 0;
    color: var(--rd-navy);
    font-size: var(--rd-h2);
    font-weight: 700;
    line-height: 1.36;
}

/* --- Баннер 1: Вода сквозь время ---------------------------------------- */

.rd-hero {
    position: relative;
    aspect-ratio: 1520 / 925;
    overflow: hidden;
    container-type: inline-size;
    color: #fff;
}

.rd-hero__media img {
    position: absolute;
    left: -2.17%;
    top: -0.86%;
    width: 110%;
    height: 101.73%;
    object-fit: cover;
}

.rd-hero__title {
    position: absolute;
    left: 2.7%;
    top: 23.2%;
}

.rd-hero__title-big,
.rd-hero__title-small {
    display: block;
}

.rd-hero__title-big {
    font-size: 130px;
    font-size: 8.55cqw;
    line-height: 1.2;
}

.rd-hero__title-small {
    font-size: 80px;
    font-size: 5.26cqw;
    line-height: 1.064;
}

.rd-hero__lead {
    position: absolute;
    left: 3.16%;
    top: 50.5%;
    width: 42.4%;
    font-size: 24px;
    font-size: max(14px, 1.58cqw);
    line-height: 1.2;
}

/* --- Баннер 2: 1900 — 2026 ---------------------------------------------- */

.rd-compare {
    position: relative;
    margin-top: var(--rd-gap);
    container-type: inline-size;
    color: #fff;
}

.rd-compare__media {
    position: relative;
    aspect-ratio: 1520 / 855;
    overflow: hidden;
}

.rd-compare__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* рамка вокруг дат — часть фото, текст позиционируется по ней */
.rd-compare__years {
    position: absolute;
    left: 50%;
    top: 46.3%;
    transform: translateX(-50%);
    font-size: 50px;
    font-size: 3.29cqw;
    line-height: 1.064;
    white-space: nowrap;
}

.rd-compare__caption {
    position: absolute;
    top: 90.4%;
    width: 15.5%;
    font-size: 20px;
    font-size: max(11px, 1.32cqw);
    line-height: 1.2;
}

.rd-compare__caption--left {
    left: 5.26%;
}

.rd-compare__caption--right {
    right: 5%;
    text-align: right;
}

.rd-compare__side {
    position: absolute;
    top: 4.8%;
    width: 35.8%;
}

.rd-compare__side--left {
    left: 5.26%;
}

.rd-compare__side--right {
    right: 5%;
    text-align: right;
}

.rd-compare__era {
    display: block;
    font-size: 24px;
    font-size: 1.58cqw;
    line-height: 1.2;
}

.rd-compare__title {
    font-size: 50px;
    font-size: 3.29cqw;
    line-height: 1.064;
}

/* --- Левая / правая часть стенда ----------------------------------------- */

.rd-parts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 75px;
}

.rd-parts__item {
    padding: 22px 20px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(112, 119, 154, 0.25);
    line-height: 1.25;
}

.rd-parts__item p + p {
    margin-top: 0;
}

/* --- Коллаж -------------------------------------------------------------- */

.rd-collage {
    display: grid;
    grid-template-columns: 567fr 372fr 536fr;
    grid-template-rows: 433fr 123fr 289fr 419fr;
    column-gap: 22px;
    row-gap: 13px;
    aspect-ratio: 1521 / 1304;
}

.rd-collage__item {
    position: relative;
    overflow: hidden;
}

.rd-collage__item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rd-collage__item--mirror { grid-column: 1; grid-row: 1 / 5; }
.rd-collage__item--lamp   { grid-column: 2; grid-row: 1 / 3; }
.rd-collage__item--basin  { grid-column: 2; grid-row: 3; }
.rd-collage__item--towel  { grid-column: 3; grid-row: 1; }
.rd-collage__item--shelf  { grid-column: 3; grid-row: 2 / 4; }
.rd-collage__item--chest  { grid-column: 2 / 4; grid-row: 4; }

/* --- История одной семьи ------------------------------------------------- */

.rd-story {
    padding: 0 22px;
}

.rd-story .rd-story__joined + p {
    margin-top: 0;
}

/* --- Баннер 4: Меняется дом ---------------------------------------------- */

.rd-value {
    position: relative;
    margin-top: 35px;
    aspect-ratio: 1522 / 714;
    overflow: hidden;
    container-type: inline-size;
    background: var(--rd-navy);
    color: #fff;
}

.rd-value__photo {
    position: absolute;
    top: 7.56%;
    width: 28.78%;
    height: 84.9%;
    overflow: hidden;
}

.rd-value__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rd-value__photo--left {
    left: 3.42%;
}

.rd-value__photo--right {
    right: 3.35%;
}

.rd-value__content {
    position: absolute;
    left: 50%;
    top: 17.4%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.rd-value__years {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12.3cqw;
    height: 3.22cqw;
    border: 3px solid #fff;
    font-size: 24px;
    font-size: max(12px, 1.58cqw);
    line-height: 1;
    white-space: nowrap;
}

.rd-value__title {
    margin-top: 5.4cqw !important;
    font-size: 50px;
    font-size: 3.29cqw;
    line-height: 1.36;
    white-space: nowrap;
}

/* --- Что представлено на стенде ------------------------------------------ */

.rd-products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 65px;
    margin-top: 55px;
    padding: 0 19px;
}

.rd-products__item {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    min-height: 220px;
    padding: 7px 12px 8px 30px;
    background: #fff;
    border-radius: 4px;
    box-shadow: var(--rd-shadow);
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.2s;
}

.rd-products__item:hover,
.rd-products__item:focus {
    color: inherit;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(0, 38, 62, 0.25);
    transform: translateY(-2px);
}

.rd-products__item:hover .rd-products__title {
    color: var(--rd-navy);
}

.rd-products__title {
    flex: 1 1 auto;
    margin-bottom: 12px;
    color: var(--rd-grey);
    font-size: var(--rd-text);
    line-height: 1.36;
}

.rd-products__img {
    flex: 0 0 45%;
    max-width: 202px;
}

.rd-products__img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/* --- WasserKraft сегодня ------------------------------------------------- */

.rd-today {
    display: grid;
    grid-template-columns: 732fr 788fr;
    margin-top: 55px;
    background: var(--rd-navy);
    color: #fff;
    container-type: inline-size;
}

.rd-today__content {
    padding: 4.1cqw 3cqw 3cqw 4.8cqw;
}

.rd-today__title-big,
.rd-today__title-small {
    display: block;
    line-height: 1.36;
}

.rd-today__title-big {
    font-size: 80px;
    font-size: 5.26cqw;
}

.rd-today__title-small {
    font-size: 50px;
    font-size: 3.29cqw;
}

.rd-today__accent,
.rd-today__text {
    font-size: 24px;
    font-size: max(16px, 1.58cqw);
    line-height: 1.36;
}

.rd-today__accent {
    max-width: 440px;
    margin-top: 21px !important;
    padding: 20px 0 20px 18px;
    border-left: 3px solid #fff;
}

.rd-today__text {
    max-width: 544px;
    margin-top: 7cqw !important;
    padding-left: 21px;
}

.rd-today__media {
    position: relative;
    aspect-ratio: 788 / 813;
    overflow: hidden;
}

.rd-today__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}

/* --- Преимущества -------------------------------------------------------- */

.rd-advantages {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 19px;
    padding: 0 19px;
}

.rd-advantages__item {
    min-height: 245px;
    padding: 31px 28px 29px 13px;
    background: #fff;
    box-shadow: var(--rd-shadow);
    font-size: var(--rd-text);
    line-height: 1.3;
}

.rd-advantages__title {
    min-height: 2.6em;
    margin-bottom: 20px !important;
    color: var(--rd-navy);
}

/* --- Подберите решение для себя ------------------------------------------ */

.rd-audience {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 59px;
    margin-top: 37px;
    padding: 0 19px;
}

.rd-audience__item {
    display: flex;
    flex-direction: column;
    min-height: 527px;
    padding: 96px 23px 35px;
    background: #fff;
    box-shadow: var(--rd-shadow);
    font-size: var(--rd-text);
    line-height: 1.36;
}

.rd-audience__label {
    margin-bottom: 39px !important;
    color: var(--rd-navy);
    text-transform: uppercase;
}

.rd-audience__text {
    flex: 1 1 auto;
    margin-bottom: 51px !important;
}

.rd-audience__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 63px;
    padding: 8px 16px;
    background: var(--rd-navy);
    color: #fff;
    font-size: var(--rd-text);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s;
}

.rd-audience__btn:hover,
.rd-audience__btn:focus {
    background: var(--rd-blue);
    color: #fff;
    text-decoration: none;
}

/* ==========================================================================
   Адаптив
   ========================================================================== */

/* container: 1166px */
@media screen and (max-width: 1910px) {
    .rd-page {
        --rd-h2: 36px;
        --rd-gap: 50px;
    }

    .rd-products {
        gap: 32px;
        padding: 0;
    }

    .rd-products__item {
        min-height: 190px;
        padding-left: 20px;
    }

    .rd-advantages,
    .rd-audience {
        padding: 0;
    }

    .rd-audience {
        gap: 24px;
    }

    .rd-audience__item {
        min-height: 0;
        padding-top: 60px;
    }

    .rd-audience__btn {
        font-size: 18px;
    }
}

/* container: 864px */
@media screen and (max-width: 1336px) {
    .rd-page {
        --rd-text: 18px;
        --rd-h2: 30px;
        --rd-label: 18px;
        --rd-gap: 44px;
    }

    .rd-heading__label {
        gap: 20px;
    }

    .rd-heading__label::before,
    .rd-heading__label::after {
        flex-basis: 80px;
    }

    .rd-heading::after {
        margin-top: 28px;
    }

    .rd-parts {
        margin-top: 50px;
        gap: 24px;
    }

    .rd-products {
        gap: 20px;
        margin-top: 36px;
    }

    .rd-products__item {
        min-height: 160px;
        padding: 8px 8px 8px 16px;
    }

    .rd-advantages {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .rd-advantages__item {
        min-height: 0;
        padding: 24px 20px;
    }

    .rd-audience {
        gap: 16px;
    }

    .rd-audience__item {
        padding: 36px 16px 20px;
    }

    .rd-audience__label {
        margin-bottom: 24px !important;
    }

    .rd-audience__text {
        margin-bottom: 30px !important;
    }

    .rd-audience__btn {
        min-height: 56px;
        font-size: 16px;
    }
}

/* container: 608px */
@media screen and (max-width: 991px) {
    .rd-page {
        --rd-text: 16px;
        --rd-h2: 26px;
        --rd-label: 16px;
        --rd-gap: 40px;
    }

    .rd-page__title {
        margin: 20px 0 24px;
        font-size: 20px;
    }

    .rd-heading {
        margin-bottom: 28px;
    }

    .rd-heading__label::before,
    .rd-heading__label::after {
        flex-basis: 40px;
    }

    .rd-heading::after {
        width: 200px;
        height: 3px;
        margin-top: 20px;
    }

    .rd-hero__lead {
        width: 60%;
    }

    /* Баннер 2: заголовки уходят под фото */
    .rd-compare {
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: var(--rd-navy);
    }

    .rd-compare__media {
        grid-column: 1 / -1;
    }

    .rd-compare__side {
        position: static;
        width: auto;
        padding: 20px 16px 24px;
    }

    .rd-compare__era {
        margin-bottom: 6px;
        font-size: 14px;
        opacity: 0.8;
    }

    .rd-compare__title {
        font-size: 20px;
        line-height: 1.2;
    }

    .rd-compare__caption {
        top: auto;
        bottom: 4%;
        width: 30%;
    }

    .rd-parts {
        grid-template-columns: 1fr;
        margin-top: 32px;
    }

    .rd-story {
        padding: 0;
    }

    .rd-products {
        grid-template-columns: repeat(2, 1fr);
    }

    .rd-today {
        grid-template-columns: 1fr;
    }

    .rd-today__media {
        order: -1;
        aspect-ratio: 4 / 3;
    }

    .rd-today__content {
        padding: 32px 24px 40px;
    }

    .rd-today__title-big {
        font-size: 48px;
    }

    .rd-today__title-small {
        font-size: 30px;
    }

    .rd-today__accent,
    .rd-today__text {
        max-width: none;
        font-size: 18px;
    }

    .rd-today__text {
        margin-top: 28px !important;
    }

    .rd-audience {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* container: 100% */
@media screen and (max-width: 767px) {
    .rd-page {
        --rd-h2: 22px;
        --rd-gap: 36px;
        padding-bottom: 50px;
    }

    .rd-heading__label {
        gap: 12px;
    }

    .rd-heading__label::before,
    .rd-heading__label::after {
        flex-basis: 24px;
    }

    .rd-heading::after {
        width: 140px;
    }

    /* Баннер 1 */
    .rd-hero {
        aspect-ratio: 3 / 4;
    }

    .rd-hero__media img {
        inset: 0;
        width: 100%;
        height: 100%;
        object-position: 72% center;
    }

    .rd-hero__content {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 20px 16px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 60%);
    }

    .rd-hero__title,
    .rd-hero__lead {
        position: static;
        width: auto;
    }

    .rd-hero__title-big {
        font-size: 64px;
        line-height: 1.1;
    }

    .rd-hero__title-small {
        font-size: 36px;
    }

    .rd-hero__lead {
        margin-top: 12px !important;
        font-size: 15px;
        line-height: 1.3;
    }

    /* Баннер 2 */
    .rd-compare__side {
        padding: 16px 12px 20px;
    }

    .rd-compare__title {
        font-size: 17px;
    }

    .rd-compare__caption {
        display: none;
    }

    /* Коллаж: 2 колонки */
    .rd-collage {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
        gap: 8px;
        aspect-ratio: auto;
    }

    .rd-collage__item--mirror { grid-column: 1; grid-row: 1 / 3; }
    .rd-collage__item--lamp   { grid-column: 2; grid-row: 1; aspect-ratio: 372 / 570; }
    .rd-collage__item--basin  { grid-column: 2; grid-row: 2; aspect-ratio: 372 / 289; }
    .rd-collage__item--towel  { grid-column: 1; grid-row: 3; aspect-ratio: 537 / 439; }
    .rd-collage__item--shelf  { grid-column: 2; grid-row: 3; aspect-ratio: 536 / 424; }
    .rd-collage__item--chest  { grid-column: 1 / -1; grid-row: 4; aspect-ratio: 930 / 419; }

    /* Баннер 4: текст сверху, фото в две колонки */
    .rd-value {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        aspect-ratio: auto;
        padding: 28px 12px 12px;
    }

    .rd-value__content {
        position: relative;
        grid-column: 1 / -1;
        grid-row: 1;
        left: auto;
        top: auto;
        transform: none;
        margin-bottom: 18px;
    }

    .rd-value__years {
        width: auto;
        height: auto;
        padding: 6px 14px;
        border-width: 2px;
        font-size: 14px;
    }

    .rd-value__title {
        margin-top: 16px !important;
        font-size: 24px;
        line-height: 1.3;
        white-space: normal;
    }

    .rd-value__photo {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: auto;
        height: auto;
        grid-row: 2;
        aspect-ratio: 438 / 606;
    }

    .rd-value__photo--left {
        grid-column: 1;
    }

    .rd-value__photo--right {
        grid-column: 2;
    }

    /* Продукты: фото сверху, подпись снизу */
    .rd-products {
        gap: 12px;
        margin-top: 24px;
    }

    .rd-products__item {
        flex-direction: column-reverse;
        align-items: center;
        min-height: 0;
        padding: 12px;
        text-align: center;
    }

    .rd-products__img {
        width: 100%;
        max-width: 160px;
    }

    .rd-products__title {
        flex: 0 0 auto;
        margin: 0;
        font-size: 15px;
    }

    .rd-today__content {
        padding: 24px 16px 32px;
    }

    .rd-today__title-big {
        font-size: 40px;
    }

    .rd-today__title-small {
        font-size: 26px;
    }

    .rd-today__accent,
    .rd-today__text {
        font-size: 16px;
    }

    .rd-advantages {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .rd-advantages__title {
        min-height: 0;
        margin-bottom: 10px !important;
        font-weight: 600;
    }

    .rd-audience__item {
        padding: 28px 16px 16px;
    }
}