/* =========================================================================
   responsive.css — современный адаптивный слой (подключается ПОСЛЕ style.css)
   Задача: перевести сетку карточек артистов на CSS Grid и убрать зависимость
   от «зоопарка» медиа-запросов. Сетка сама перестраивается под ширину экрана —
   отдельные брейкпоинты для колонок больше не нужны.

   Слой аддитивный: правит только классы сетки карточек. Остальной CSS не трогает.
   Тюнить значения (минимальную ширину карточки, gap, соотношение фото) удобно
   прямо здесь, на тестовой копии.
   ========================================================================= */

/* --- Контейнер сетки: во всю ширину, ограничен по максимуму, по центру --- */
.gallery1 {
	width: 100% !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 0 15px !important;
	box-sizing: border-box !important;

	/* Автоадаптивная сетка: колонки сами добавляются/убираются.
	   minmax(200px, 1fr) → телефон обычно 2 колонки, планшет 3–4, десктоп 5–6.
	   Хотите крупнее карточки — увеличьте 200px; мельче — уменьшите. */
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
	gap: 20px !important;
}

/* --- Карточка = ячейка сетки (не float / не inline-block) --- */
.gallery-m a {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
	vertical-align: top;
}

/* --- Фото карточки: фикс. соотношение вместо жёсткой высоты 400px --- */
.str-thumbnail {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 3 / 4 !important;   /* портретное фото; поменяйте на 1/1, 2/3 и т.п. */
	background-position: center center !important;
	background-size: cover !important;
	display: block !important;
	border-radius: 4px;
}

/* --- Плашка с именем: прижата к низу карточки --- */
.str-title {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* --- VIP-иконка: в верхний угол карточки, без хрупких отрицательных отступов --- */
.vip-icon {
	position: absolute !important;
	top: 8px !important;
	left: 8px !important;
	margin: 0 !important;
	width: 48px !important;
	height: auto;
	z-index: 2;
}

/* --- Текстовые блоки под сеткой: убрать узкие фикс-проценты на мобильном --- */
@media (max-width: 640px) {
	.block-3-m .sub-text-w {
		width: 90% !important;
	}
	.block-3 {
		padding-top: 80px !important;  /* меньше пустоты над сеткой на телефоне */
	}
	.block-3-m h1,
	.block-3-m h2 {
		line-height: 1.4 !important;   /* было 130px — на телефоне это огромная дыра */
		padding: 20px 10px !important;
	}
}

/* --- Общая страховка от горизонтальной прокрутки на мобильных --- */
@media (max-width: 640px) {
	html, body { overflow-x: hidden; }
	img, video, iframe, table, embed, object { max-width: 100%; height: auto; }
	/* контейнеры с жёсткой шириной в px не должны вылезать за экран */
	.container, .wrap, .content, .main, header, footer, .header, .footer, section {
		max-width: 100% !important;
		box-sizing: border-box;
	}
}

/* Заметные сообщения формы CF7 */
.wpcf7-response-output {
color: #fff !important;
background: rgba(0,0,0,.55);
border: 2px solid #c9a24b !important;
border-radius: 6px;
padding: 12px 16px !important;
margin: 15px auto !important;
font-size: 16px;
text-align: center;
max-width: 420px;
}
.wpcf7-form.sent .wpcf7-response-output { border-color: #4caf50 !important; }
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output { border-color: #e53935 !important; }

/* Кнопка "Заказать" на карточке артиста */
.card-order { text-align:center; margin:25px 0; }
.card-order-btn {
    display:inline-block; padding:12px 40px;
    background:linear-gradient(#e8c766,#c9a24b);
    color:#1c040d !important; font-size:20px; font-weight:bold;
    text-decoration:none; border-radius:6px; text-transform:uppercase;
    cursor:pointer; transition:opacity .2s;
}
.card-order-btn:hover { opacity:.85; }

/* Ссылки в подвале — гарантированно кликабельны */
.footer-links { position: relative; z-index: 100; }
.footer-links a { pointer-events: auto !important; cursor: pointer; display: inline-block; padding: 8px 0; }
footer { position: relative; z-index: 100; }

/* CF7: читаемый текст согласия и подписей на тёмном фоне */
.wpcf7 .wpcf7-acceptance .wpcf7-list-item-label,
.wpcf7 label { color: #f0e6d2 !important; }
.wpcf7-acceptance a { color: #e8c766 !important; text-decoration: underline; }
.wpcf7-not-valid-tip { color: #ff8a80 !important; font-weight: bold; }
.wpcf7 .wpcf7-acceptance { margin: 12px 0; display: inline-block; }

/* CF7: спрятать служебную сводку ошибок (для скринридеров), которая вылезала в угол */
.wpcf7 .screen-reader-response {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap;
}

/* Honeypot — скрытое поле-ловушка */
.hp-field { position:absolute !important; left:-9999px !important; top:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* Логотип в шапке — ограничить высоту */
.mobile-menu-logo img {
max-height: 60px !important;
width: auto !important;
height: auto !important;
}
.mobile-menu-logo { line-height: 0; }

/* Логотип в шапке на планшетах/мобильном — вернуть и вписать */
@media (max-width: 1150px) {
.mobile-menu-logo {
display: block !important;
position: static !important;
text-align: center;
padding: 8px 0;
}
.mobile-menu-logo img {
max-height: 50px !important;
width: auto !important;
height: auto !important;
}
}
@media (max-width: 480px) {
.mobile-menu-logo img { max-height: 40px !important; }
}

/* Логотип на мобильном — форсированно показать (высокая специфичность) */
@media (max-width: 1150px) {
html body .mobile-menu-logo {
display: block !important;
position: static !important;
top: auto !important;
left: auto !important;
text-align: center !important;
padding: 10px 0 !important;
}
html body .mobile-menu-logo img {
max-height: 48px !important;
width: auto !important;
height: auto !important;
display: inline-block !important;
}
}

/* Логотип на мобильном — форсированно (перебиваем display:none) */
@media (max-width: 1150px) {
.cd-main-nav .mobile-menu-logo,
header .mobile-menu-logo,
html body .mobile-menu-logo {
display: block !important;
position: static !important;
top: auto !important; left: auto !important;
text-align: center !important;
padding: 10px 0 !important;
}
.mobile-menu-logo img {
max-height: 45px !important; width: auto !important; height: auto !important;
display: inline-block !important;
}
}


/* Блог: блок контента не перекрывает шапку на мобильном */
@media (max-width: 768px) {
    .block-3 { z-index: 1 !important; }
}

/* Блог single.php: заголовок статьи */
.single-title {
    font-size: 20px !important;
    line-height: 1.4 !important;
    text-transform: uppercase;
    color: #e8c766;
    text-align: center;
    padding: 20px 15px 10px !important;
    margin: 0 !important;
    display: block !important;
    position: static !important;
    z-index: 1 !important;
}