/* ======= Участники: сетка ======= */

.beer-festival-participants {
	max-width: 100%;
	box-sizing: border-box;
	padding: 20px;
}

.participants-grid {
	display: grid;
	grid-template-columns: repeat(var(--bf-cols-desktop, 5), minmax(0, 1fr));
	gap: 0;
}

.participant-item {
	position: relative;
	aspect-ratio: 1;
	background: #ffffff;
	border: var(--bf-hover-width, 4px) solid transparent;
	padding: 0;
	margin: 0;
	overflow: hidden;
	cursor: pointer;
	outline: none;
	display: block;
	width: 100%;
	min-width: 0;
	transition:
		border-color var(--bf-anim-duration, 300ms) ease,
		transform var(--bf-anim-duration, 300ms) ease,
		box-shadow var(--bf-anim-duration, 300ms) ease;
}

.participant-item:hover,
.participant-item:focus-visible {
	border-color: var(--bf-hover-color, #098BE6);
	z-index: 2;
}

.participant-item:focus-visible {
	box-shadow: 0 0 0 2px var(--bf-hover-color, #098BE6);
}

.participant-logo {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 10px;
}

.participant-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: transform var(--bf-anim-duration, 300ms) ease;
}

.participant-item:hover .participant-logo img,
.participant-item:focus-visible .participant-logo img {
	transform: scale(1.05);
}

.no-logo {
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	color: #555;
	padding: 20px;
	line-height: 1.25;
}

/* ======= Модальное окно ======= */

#brewery-modal-frontend.brewery-modal {
	display: none;
	position: fixed;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	z-index: 10000;
	width: 100% !important;
	height: 100% !important;
	background-color: var(--bf-backdrop, rgba(0, 0, 0, 0.85));
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

/* Видимость контейнера управляется inline-стилем из JS.
   Класс .bf-is-open нужен только для анимации содержимого. */

#brewery-modal-frontend .bf-modal-content {
	background-color: var(--bf-popup-bg, #ffffff);
	color: var(--bf-popup-text, #1a1a1a);
	margin: 5% auto;
	padding: 5%;
	border-radius: var(--bf-popup-radius, 32px);
	width: 85%;
	max-width: 1100px;
	min-height: 100px;
	position: relative;
	box-sizing: border-box;
	z-index: 2;
}

/* Цвет текста внутри попапа. -webkit-text-fill-color имеет приоритет над color
   в Safari и часто ставится темами — поэтому прописываем явно. */
.brewery-modal .bf-modal-content,
.brewery-modal .bf-modal-content * {
	color: var(--bf-popup-text, #1a1a1a);
	-webkit-text-fill-color: var(--bf-popup-text, #1a1a1a);
}

/* Исключения: иконки соцсетей имеют свой цвет */
.brewery-modal .bf-modal-content .sociallinks,
.brewery-modal .bf-modal-content .sociallinks::before,
.brewery-modal .bf-modal-content .brewery-links a {
	color: var(--bf-social-color, #ffffff) !important;
	-webkit-text-fill-color: var(--bf-social-color, #ffffff) !important;
}

/* Картинки остаются как есть (на всякий случай — если тема даёт им filter) */
.brewery-modal .bf-modal-content img {
	filter: none !important;
	opacity: 1 !important;
}

/* Анимация входа — одноразовый keyframe при добавлении .bf-is-open.
   Даже если класс снимут, контент не исчезает (keyframes без fill-mode). */
.brewery-modal.bf-is-open.bf-anim-fade .bf-modal-content {
	animation: bfModalFade var(--bf-anim-duration, 300ms) ease-out;
}
.brewery-modal.bf-is-open.bf-anim-fade-scale .bf-modal-content {
	animation: bfModalFadeScale var(--bf-anim-duration, 300ms) ease-out;
}
.brewery-modal.bf-is-open.bf-anim-slide-up .bf-modal-content {
	animation: bfModalSlideUp var(--bf-anim-duration, 300ms) ease-out;
}

@keyframes bfModalFade {
	from { opacity: 0; }
}
@keyframes bfModalFadeScale {
	from { opacity: 0; transform: scale(0.94); }
}
@keyframes bfModalSlideUp {
	from { opacity: 0; transform: translateY(40px); }
}

.bf-close-modal {
	position: absolute;
	top: 10px;
	right: 20px;
	font-size: 2.6em;
	line-height: 1;
	font-weight: 300;
	cursor: pointer;
	z-index: 2;
	color: var(--bf-close-color, #000);
	background: none;
	border: none;
	padding: 6px 12px;
	transition: color var(--bf-anim-duration, 300ms) ease, transform var(--bf-anim-duration, 300ms) ease;
}

.bf-close-modal:hover,
.bf-close-modal:focus-visible {
	color: var(--bf-close-hover, #666);
	transform: scale(1.1);
	outline: none;
}

/* ======= Блоки с чередованием ======= */

.bf-block {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	margin-bottom: 50px;
}

.bf-block:last-child {
	margin-bottom: 0;
}

.bf-block__media {
	display: flex;
	align-items: center;
	justify-content: center;
}

.bf-block__media img {
	max-width: 100%;
	height: auto;
	display: block;
}

.bf-block__body {
	min-width: 0;
}

.bf-block__title {
	margin: 0 0 8px 0;
	line-height: 1.2;
}

.bf-block__meta {
	font-size: 0.95em;
	opacity: 0.75;
	margin-bottom: 12px;
}

.bf-block__text {
	margin: 12px 0;
	line-height: 1.55;
}

.bf-block__text p:first-child { margin-top: 0; }
.bf-block__text p:last-child  { margin-bottom: 0; }

/* Чередование */
.beers-section > .bf-block:nth-child(odd) .bf-block__media {
	order: 2;
}

.bf-block--no-media {
	grid-template-columns: 1fr !important;
}

/* ======= Соцсети ======= */

.brewery-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 16px 0 0 0;
}

.brewery-links a {
	text-decoration: none;
	display: inline-flex;
}

.sociallinks {
	background: var(--bf-social-bg, #000);
	padding: 0.6rem;
	color: var(--bf-social-color, #fff);
	font-size: 1.4rem;
	border-radius: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4rem;
	min-height: 1.4rem;
	transition: background-color var(--bf-anim-duration, 300ms) ease, transform var(--bf-anim-duration, 300ms) ease;
}

.brewery-links a:hover .sociallinks,
.brewery-links a:focus-visible .sociallinks {
	background: var(--bf-social-hover-bg, #333);
	transform: translateY(-2px);
}

/* ======= Секция сортов ======= */

.beers-section {
	border-top: none;
	padding-top: 40px;
	margin-top: 40px;
}

.beers-section h3 {
	margin: 0;
}

/* ======= Спиннер загрузки (fallback AJAX) ======= */

.bf-loading {
	text-align: center;
	padding: 60px 20px;
}

.bf-spinner {
	width: 40px;
	height: 40px;
	border: 4px solid rgba(0, 0, 0, 0.1);
	border-top-color: var(--bf-hover-color, #098BE6);
	border-radius: 50%;
	margin: 0 auto 16px;
	animation: bfSpin 0.8s linear infinite;
}

.bf-loading p {
	color: #666;
	margin: 0;
}

@keyframes bfSpin {
	to { transform: rotate(360deg); }
}

.bf-error {
	text-align: center;
	padding: 40px 20px;
}

.bf-error__title {
	color: #d63638;
	font-size: 1.1em;
	margin-bottom: 8px;
}

/* ======= Появление плиток ======= */

.bf-anim-fade .participant-item,
.bf-anim-fade-scale .participant-item,
.bf-anim-slide-up .participant-item {
	animation: bfPlateIn var(--bf-anim-duration, 300ms) ease-out both;
}

@keyframes bfPlateIn {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ======= Предотвращение скролла фона ======= */

body.bf-modal-open {
	overflow: hidden;
}

/* ======= Адаптив ======= */

@media (max-width: 900px) {
	.bf-block {
		gap: 30px;
		margin-bottom: 40px;
	}
}

@media (max-width: 768px) {
	.participants-grid {
		grid-template-columns: repeat(var(--bf-cols-tablet, 3), minmax(0, 1fr));
	}

	.brewery-modal .bf-modal-content {
		width: 92% !important;
		padding: 6% 5% !important;
	}

	.bf-block {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-bottom: 40px;
	}

	.beers-section > .bf-block:nth-child(odd) .bf-block__media {
		order: 0;
	}

	.bf-close-modal {
		top: 8px;
		right: 12px;
		font-size: 2.2em;
	}
}

@media (max-width: 480px) {
	.participants-grid {
		grid-template-columns: repeat(var(--bf-cols-mobile, 2), minmax(0, 1fr));
	}

	.brewery-modal {
		padding: 0;
	}

	.brewery-modal .bf-modal-content {
		width: 100% !important;
		min-height: 100% !important;
		margin: 0 !important;
		border-radius: 0 !important;
		padding: 20px 16px !important;
	}
}

/* ======= prefers-reduced-motion ======= */

@media (prefers-reduced-motion: reduce) {
	.participant-item,
	.brewery-modal .bf-modal-content,
	.sociallinks,
	.bf-close-modal,
	.participant-logo img {
		animation: none !important;
		transition: none !important;
	}
}