/* DigitHelp — common styles for both help centers (ru + us).
 *
 * This file is the single source of truth. On every build/dev run it is
 * copied into <project>/docs/_style/custom.css (see the sync-style script)
 * and loaded on every page AFTER the Diplodoc bundle, so rules here win.
 *
 * Class prefixes:
 *   dc-*        page layout/chrome (.dc-doc-page, .dc-toc, .dc-search-suggest)
 *   yfm, yfm-*  article content    (.yfm h2, .yfm-note, .yfm-tab, .yfm img)
 *   g-*         Gravity UI base + theme variables (--g-color-*)
 */

/* Video players: soften embedded iframes */
.yfm iframe {
    border-radius: 8px;
}

/* Screenshots: subtle border so light images don't blend into the page */
.yfm img {
    border-radius: 6px;
}

/* Align the sidebar toc with the header logo: the navigation logo sits
 * 40px from the left, the toc only 24px. */
.dc-doc-layout__left .dc-doc-layout__toc {
    padding-left: 40px;
}

/* ------------------------------------------------------------------ */
/* Landing page (index.yaml leading page): gradient hero + card grid,
 * styled after aistudio.yandex.ru/docs.
 * Structure rendered by Diplodoc:
 *   .dc-doc-leading-page__title       h1
 *   .dc-doc-leading-page__description intro paragraph
 *   .dc-doc-leading-page__links_root  ul of link cards
 *   .dc-doc-leading-page__links-item_root  li (card)
 *   .dc-doc-leading-page__links-link  card title link
 */

.g-root {
    --wz-hero-text: #1d2b32;
    --wz-card-bg: #eceee3;
    --wz-accent: #0e7d86;
}

.g-root_theme_dark {
    --wz-card-bg: var(--g-color-base-generic);
    --wz-accent: #3fb1ba;
}

/* Text highlight: writers wrap words in plain <mark>…</mark> and get the
 * brand accent in both themes. Marks with explicit inline styles
 * (legacy GitBook colors) keep their own color. */
.yfm mark {
    background: transparent;
    color: var(--wz-accent);
}

/* The landing page has no article mini-toc, so drop the empty right rail
 * and let the content take the full width right of the sidebar,
 * as on the Yandex docs landing. Articles keep their rail. */
.dc-doc-leading-page > .dc-doc-layout__right {
    display: none;
}

.dc-doc-leading-page__title {
    margin: 24px 0 0;
    padding: 90px 48px;
    border-radius: 24px;
    background:
        radial-gradient(120% 180% at 85% 0%, rgba(174, 129, 231, .55) 0%, rgba(174, 129, 231, 0) 55%),
        radial-gradient(140% 200% at 100% 100%, rgba(133, 205, 128, .55) 0%, rgba(133, 205, 128, 0) 60%),
        linear-gradient(100deg, #efe9a9 0%, #e3d3ee 60%, #cbb3ec 100%);
    color: var(--wz-hero-text);
    /* .dc-doc-page-title is display:flex, so text-align alone won't center */
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: clamp(34px, 4.5vw, 54px);
    line-height: 1.15;
    font-weight: 700;
}

.dc-doc-leading-page__description {
    margin-top: 28px;
    text-align: center;
    font-size: var(--g-text-body-3-font-size);
    color: var(--g-color-text-secondary);
}

.dc-doc-leading-page__links_root {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 48px;
    margin-bottom: 0;
}

.dc-doc-leading-page__links-item_root {
    display: block;
    min-width: 0;
    max-width: none;
    width: auto;
    margin: 0;
    padding: 28px 28px 32px;
    border-top: none;
    border-radius: 20px;
    background: var(--wz-card-bg);
    color: var(--g-color-text-secondary);
    transition: transform .15s ease, box-shadow .15s ease;
}

.dc-doc-leading-page__links-item_root:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
}

.g-root_theme_dark .dc-doc-leading-page__links-item_root:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, .4);
}

.dc-doc-leading-page__links-title_root {
    margin-bottom: 8px;
}

.dc-doc-leading-page__links-link,
.dc-doc-leading-page__links-link:active {
    color: var(--g-color-text-primary);
}

.dc-doc-leading-page__links-link:hover,
.dc-doc-leading-page__links-item_root:hover .dc-doc-leading-page__links-link {
    color: var(--wz-accent);
}