/*
====================================================================

Front page: Документы

Каркас и ширина ленты - в assets/css/section.css. Здесь - только
собственный визуал блока.

Слайдер на общем движке (slider.js/slider.css): стрелки и свайп -
движок, визуал карточки - здесь. Карточка - скан документа с
подписью на тёмном градиенте у нижнего края, как у карточек врачей:
общая система карточек главной.

Типографика карточки - через общие токены --dd-card-* из
typography.css, размеры в блоке напрямую не задаются.

====================================================================
*/


.dd-documents {
    /* +50px сверху: место под свисающий клин среза. */
    padding-top: calc(clamp(40px, 7vw, 96px) + 50px);

    background: var(--dd-section-grey);
}

.dd-documents__title {
    margin: 0 0 clamp(36px, 4vw, 64px);
    color: var(--dd-primary);
    font-family: var(--dd-font-display);
    font-weight: var(--dd-display-weight);
    font-size: var(--dd-display-size);
    text-align: center;
}

.dd-documents__slider {
    position: relative;
}

/* Как у врачей: вертикальный запас, чтобы вьюпорт не резал тень. */
.dd-documents .dd-slider__viewport {
    padding: 60px 0;
    margin: -60px 0;
}

.dd-documents .dd-slider__item {
    padding: 0 11px;
}

.dd-documents__card {
    position: relative;

    margin: 0;
    aspect-ratio: 3 / 4;
    overflow: hidden;

    background: var(--dd-white);
    border-radius: 14px;
    box-shadow: 0 16px 22px -14px rgba(0, 16, 19, .28);
}

.dd-documents__scan {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/*
 * Подпись - та же система, что у карточек врачей: заголовок в зоне
 * фиксированной высоты (две строки, прижат вниз), линия на одной
 * высоте во всех карточках, под ней описание.
 */
.dd-documents__meta {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 48px 26px 24px;

    background: linear-gradient(
        180deg,
        rgba(0, 16, 19, 0) 0%,
        rgba(0, 16, 19, .55) 45%,
        rgba(0, 16, 19, .92) 100%
    );
}

.dd-documents__caption {
    display: flex;
    align-items: flex-end;
    height: 2.4em;

    color: var(--dd-white);
    font-family: var(--dd-font-heading);
    font-weight: var(--dd-font-weight-bold);
    font-size: var(--dd-card-title);
    line-height: 1.2;
}

.dd-documents__divider {
    width: 100%;
    margin: 12px 0;
    border: 0;
    border-top: 1px solid rgba(245, 250, 253, .55);
}

.dd-documents__desc {
    min-height: calc(2 * 1.5em);
    color: var(--dd-white);
    font-size: var(--dd-card-text);
    line-height: 1.5;
}

/* Стрелки как на баннере и там же - у краёв вьюпорта. */
.dd-documents .dd-slider__arrow--prev {
    left: calc(50% - 50vw + 14px);
}

.dd-documents .dd-slider__arrow--next {
    right: calc(50% - 50vw + 14px);
}