/* ============================================================================
   Daily Moscow — подвал v2. Песочница /sandbox/footer.

   Идея: у нынешнего подвала ссылки лежат двумя длинными строками, поэтому
   он читается как «хвост», а не как карта сайта. Новый — колоночный:
   рубрики сгруппированы под заголовками-кикерами, в строке с логотипом —
   награды издания, справа рельс со спецпроектами и подпиской, внизу
   соцсети и правовой блок.

   Типографика штатная, из main.css:
     · кикеры колонок  — Graphik Medium, uppercase, ls .48px (стиль рубрик)
     · ссылки и текст  — Manrope (как навигация в шапке)
   Палитра — фирменная монохромная на чёрном. Красного нет совсем: акцентом
   работает сам логотип, остальное держится на хайрлайнах и серых токенах.

   Шрифты уже подключены глобально: Graphik — в main.css, Manrope 500/800
   и Lora — в components.css (в critical.css лежат только Manrope 400/600).
   Здесь @font-face не дублируется.

   Все токены объявлены на .dm-footer, ни одно правило не выходит за пределы
   подвала. Анимации — только color/transform, при prefers-reduced-motion off.
   ========================================================================= */

/* ---------- токены ---------- */

.dm-footer {
    --dmf-bg: #000;
    --dmf-ink: #fff;
    --dmf-muted: #9d9da4;      /* вторичный текст — фирменный серый */
    --dmf-dim: #7b7b81;        /* кикеры и правовой блок */
    --dmf-rule: rgba(255, 255, 255, .14);
    --dmf-surface: rgba(255, 255, 255, .05);

    --dmf-gap: 32px;
    --dmf-rail: 340px;

    /* body на сайте — flex-колонка, поэтому ширину задаём явно, чтобы подвал
       не сжимался по контенту в любом контексте вставки */
    width: 100%;
    background: var(--dmf-bg);
    color: var(--dmf-ink);
    font-family: Manrope, "Manrope Fallback", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.dm-footer__wrapper {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ---------- шапка подвала ---------- */

.dm-footer__brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px 40px;
    flex-wrap: wrap;
    padding: 48px 0 28px;
}

.dm-footer__logo {
    display: block;
    line-height: 0;
}

.dm-footer__logo img {
    width: 220px;
    height: auto;
}

/* ---------- награды ---------- */

/* Бейджи белые на прозрачном фоне, поэтому на чёрном идут как есть.
   В покое приглушены, при наведении выходят на полную непрозрачность —
   на награды не хочется тянуть внимание сильнее, чем на карту сайта. */
.dm-awards {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.dm-awards__item {
    display: block;
    line-height: 0;
    opacity: .75;
    transition: opacity .18s ease;
}

.dm-awards__item:hover,
.dm-awards__item:focus-visible {
    opacity: 1;
}

.dm-awards__item img {
    display: block;
    width: auto;
    height: 52px;
}

/* ---------- основная сетка ---------- */

.dm-footer__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px var(--dmf-rail);
    gap: 0 48px;
    padding: 40px 0 44px;
    border-top: 1px solid var(--dmf-rule);
}

/* вертикальная линия между картой сайта и рельсом; строка задана явно,
   иначе авто-раскладка кладёт псевдоэлемент в отдельный ряд нулевой высоты */
.dm-footer__main::before {
    content: "";
    grid-column: 2;
    grid-row: 1;
    background: var(--dmf-rule);
}

/* Три колонки в два ряда — рубрик больше, чем помещается в один ряд,
   а четыре узкие колонки ломают длинные названия вроде «Бизнес и финансы». */
.dm-footer__cols {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 44px var(--dmf-gap);
}

/* ---------- колонка ссылок ---------- */

.dm-col__head {
    margin: 0 0 18px;
    font-family: "Graphik Medium", "Graphik Medium Fallback", Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: .48px;
    text-transform: uppercase;
    color: var(--dmf-dim);
}

.dm-col__list,
.dm-follow__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dm-col__list li + li {
    margin-top: 12px;
}

.dm-col__list a {
    display: inline-block;
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    color: var(--dmf-ink);
    text-decoration: none;
    transition: color .18s ease;
}

.dm-col__list a:hover,
.dm-col__list a:focus-visible {
    color: var(--dmf-muted);
}

/* ---------- действие для авторов ---------- */

/* Оформление то же, что у чипов подписки: рамка в хайрлайн, без заливки
   и без цвета — кнопка не должна перетягивать внимание с карты сайта. */
.dm-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border: 1px solid var(--dmf-rule);
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    color: var(--dmf-ink);
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease;
}

.dm-action:hover,
.dm-action:focus-visible {
    background: var(--dmf-surface);
    border-color: rgba(255, 255, 255, .34);
}

.dm-action svg {
    flex: none;
}

/* Кикер колонки занимает 34px (16px строка + 18px отступ), первая ссылка —
   строка 20px с центром на 44px. Кнопка высотой 42px: 23px сверху ставят её
   центр ровно на строку «Поиск» в соседней колонке. */
.dm-col--action .dm-action {
    margin-top: 23px;
}

/* ---------- правый рельс ---------- */

.dm-footer__rail {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* спецпроекты с обложками */
.dm-sp__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dm-sp__list li + li {
    margin-top: 4px;
}

.dm-sp__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px;
    margin: 0 -8px;
    text-decoration: none;
    color: var(--dmf-ink);
    transition: background .18s ease;
}

.dm-sp__row:hover,
.dm-sp__row:focus-visible {
    background: var(--dmf-surface);
}

.dm-sp__img {
    flex: none;
    display: block;
    width: 56px;
    height: 56px;
    overflow: hidden;
    background: var(--dmf-surface);
}

.dm-sp__img img {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: cover;
}

/* Коллажная «20» ТИОН — широкая картинка с прозрачным фоном: кроп по
   квадрату съел бы саму цифру, поэтому вписываем целиком. */
.dm-sp__img--contain img {
    object-fit: contain;
    padding: 4px;
    box-sizing: border-box;
}

.dm-sp__title {
    font-size: 14px;
    line-height: 19px;
    font-weight: 500;
}

/* подписка на площадки */
.dm-follow__note {
    margin: -6px 0 16px;
    font-size: 14px;
    line-height: 20px;
    color: var(--dmf-muted);
}

.dm-follow__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dm-follow__list a {
    display: block;
    padding: 9px 14px;
    border: 1px solid var(--dmf-rule);
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    color: var(--dmf-ink);
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease;
}

.dm-follow__list a:hover,
.dm-follow__list a:focus-visible {
    background: var(--dmf-surface);
    border-color: rgba(255, 255, 255, .34);
}

/* ---------- «наверх» ---------- */

.dm-totop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Graphik Medium", "Graphik Medium Fallback", Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: .48px;
    text-transform: uppercase;
    color: var(--dmf-muted);
    text-decoration: none;
    transition: color .18s ease;
}

.dm-totop svg {
    transition: transform .2s ease;
}

.dm-totop:hover {
    color: var(--dmf-ink);
}

.dm-totop:hover svg {
    transform: translateY(-3px);
}

/* ---------- правовой блок ---------- */

.dm-legal {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px var(--dmf-gap);
    padding: 26px 0 44px;
    border-top: 1px solid var(--dmf-rule);
    font-size: 12px;
    line-height: 18px;
    color: var(--dmf-dim);
}

.dm-legal p {
    margin: 0 0 10px;
}

.dm-legal p:last-child {
    margin-bottom: 0;
}

.dm-legal__col--copy {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.dm-legal__col--awards {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.dm-legal__col--awards .dm-awards__item img {
    height: 44px;
}

.dm-legal__age {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--dmf-rule);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--dmf-muted);
}

/* ---------- адаптив: брейкпоинты сайта 1100 / 940 / 768 / 630 ---------- */

@media only screen and (max-width: 1100px) {
    .dm-footer {
        --dmf-rail: 300px;
    }

    .dm-footer__main {
        gap: 0 36px;
    }

    .dm-footer__cols {
        gap: 36px 24px;
    }
}

@media only screen and (max-width: 940px) {
    /* рельс уходит под карту сайта, вертикальная линия не нужна */
    .dm-footer__main {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 32px 0 36px;
    }

    .dm-footer__main::before {
        display: none;
    }

    .dm-footer__cols,
    .dm-footer__rail {
        grid-column: 1;
        grid-row: auto;
    }

    .dm-footer__cols {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 32px 24px;
    }

    .dm-footer__rail {
        margin-top: 36px;
        padding-top: 32px;
        border-top: 1px solid var(--dmf-rule);
    }

    .dm-legal {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 630px) {
    .dm-footer__brand {
        padding: 40px 0 22px;
        gap: 12px;
    }

    .dm-footer__logo img {
        width: 176px;
    }

    .dm-footer__brand {
        justify-content: flex-start;
    }

    .dm-awards {
        gap: 14px;
    }

    .dm-legal__col--awards {
        justify-content: flex-start;
    }

    .dm-awards__item img {
        height: 40px;
    }

    .dm-footer__cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 20px;
    }

    .dm-col--action .dm-action {
        margin-top: 0;
    }

    .dm-col__head {
        margin-bottom: 14px;
    }

    .dm-legal {
        grid-template-columns: minmax(0, 1fr);
        padding-bottom: 36px;
    }
}

/* ---------- доступность ---------- */

.dm-footer a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .dm-footer * {
        transition: none !important;
    }
}