/* ==========================================================================
   Свидетельства — каталог историй читателей
   ==========================================================================
   Пост, а не журнальная карточка: строки текста, имя автора, «Развернуть».
   Ни лайков, ни счётчиков популярности — только отклик словом.
   ========================================================================== */

.mg-tst-head {
	padding: clamp(3rem, 7vh, 5rem) 0 1.5rem;
}

.mg-tst-head__title {
	margin: .6rem 0 .9rem;
	font-family: var(--mg-serif, "Cormorant Garamond", serif);
	font-weight: 300;
	font-size: clamp(2rem, 4.2vw, 3.1rem);
	line-height: 1.1;
	color: var(--mg-cream, #f2e8d5);
}

.mg-tst-head__lead {
	max-width: 46ch;
	margin: 0;
	color: var(--mg-muted, rgba(232, 226, 216, .68));
	font-size: 1.02rem;
	line-height: 1.75;
}

.mg-tst-wrap {
	padding-bottom: clamp(4rem, 9vh, 7rem);
}

.mg-tst-list {
	display: grid;
	gap: 1rem;
	max-width: 46rem;
	margin-top: 2rem;
}

/* --- карточка --- */

.mg-tst {
	padding: 1.35rem 1.5rem;
	border: 1px solid rgba(212, 162, 78, .16);
	border-radius: 14px;
	background: rgba(255, 255, 255, .015);
	transition: border-color .2s ease, background-color .2s ease;
}

.mg-tst:hover {
	border-color: rgba(212, 162, 78, .3);
}

.mg-tst__head {
	display: flex;
	align-items: baseline;
	gap: .7rem;
	flex-wrap: wrap;
}

.mg-tst__title {
	margin: 0;
	font-family: var(--mg-serif, "Cormorant Garamond", serif);
	font-weight: 400;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	line-height: 1.3;
	color: var(--mg-cream, #f2e8d5);
}

.mg-tst__meta {
	margin: .45rem 0 .85rem;
	font-size: .82rem;
	letter-spacing: .02em;
	color: var(--mg-muted, rgba(232, 226, 216, .55));
}

.mg-tst__dot {
	margin: 0 .4em;
	opacity: .5;
}

.mg-tst__short,
.mg-tst__full p {
	margin: 0 0 .9rem;
	color: rgba(232, 226, 216, .84);
	line-height: 1.8;
}

.mg-tst__full p:last-child {
	margin-bottom: 0;
}

.mg-tst__full {
	margin-top: .2rem;
}

.mg-tst__full img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

.mg-tst__full iframe {
	max-width: 100%;
	border-radius: 10px;
}

/* --- обложка: картинка из формы --- */

.mg-tst__cover {
	margin: 0 0 1rem;
}

.mg-tst__cover img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 26rem;
	object-fit: cover;
	border-radius: 10px;
}

/* --- видео: 16:9 без вылезания за карточку --- */

.mg-tst__video {
	position: relative;
	margin: 0 0 1rem;
	padding: 0;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	background: #000;
}

.mg-tst__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.mg-tst__foot {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1rem;
	padding-top: .85rem;
	border-top: 1px solid rgba(212, 162, 78, .12);
	font-size: .84rem;
	color: var(--mg-muted, rgba(232, 226, 216, .55));
}

.mg-tst__more {
	padding: 0;
	border: 0;
	background: none;
	color: var(--mg-gold, #d4a24e);
	font: inherit;
	cursor: pointer;
	border-bottom: 1px solid rgba(212, 162, 78, .35);
	transition: color .2s ease, border-color .2s ease;
}

.mg-tst__more:hover,
.mg-tst__more:focus,
.mg-tst__more:focus-visible,
.mg-tst__more:active {
	/* Тема красит любую кнопку в фокусе золотом — здесь это делает текст нечитаемым. */
	background: none;
	box-shadow: none;
	color: var(--mg-gold-soft, #e8c089);
	border-bottom-color: var(--mg-gold-soft, #e8c089);
	outline: none;
}

/* --- отклики --- */

.mg-tst__replies {
	display: grid;
	gap: .7rem;
	margin-top: 1rem;
	padding-top: .95rem;
	border-top: 1px dashed rgba(212, 162, 78, .14);
}

.mg-tst__reply {
	display: grid;
	gap: .2rem;
	margin: 0;
	font-size: .92rem;
	line-height: 1.65;
	color: rgba(232, 226, 216, .82);
}

.mg-tst__reply-head {
	display: flex;
	align-items: baseline;
	gap: .55rem;
}

.mg-tst__reply-author {
	font-size: .72rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--mg-gold, #d4a24e);
}

.mg-tst__reply-time {
	font-size: .72rem;
	color: rgba(232, 226, 216, .4);
}

.mg-tst__reply-text {
	color: inherit;
}

.mg-tst__replies-closed,
.mg-tst__replies-note {
	margin: 0;
	font-size: .84rem;
	font-style: italic;
	color: rgba(232, 226, 216, .48);
}

.mg-tst__reply-form {
	display: grid;
	gap: .5rem;
	justify-items: start;
}

.mg-tst .mg-tst__reply-form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: .6rem .75rem;
	border: 1px solid rgba(212, 162, 78, .2);
	border-radius: 10px;
	background: rgba(0, 0, 0, .18);
	color: var(--mg-text, #cfc4b0);
	font: inherit;
	font-size: .92rem;
	line-height: 1.65;
	resize: vertical;
	box-shadow: none;
}

.mg-tst__reply-form textarea::placeholder {
	color: rgba(232, 226, 216, .35);
}

.mg-tst__reply-form textarea:focus-visible {
	border-color: rgba(212, 162, 78, .5);
	outline: 2px solid rgba(212, 162, 78, .18);
	outline-offset: 1px;
}

/* --- статусы (видны только автору и админу) --- */

.mg-tst__status {
	padding: .15em .6em;
	border-radius: 999px;
	border: 1px solid currentColor;
	font-size: .68rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.mg-tst__status.is-draft {
	color: rgba(232, 226, 216, .5);
}

.mg-tst__status.is-pending {
	color: var(--mg-gold, #d4a24e);
}

.mg-tst__status.is-publish {
	color: #a6cf98;
}

/* --- сообщение после сохранения --- */

.mg-tst-note {
	max-width: 46rem;
	margin: 1.5rem 0 0;
	padding: .8rem 1rem;
	border: 1px solid rgba(212, 162, 78, .25);
	border-radius: 10px;
	background: rgba(212, 162, 78, .07);
	color: rgba(232, 226, 216, .85);
	font-size: .92rem;
	line-height: 1.6;
}

/* --- гость и неподписчик --- */

.mg-tst-gate {
	max-width: 40rem;
	margin-top: 2.5rem;
	padding: 2rem 1.8rem;
	border: 1px solid rgba(212, 162, 78, .22);
	border-radius: 14px;
	text-align: center;
}

.mg-tst-gate__text {
	margin: 0 0 1.2rem;
	color: rgba(232, 226, 216, .78);
	line-height: 1.8;
}

.mg-tst-empty {
	margin-top: 2rem;
	color: rgba(232, 226, 216, .5);
	font-style: italic;
}

/* Скрытая подпись поля: в этом файле её нет, а файл стилей «Зарисовок»
   на странице свидетельств не подключён. */
.mg-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Форма «Рассказать своё»
   ========================================================================== */

.mg-tst-new {
	max-width: 46rem;
	margin-top: 2rem;
	border: 1px solid rgba(212, 162, 78, .18);
	border-radius: 14px;
	background: rgba(255, 255, 255, .015);
	transition: border-color .2s ease;
}

.mg-tst-new:hover,
.mg-tst-new[open] {
	border-color: rgba(212, 162, 78, .32);
}

.mg-tst-new__summary {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: 1.05rem 1.35rem;
	color: var(--mg-cream, #f2e8d5);
	font-family: var(--mg-serif, "Cormorant Garamond", serif);
	font-size: 1.15rem;
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
}

.mg-tst-new__summary::-webkit-details-marker {
	display: none;
}

.mg-tst-new__summary::before {
	content: "+";
	display: inline-block;
	width: 1.4rem;
	color: var(--mg-gold, #d4a24e);
	font-family: inherit;
	font-size: 1.3rem;
	line-height: 1;
	text-align: center;
	transition: transform .2s ease;
}

.mg-tst-new[open] .mg-tst-new__summary::before {
	transform: rotate(45deg);
}

.mg-tst-new__summary:hover,
.mg-tst-new__summary:focus-visible {
	color: var(--mg-gold-soft, #e8c089);
	outline: none;
}

.mg-tst-new__form {
	display: grid;
	gap: .45rem;
	padding: .2rem 1.35rem 1.45rem;
}

.mg-tst-new__label {
	margin-top: .7rem;
	color: rgba(232, 226, 216, .72);
	font-size: .78rem;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.mg-tst-new .mg-tst-new__input,
.mg-tst-new .mg-tst-new__area {
	box-sizing: border-box;
	width: 100%;
	padding: .7rem .85rem;
	border: 1px solid rgba(212, 162, 78, .2);
	border-radius: 10px;
	background: rgba(0, 0, 0, .2);
	color: var(--mg-text, #cfc4b0);
	font: inherit;
	font-size: .95rem;
	line-height: 1.7;
	box-shadow: none;
}

.mg-tst-new__area {
	min-height: 10rem;
	resize: vertical;
}

.mg-tst-new__input::placeholder,
.mg-tst-new__area::placeholder {
	color: rgba(232, 226, 216, .32);
}

.mg-tst-new .mg-tst-new__input:focus,
.mg-tst-new .mg-tst-new__area:focus {
	border-color: rgba(212, 162, 78, .5);
	background: rgba(0, 0, 0, .3);
	box-shadow: none;
	outline: 2px solid rgba(212, 162, 78, .18);
	outline-offset: 1px;
}

.mg-tst-new__input:focus-visible,
.mg-tst-new__area:focus-visible {
	border-color: rgba(212, 162, 78, .5);
	outline: 2px solid rgba(212, 162, 78, .18);
	outline-offset: 1px;
}

.mg-tst-new .mg-tst-new__file {
	box-sizing: border-box;
	width: 100%;
	padding: .55rem .7rem;
	border: 1px dashed rgba(212, 162, 78, .28);
	border-radius: 10px;
	background: rgba(0, 0, 0, .12);
	color: rgba(232, 226, 216, .68);
	font: inherit;
	font-size: .82rem;
}

.mg-tst-new .mg-tst-new__file::file-selector-button {
	margin-right: .7rem;
	padding: .35rem .75rem;
	border: 1px solid rgba(212, 162, 78, .35);
	border-radius: 999px;
	background: none;
	color: var(--mg-gold, #d4a24e);
	font: inherit;
	font-size: .8rem;
	cursor: pointer;
}

.mg-tst-new__hint {
	margin: 0;
	color: rgba(232, 226, 216, .45);
	font-size: .82rem;
	line-height: 1.55;
}

.mg-tst-new__check {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin-top: .7rem;
	color: rgba(232, 226, 216, .72);
	font-size: .9rem;
	cursor: pointer;
}

.mg-tst-new__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: 1rem;
}

/* --- панель редактора ---
   Без JS у панели атрибут hidden и она не показывается: остаётся обычная
   textarea. С JS — панель над полем, поле получает прямые верхние углы. */

.mg-tst-new__editor {
	display: grid;
}

.mg-tst-new__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem;
	padding: .4rem .45rem;
	border: 1px solid rgba(212, 162, 78, .2);
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
	background: rgba(255, 255, 255, .025);
}

.mg-tst-new__toolbar[hidden] {
	display: none;
}

.mg-tst-new__toolbar:not([hidden]) + .mg-tst-new__area {
	border-radius: 0 0 10px 10px;
}

.mg-tst-new__tool {
	padding: .28rem .62rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: none;
	box-shadow: none;
	color: rgba(232, 226, 216, .68);
	font-family: inherit;
	font-size: .78rem;
	font-weight: 400;
	letter-spacing: .02em;
	line-height: 1.5;
	text-transform: none;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.mg-tst-new__tool:hover,
.mg-tst-new__tool:focus-visible {
	border-color: rgba(212, 162, 78, .34);
	background: rgba(212, 162, 78, .07);
	color: var(--mg-gold-soft, #e8c089);
	outline: none;
}

.mg-tst-new__tool:active {
	background: rgba(212, 162, 78, .12);
}

.mg-tst-new__tool-hint {
	margin-left: auto;
	padding: 0 .3rem;
	color: rgba(212, 162, 78, .85);
	font-size: .74rem;
	line-height: 1.4;
}

@media (max-width: 600px) {
	.mg-tst {
		padding: 1.1rem 1.15rem;
	}

	.mg-tst__foot {
		flex-wrap: wrap;
		gap: .6rem;
	}

	.mg-tst-new__summary {
		padding: .95rem 1.05rem;
	}

	.mg-tst-new__form {
		padding: .15rem 1.05rem 1.2rem;
	}

	.mg-tst-new__area {
		min-height: 8rem;
	}

	.mg-tst-new__actions .mg-btn {
		flex: 1 1 100%;
	}

	.mg-tst-new__tool-hint {
		flex-basis: 100%;
		margin-left: 0;
		padding: .1rem .3rem 0;
	}

	.mg-tst__cover img {
		max-height: 18rem;
	}
}