/* ==== SEO-блок «Автор» ====
   Ставится сразу после .seo-page-container, вне его.
   Повторяет сетку .seo-grid-layout (колонка текста 1fr + сайдбар 380px, gap 40px)
   и отступы .seo-page-container (max-width 1400px, padding 4vw).
   Поэтому текст блока начинается и заканчивается там же, где текст статьи. */

.author-block {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 4vw 8px 4vw;
    box-sizing: border-box;

    /* та же сетка, что у статьи: слева текст, справа пустая колонка под сайдбар */
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    column-gap: 40px;

    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-muted);
}

/* всё содержимое — только в левой колонке */
.author-block > * {
    grid-column: 1;
}

.author-block__line {
    margin: 0 0 6px 0;
}

.author-block__line strong {
    color: var(--seo-text);
    font-weight: 600;
}

.author-block__copyright {
    margin: 0;
    font-size: 0.85em;
}

.author-block__link,
.author-block__site {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.author-block__link:hover,
.author-block__site:hover {
    text-decoration-thickness: 2px;
}

/* ниже 800px сетка статьи складывается в колонку — блок тоже */
@media (max-width: 800px) {
    .author-block {
        display: block;
        padding: 18px 4vw 6px 4vw;
        font-size: 0.85rem;
    }
}

/* ==== Блок «Автор» на главной (вариант B: карточка с фото и фактами) ====
   Стоит внутри .hero, сразу под первым экраном.
   Ширина карточки 1000 px на десктопе, на телефоне — 4vw от края,
   как у остального текста главной. */

.author-card-wrap {
    width: 100%;
    max-width: 1064px;   /* 1000 px карточка + 2rem поля с каждой стороны */
    margin: 0 auto;
    padding: 8px 2rem 56px 2rem;
    box-sizing: border-box;
}

.author-card {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    grid-template-areas:
        "photo head"
        "photo role"
        "photo facts"
        "photo btn";
    column-gap: 30px;
    align-items: start;
    padding: 24px 30px 24px 24px;
    border: 1px solid var(--seo-card-border);
    border-radius: 18px;
    background-color: var(--seo-card-bg);
    box-shadow: 0 10px 30px rgba(20, 30, 60, 0.08);
    box-sizing: border-box;
}

.author-card__photo {
    grid-area: photo;
    align-self: center;
    width: 200px;
    height: 250px;
    display: block;
    object-fit: cover;
    object-position: center 18%;
    border: 1px solid var(--seo-card-border);
    border-radius: 14px;
    background-color: var(--seo-card-bg);
}

.author-card__head {
    grid-area: head;
    min-width: 0;
}

.author-card__kicker {
    display: block;
    margin-bottom: 4px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
}

/* правила главной (.hero h2 / .hero p) сильнее по специфичности — перекрываем */
.author-card .author-card__name {
    margin: 0 0 4px 0;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--seo-text);
    animation: none;
}

.author-card .author-card__name a {
    color: inherit;
    text-decoration: none;
}

.author-card .author-card__name a:hover {
    color: var(--accent);
}

.author-card .author-card__role {
    grid-area: role;
    margin: 0 0 14px 0;
    font-size: 15px;
    line-height: 1.45;
    color: var(--text-muted);
    animation: none;
}

.author-card__facts {
    grid-area: facts;
    margin: 0 0 18px 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 7px;
}

.author-card__facts li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--text-muted);
}

.author-card__facts li::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    background-color: var(--accent);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center / 15px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center / 15px no-repeat;
}

.author-card__btn {
    grid-area: btn;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 10px;
    background-color: var(--accent);
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
}

.author-card__btn:hover {
    filter: brightness(1.1);
}

.author-card__btn span {
    transition: transform 0.15s;
}

.author-card__btn:hover span {
    transform: translateX(3px);
}

/* телефон: фото слева, факты и кнопка — на всю ширину */
@media (max-width: 800px) {
    .author-card-wrap {
        padding: 4px 4vw 32px 4vw;
    }

    .author-card {
        grid-template-columns: 96px minmax(0, 1fr);
        grid-template-areas:
            "photo head"
            "role  role"
            "facts facts"
            "btn   btn";
        column-gap: 16px;
        row-gap: 14px;
        padding: 20px 18px;
        border-radius: 16px;
    }

    .author-card__photo {
        width: 96px;
        height: 120px;
        border-radius: 12px;
        object-position: center 12%;
    }

    .author-card .author-card__name {
        font-size: 21px;
    }

    .author-card .author-card__role {
        margin-bottom: 0;
        font-size: 13.5px;
    }

    .author-card__facts {
        margin-bottom: 0;
        gap: 6px;
    }

    .author-card__facts li {
        font-size: 13.5px;
    }

    .author-card__btn {
        justify-self: stretch;
        width: 100%;
        justify-content: center;
    }
}