/**
 * Свидетельства и ответы на молитвы — оформление в стиле «Города в молитве».
 * Файл заменяет собой стили компонента из шаблона default: движок берёт
 * style.css из текущего шаблона, если он есть.
 */

/* --- Карточка свидетельства ---------------------------------------------- */

.dg-content {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 22px;
    padding: clamp(22px, 2.6vw, 30px);
    margin: 0 0 20px;
    background: var(--gvm-surface);
    border: 1px solid var(--gvm-line-soft);
    border-radius: 0;
    box-shadow: var(--gvm-shadow);
    font-family: var(--gvm-text);
    color: var(--gvm-ink);
    overflow: visible;
}

.dg-content .avatar {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    float: none;
}
.dg-content .avatar img {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--gvm-paper-warm);
}

.mes-title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    font-family: var(--gvm-text);
}

.user-date {
    font-family: var(--gvm-text);
    font-size: .86rem;
    color: var(--gvm-ink-faint);
    padding: 0;
    margin: 0;
}

.mes {
    grid-column: 2;
    grid-row: 2;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    font-family: var(--gvm-text);
}
.mes a {
    display: inline-block;
    margin: .15em 0 .5em;
    font-family: var(--gvm-serif);
    font-size: 1.32rem;
    line-height: 1.25;
    color: var(--gvm-navy);
    text-decoration: none;
}
.mes a:hover { color: var(--gvm-accent-deep); }

.gb-text {
    font-family: var(--gvm-text);
    font-size: 1.02rem;
    line-height: 1.78;
    color: var(--gvm-ink);
    padding: 0;
    margin: 0;
}
.gb-text p { margin: 0 0 .9em; }
.gb-text p:last-child { margin-bottom: 0; }

/* --- Кнопка «Ответить» ---------------------------------------------------- */

.dg-content .repley,
.dg-content .rep a,
.rep a {
    display: inline-flex;
    align-items: center;
    grid-column: 2;
    grid-row: 3;
    margin-top: 1em;
    padding: .6em 1.3em;
    background: transparent;
    border: 1px solid var(--gvm-line);
    border-radius: var(--gvm-radius);
    color: var(--gvm-ink-soft);
    font-family: var(--gvm-serif);
    font-size: .98rem;
    text-decoration: none;
    box-shadow: none;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.dg-content .repley:hover,
.rep a:hover {
    background: var(--gvm-paper);
    border-color: var(--gvm-navy);
    color: var(--gvm-navy);
}

/* --- Кнопка «Оставить свидетельство» в заголовке -------------------------- */

h1 a.bottom {
    float: none;
    padding: .7em 1.5em;
    background: var(--gvm-navy);
    border: 1px solid var(--gvm-navy);
    border-radius: var(--gvm-radius);
    color: #fff;
    font-family: var(--gvm-serif);
    font-size: 1.02rem;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: none;
}
h1 a.bottom:hover { background: var(--gvm-navy-soft); color: #fff; }

/* --- Меню модерации у записи --------------------------------------------- */

/* значок с шестерёнкой в правом верхнем углу карточки */
.dg-content .mod-menu-a {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    position: relative;
    float: none;
}
/* меню скрыто и раскрывается по наведению — как в исходном компоненте */
.mod-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    margin: 0;
    min-width: 190px;
    padding: 6px 0;
    background: var(--gvm-surface);
    border: 1px solid var(--gvm-line);
    box-shadow: var(--gvm-shadow-lift);
    border-radius: 0;
    z-index: 40;
    white-space: nowrap;
}
.mod-menu-a:hover .mod-menu,
.mod-menu-a:focus-within .mod-menu { display: block; margin: 0; }
.mod-menu-a .mod-menu a {
    display: block;
    margin: 0;
    padding: .55em 1.1em .55em 2.2em;
    color: var(--gvm-ink);
    font-family: var(--gvm-text);
    font-size: .93rem;
    background-position: .8em center;
    text-decoration: none;
}
.mod-menu-a .mod-menu a:hover { background-color: var(--gvm-paper); color: var(--gvm-navy); }

/* --- Вкладки над лентой --------------------------------------------------- */

.tabs-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--gvm-line);
    font-family: var(--gvm-text);
}
.tabs-menu li { margin: 0; }
.tabs-menu a {
    display: block;
    padding: .7em 1.25em;
    margin-bottom: -1px;
    color: var(--gvm-ink-soft);
    font-size: .96rem;
    text-decoration: none;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 0;
    background: none;
}
.tabs-menu a:hover { color: var(--gvm-navy); }
.tabs-menu .active a,
.tabs-menu a.active {
    background: var(--gvm-surface);
    color: var(--gvm-navy);
    border-color: var(--gvm-line);
    border-bottom-color: var(--gvm-surface);
}

@media (max-width: 560px) {
    .dg-content { grid-template-columns: 1fr; gap: 12px; }
    .dg-content .avatar,
    .mes-title, .mes, .rep a, .dg-content .repley { grid-column: 1; grid-row: auto; }
}