/* ==========================================================================
   Страница «Карточка объекта»
   Четыре своих блока: шапка объекта с фактами, «Задача проекта»,
   «Применённые материалы» и галерея фотографий. Ниже идут общие блоки —
   лента объектов (objects.css) и промо-полоса (promo-strip.css).

   Figma: 181:3184  — десктоп 1440 × 3438
          278:11156 — шапка объекта, 1320 × 446
          188:3679  — «Задача проекта»
          230:2510  — «Применённые материалы»
          186:3581  — галерея
          278:10811 — мобильный 375 × 4531

   WP: template-parts/blocks/object-*.php
   ========================================================================== */

.object-page {
    /* 24px — отбивка от шапки: крошки в макете стоят ровно на 128px */
    padding: 24px 0 56px;
}

/* --------------------------------------------------------------------------
   Шапка объекта: слева заголовок и факты, справа фотография.
   Высоту задаёт фотография, поэтому факты прижаты к её низу
   -------------------------------------------------------------------------- */

.object-hero {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.object-hero__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
}

.object-hero__head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.object-hero__title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--c-grey-800);
}

.object-hero__desc {
    max-width: 632px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-grey-800);
}

.object-hero__media {
    position: relative;
    overflow: hidden;
}

/* Пропорция из макета: 648 × 446 на десктопе и 375 × 258 на мобильном.
   Распорка, а не aspect-ratio: так фотография растянется вместе с рядом,
   если на узком экране текст окажется выше */
.object-hero__media::before {
    content: "";
    display: block;
    padding-top: 68.827%;
}

.object-hero__media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Факты об объекте --- */

/* Строки одной высоты: в макете все четыре плашки равны по самой высокой */
.facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 8px;
}

.fact {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    padding: 16px;
    overflow: hidden;
    background-color: var(--c-grey-200);
}

/* Узор в правом верхнем углу плашки, часть его срезается краем.
   Класс стоит на <picture>, а не на <img>: так узор выпадает из колонки
   и не занимает в ней место */
.fact__pattern {
    position: absolute;
    top: -6px;
    right: -15px;
    width: 65.999px;
    height: 107.15px;
    pointer-events: none;
}

.fact__pattern img {
    width: 100%;
    height: 100%;
    max-width: none;
}

.fact__label {
    position: relative;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: var(--c-grey-500);
}

.fact__value {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
    color: var(--c-grey-800);
}

/* <picture> по умолчанию строчный и добавляет строке лишнюю высоту */
.fact__value picture {
    display: flex;
    flex-shrink: 0;
}

.fact__value img {
    width: 24px;
    height: 24px;
}

/* --------------------------------------------------------------------------
   «Задача проекта» — серая полоса с узором, уходящим за левый край
   -------------------------------------------------------------------------- */

.object-task {
    position: relative;
    overflow: hidden;
    padding: 56px 0;
    background-color: var(--c-grey-200);
}

.object-task__pattern {
    position: absolute;
    bottom: -111.67px;
    left: calc(-73px + var(--container-offset));
    width: 804.999px;
    height: 276.111px;
    max-width: none;
    pointer-events: none;
}

.object-task__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.object-task__head {
    flex-shrink: 0;
    width: 536px;
}

.object-task__body {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 648px;
}

.object-task__text {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-grey-800);
}

/* В макете между абзацами оставлена пустая строка */
.object-task__text p + p {
    margin-top: 1.4em;
}

.object-task__line {
    height: 1px;
    background-color: var(--c-grey-300);
}

.object-task__note {
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    color: var(--c-grey-800);
}

/* --------------------------------------------------------------------------
   «Применённые материалы»
   -------------------------------------------------------------------------- */

.object-materials {
    padding: 56px 0;
}

.object-materials__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* 37px — расстояние от заголовка до текста в макете */
    margin-top: 37px;
}

.object-materials__text {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-grey-800);
}

/* Здесь абзацы идут подряд, без пустой строки */
.object-materials__text p + p {
    margin-top: 0;
}

/* Название системы в заголовке выделено красным */
.object-materials__accent {
    color: var(--c-red-500);
}

.object-materials__subtitle {
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    color: var(--c-grey-800);
}

.object-materials__list {
    padding-left: 24px;
    list-style: disc;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-grey-800);
}

.object-materials__list b {
    font-weight: 700;
}

.object-materials__note {
    max-width: 944px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-grey-500);
}

/* --------------------------------------------------------------------------
   Галерея: одна большая фотография и четыре маленьких
   -------------------------------------------------------------------------- */

.gallery {
    position: relative;
    overflow: hidden;
    padding: 56px 0;
    background-color: var(--c-grey-200);
}

.gallery__pattern {
    position: absolute;
    top: -44px;
    right: calc(-130px + var(--container-offset));
    width: 474px;
    height: 769.542px;
    max-width: none;
    pointer-events: none;
}

.gallery__inner {
    position: relative;
    z-index: 1;
}

/* Четыре колонки по 312px: большая карточка занимает две из них
   и обе строки — ровно 648 × 454, как в макете */
.gallery__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.gallery__item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 736 / 507;
}

.gallery__item--big {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
}

.gallery__item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Подпись на фотографии. От плашки объекта отличается тем,
   что текст здесь не переводится в верхний регистр */
.gallery__tag {
    position: absolute;
    bottom: 16px;
    left: 16px;
    display: flex;
    align-items: center;
    height: 32px;
    padding: 4px 12px;
    background-color: var(--c-grey-800);
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.28px;
    white-space: nowrap;
    color: var(--c-white);
}

/* --------------------------------------------------------------------------
   Планшет
   -------------------------------------------------------------------------- */

@media (max-width: 1279px) {
    .object-hero__title {
        font-size: 40px;
    }

    .object-task__head {
        width: auto;
        flex: 0 1 536px;
    }

    .object-task__body {
        width: auto;
        flex: 0 1 648px;
    }
}

@media (max-width: 1023px) {
    .object-page {
        padding-top: 16px;
    }

    .object-hero {
        margin-top: 16px;
    }

    .object-task__inner {
        flex-direction: column;
        gap: 32px;
    }

    .object-task__head,
    .object-task__body {
        flex: 0 0 auto;
        width: 100%;
    }

    /* Уже с 1024px плашки в двух колонках слишком узкие для крупного
       текста, поэтому здесь включается мелкий набор из мобильного макета */
    .facts {
        gap: 8px 7px;
    }

    .fact {
        padding: 8px;
    }

    .fact__pattern {
        top: -6px;
        right: -18.2px;
        width: 46.196px;
        height: 74.999px;
    }

    .fact__label {
        font-size: 12px;
    }

    .fact__value {
        gap: 4px;
        font-size: 14px;
    }

    .fact__value img {
        width: 16px;
        height: 16px;
    }

    /* большая фотография занимает всю ширину, маленькие — по две в ряд */
    .gallery__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery__item--big {
        grid-column: 1 / -1;
        grid-row: auto;
        aspect-ratio: 343 / 240;
    }
}

/* --------------------------------------------------------------------------
   Мобильная версия — 375 × 4531
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .object-page {
        padding-bottom: 56px;
    }

    .object-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        margin-top: 16px;
    }

    /* фотография идёт первой и во всю ширину экрана */
    .object-hero__media {
        order: -1;
        margin-left: calc(-1 * var(--container-pad));
        margin-right: calc(-1 * var(--container-pad));
    }

    .object-hero__body {
        gap: 24px;
    }

    .object-hero__title {
        font-size: 24px;
        line-height: normal;
    }

    .object-hero__desc {
        max-width: none;
    }

    /* Заголовки разделов на этой странице в мобильном макете 24px,
       а не 28px, как в остальных блоках сайта */
    .object-task .section-head__title,
    .object-materials .section-head__title,
    .gallery .section-head__title {
        font-size: 24px;
        line-height: normal;
    }

    .object-task__inner {
        gap: 32px;
    }

    .object-materials__body {
        margin-top: 37px;
    }

    .object-materials__subtitle {
        font-size: 20px;
    }

    .gallery__grid {
        gap: 7px;
    }

    .gallery__tag {
        bottom: 4px;
        left: 4px;
        height: 20px;
        padding: 0 4px;
        font-size: 12px;
        letter-spacing: 0.24px;
    }

    .gallery__pattern {
        top: -44px;
        right: -89px;
        width: 176.998px;
        height: 287.361px;
    }
}