/* Клиентская галерея (мотокросс) — верхний блок + сетка событий.
   Редизайн 2026-09-01, см. CLAUDE.md раздел 14. */

/* .gclips ниже использует full-bleed приём (width:100vw + отрицательный
   margin), чтобы карусель доставала до краёв экрана. У 100vw есть
   известная особенность: единица считает и ширину вертикального
   скроллбара тоже, а не только видимую область — если скроллбар у
   браузера "съедает" место (не все мобильные браузеры так делают, но
   десктопные обычно да), 100vw оказывается на несколько пикселей ШИРЕ
   реального окна, и вся страница получает лишний горизонтальный скролл.
   overflow-x:hidden на body — стандартная страховка именно для этого
   приёма (без неё юзабилити страницы ломается на любом устройстве, где
   скроллбар резервирует пространство). Ограничено этой страницей — файл
   подключается только здесь, на остальной сайт не влияет. */
body { overflow-x: hidden; }

#gallery-intro {
	/* Раньше было width:100% — секция шла во всю ширину экрана, из-за чего
	   каждый блок сам отвечал за свой отступ от края (карточки — своим
	   padding, голые заголовки — вообще без отступа). Без width:100%
	   секция получает тот же отступ от края, что и обычная секция сайта
	   (см. main.css: section{width:95%;max-width:1200px}) — тот же самый,
	   что уже был у блока событий ("Välj händelse") ниже. Единственное,
	   что теперь нарочно "пробивает" эту рамку — .gclips (см. ниже). */
	padding-top: 30px;
}

/* ---- карточка-пропуск ---- */
.gpass {
	position: relative;
	background: #fff;
	border: 1px solid rgba(75,30,0,.14);
	border-radius: 4px;
	padding: 26px 28px 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.gpass h1 {
	font-family: 'PT Serif Caption', serif;
	font-size: 26px;
	line-height: 1.15;
	margin: 0;
	color: #2b2016;
	font-weight: 700;
	text-align: left;
	text-shadow: none;
	width: auto;
}
.gpass-lede {
	margin: 0;
	color: #8a7157;
	font-size: 15px;
	line-height: 1.6;
	max-width: 56ch;
}

.gchips {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
@media screen and (max-width: 720px) {
	.gchips { grid-template-columns: 1fr; }
}
.gchip {
	border: 1px solid rgba(75,30,0,.14);
	border-radius: 4px;
	padding: 13px 14px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: #faf7f2;
}
.gchip .gic { font-size: 17px; line-height: 1; }
.gchip .glbl {
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	color: #2b2016;
}
.gchip .gsub {
	font-family: 'Roboto', sans-serif;
	font-size: 11.5px;
	color: #8a7157;
	line-height: 1.4;
}
.gchip-link {
	color: #4B1E00;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid #4B1E00;
}
.gchip-link:hover { color: #6E645E; border-color: #6E645E; }

.gflag-stripe {
	height: 9px;
	margin: 4px -28px 0;
	background-image:
		repeating-linear-gradient(90deg, #4B1E00 0 9px, transparent 0 18px),
		repeating-linear-gradient(0deg, #4B1E00 0 9px, transparent 0 18px);
	background-size: 18px 9px;
	background-blend-mode: multiply;
	opacity: .85;
}

/* ---- тизер доп. услуг (металл / кружка / футболка) ---- */
.gteaser {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px 18px;
	flex-wrap: wrap;
	border: 2px solid #4B1E00;
	border-radius: 4px;
	/* сверху больше воздуха: бейдж висит на самой рамке (top:-11px) и при
	   прежнем padding почти касался первой строки текста */
	padding: 22px 20px 18px;
	background: rgba(75,30,0,.07);
	margin: 18px 0 0;
	box-sizing: border-box;
}
.gteaser-badge {
	position: absolute;
	top: -11px;
	left: 16px;
	background: #4B1E00;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: 10px;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 3px 10px;
}
.gteaser .gicons {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #4B1E00;
	flex-shrink: 0;
}
.gteaser .gicons svg { width: 23px; height: 23px; display: block; }
/* текст не растягивается на всю строку: на широком экране он расплывался
   почти на 820px и блок читался как пустая полоса с кнопками у края */
.gteaser-body { flex: 1 1 260px; min-width: 190px; max-width: 620px; }
.gteaser-body b {
	display: block;
	font-family: 'PT Serif Caption', serif;
	font-size: 15.5px;
	color: #2b2016;
	margin-bottom: 2px;
}
.gteaser-body span {
	font-family: 'Roboto', sans-serif;
	font-size: 12.5px;
	color: #8a7157;
	line-height: 1.4;
}
.gteaser-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	flex-shrink: 0;
	margin-left: auto; /* кнопки прижаты к правому краю, пока помещаются */
}

/* Узкий экран: раскладываем сверху вниз и растягиваем кнопки на всю ширину —
   иначе они висели одиноко в левом нижнем углу отдельной строкой. */
@media (max-width: 700px) {
	.gteaser { gap: 12px; }
	.gteaser-body { flex-basis: 100%; max-width: none; }
	.gteaser-actions { margin-left: 0; width: 100%; }
	.gteaser .gbtn-ask,
	.gteaser .gbtn-more { flex: 1 1 auto; text-align: center; }
}
.gteaser .gbtn-ask,
.gteaser .gbtn-more {
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: 10px 16px;
	text-decoration: none;
	white-space: nowrap;
}
.gteaser .gbtn-ask {
	color: #fff;
	background: #4B1E00;
}
.gteaser .gbtn-ask:hover { background: #6E645E; }
.gteaser .gbtn-more {
	color: #4B1E00;
	background: #fff;
	border: 1px solid #4B1E00;
}
.gteaser .gbtn-more:hover { background: rgba(75,30,0,.07); }

.gthanks {
	text-align: center;
	font-size: 12.5px;
	color: #8a7157;
	font-style: italic;
	margin: 18px 0 0;
}

/* ---- промо основного бизнеса ---- */
.gpromo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	background: #4B1E00;
	color: #fff;
	border-radius: 4px;
	padding: 20px 24px;
	margin: 18px 0 0;
}
.gpromo-text b {
	font-family: 'PT Serif Caption', serif;
	font-size: 16px;
	display: block;
	margin-bottom: 3px;
}
.gpromo-text span {
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	color: rgba(255,255,255,.78);
}
.gpromo .btn {
	width: auto;
	padding: 10px 18px;
	background: #fff;
	color: #4B1E00;
	border: solid 1px #fff;
}
.gpromo .btn:hover { background: transparent; color: #fff; }

/* ---- заголовок секции событий ---- */
.gevents-head {
	margin: 0 0 16px;
}
.gevents-head h3 {
	font-family: 'PT Serif Caption', serif;
	font-size: 19px;
	color: #2b2016;
	margin: 0;
	font-weight: 700;
	text-align: left;
}

/* ---- сетка событий ---- */
.gevents {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	list-style: none;
	padding: 0;
}
@media screen and (max-width: 900px) { .gevents { grid-template-columns: repeat(3, 1fr); } }
@media screen and (max-width: 620px) { .gevents { grid-template-columns: repeat(2, 1fr); } }

.gevent {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(75,30,0,.14);
	transition: transform .15s ease, box-shadow .15s ease;
}
/* Приватное событие (видно только admin/super) — карточка чуть притушена
   и обведена пунктиром, чтобы не спутать с обычной публичной на глаз. */
.gevent-private { opacity: .6; border: 1px dashed rgba(75,30,0,.4); }
.gevent-visibility {
	position: absolute;
	bottom: 8px;
	left: 8px;
	z-index: 2;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: 9px;
	letter-spacing: .05em;
	padding: 3px 7px;
	border-radius: 4px;
	border: none;
	color: #fff;
	background: rgba(20,12,4,.55);
	cursor: pointer;
}
.gevent-visibility:hover { background: rgba(20,12,4,.8); }
.gevent-visibility[data-public="0"] { background: #b3261e; }
.gevent-visibility--static {
	background: #b3261e;
	cursor: default;
}
.gevent a { display: block; color: inherit; }
.gevent:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(43,32,22,.12); }
.gevent-pic {
	aspect-ratio: 4/3;
	position: relative;
	background-size: cover;
	background-position: center;
}
.gevent-pic::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(20,12,4,.72) 100%);
}
.gevent-top {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	padding: 9px;
	box-sizing: border-box;
}
.gevent-date {
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: .05em;
	color: #fff;
	background: rgba(0,0,0,.35);
	padding: 3px 8px;
	border-radius: 5px;
}
.gevent-multi {
	width: 22px; height: 22px;
	border-radius: 5px;
	background: rgba(0,0,0,.35);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.gevent-multi svg { width: 13px; height: 13px; }
.gevent-title {
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	color: #2b2016;
	padding: 10px 12px;
	line-height: 1.3;
}
.gevent-hidden { display: none; }

.gevents-more-wrap { display: flex; justify-content: center; margin: 18px 0 0; }
.gevents-more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: 'Roboto', sans-serif;
	font-weight: 600;
	font-size: 12.5px;
	color: #4B1E00;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
}
.gevents-more:hover { text-decoration: underline; }
.gevents-more .gplus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px; height: 17px;
	border-radius: 50%;
	border: 1.4px solid #4B1E00;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

/* ---- лента видео-анонсов (вертикальные ролики, отдельно от фото-сетки) ---- */
.gclips-head { margin: 30px 0 16px; }
.gclips-head h3 {
	font-family: 'PT Serif Caption', serif;
	font-size: 19px;
	color: #2b2016;
	margin: 0;
	font-weight: 700;
	text-align: left;
}
.gclips {
	display: flex;
	gap: 10px;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding: 0 0 6px;
	margin: 0 0 -6px;
	/* Полосу прокрутки скрываем целиком — на мобильных свайп и так
	   подсказывает, что можно листать, отдельный индикатор не нужен. */
	scrollbar-width: none;
}
/* Full-bleed (карусель достаёт до краёв экрана) — только на мобильном/
   планшете, где для этого и просили: секция там узкая (95% ширины) и
   лента с 9+ клипами реально не помещается, скролл нужен. На десктопе
   секция и так до 1200px шириной — карусель умещается в неё без
   full-bleed, а сам приём (width:100vw + отрицательный margin) на
   широких экранах ломается: #gallery-intro сам упирается в
   max-width:1200px, оффсет считается уже не от почти-100vw родителя, и
   карусель уезжает в сторону. Проще не применять приём там, где он не
   нужен, чем гнаться за универсальной формулой. */
@media screen and (max-width: 900px) {
	.gclips {
		/* padding-left — только чтобы при загрузке страницы (карусель ещё
		   не прокручена) первая карточка стояла вровень с остальным
		   контентом, а не липла к самому краю. Как только пользователь
		   начинает листать — этот отступ уезжает за левый край вместе с
		   первой карточкой. 2.5vw — та же пропорция, что даёт "лишние" 5%
		   у стандартной section{width:95%} (2.5% с каждой стороны). */
		padding-left: 2.5vw;
		/* Без этого scroll-snap сам проматывал контейнер при первой
		   отрисовке на величину padding-left (снэпался мимо отступа к
		   началу первой карточки). scroll-padding-left объясняет снэпу,
		   что отступ — часть "видимой зоны", а не то, что нужно
		   проскроллить. */
		scroll-padding-left: 2.5vw;
		width: 100vw;
		margin-left: calc(50% - 50vw);
	}
}
.gclip {
	width: 108px;
	flex: 0 0 auto;
	scroll-snap-align: start;
}
.gclips::-webkit-scrollbar { display: none; }
.gclip-pic {
	display: block;
	aspect-ratio: 9/16;
	border-radius: 4px;
	background: #2b2016 linear-gradient(160deg,#4a3a2c,#241a10);
	background-size: cover;
	background-position: center;
	position: relative;
	border: 1px solid rgba(75,30,0,.14);
}
.gclip-play {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
	width: 34px; height: 34px;
	border-radius: 50%;
	background: rgba(255,255,255,.92);
	display: flex; align-items: center; justify-content: center;
}
.gclip-play::before {
	content: "";
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent #4B1E00;
	margin-left: 2px;
}
.gclip-title {
	display: block;
	margin-top: 6px;
	font-family: 'Roboto', sans-serif;
	font-weight: 600;
	font-size: 11.5px;
	color: #2b2016;
	text-decoration: none;
	line-height: 1.3;
}
.gclip-title:hover { color: #4B1E00; text-decoration: underline; }