/* ==========================================================================
   Вход Б · site.css
   Global base, accessibility and the parts of shared components that Bricks
   global classes do not express: pseudo-elements, layered shadows,
   transitions, scroll behaviour and the raw-HTML newsletter form.

   Layout, spacing, typography and colours live in Bricks (Global Classes,
   Theme Styles). Every value here uses the same tokens:
   - colours:  Bricks Color Palette   → var(--vb-burgundy), var(--vb-line) …
   - scale:    Bricks Variables       → var(--vb-space-s), var(--vb-radius-s) …

   1. Base
   2. Accessibility
   3. Buttons & links
   4. Plaque (signature element)
   5. Cards with a stretched link (+ stories layout)
   6. Event categories
   7. Media placeholders (temporary)
   8. Forms (newsletter placeholder)
   9. Reduced motion
   ========================================================================== */

/* 1. Base
   ------------------------------------------------------------------------ */
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:where(h1, h2, h3, h4, h5, h6, p, dl, dd, figure, blockquote, address) {
	margin: 0;
}

/* Zero specificity, so spacing set on a list's own class always wins. */
:where(ul[class], ol[class]) {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
}

img {
	max-width: 100%;
	height: auto;
}

/* 2. Accessibility
   ------------------------------------------------------------------------ */
:focus-visible {
	outline: 2px solid var(--vb-amber);
	outline-offset: 3px;
}

.vb-footer :focus-visible {
	outline-color: var(--vb-orange);
}

.vb-skip {
	position: absolute;
	top: -6.4rem;
	left: var(--vb-space-s);
	z-index: 100;
	padding: var(--vb-space-xs) var(--vb-space-s);
	border-radius: var(--vb-radius-s);
	background-color: var(--vb-burgundy);
	color: var(--vb-white);
	font-weight: 600;
	text-decoration: none;
}

.vb-skip:focus {
	top: var(--vb-space-s);
}

/* 3. Buttons & links
   ------------------------------------------------------------------------ */
.vb-btn {
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--vb-duration), color var(--vb-duration), border-color var(--vb-duration);
}

.vb-link {
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 6px;
	transition: color var(--vb-duration);
}

/* 4. Plaque (signature element)
   The larger bottom-left radius (Bricks: var(--vb-radius-plaque)) echoes
   the door in the logo.
   ------------------------------------------------------------------------ */
.vb-plaque {
	box-shadow:
		inset 0 0 0 3px var(--vb-burgundy),
		inset 0 0 0 5px rgba(255, 255, 255, 0.85);
}

.vb-plaque--rivets {
	background-image:
		radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 3px, transparent 3.5px),
		radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 3px, transparent 3.5px),
		radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 3px, transparent 3.5px),
		radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 3px, transparent 3.5px);
	background-size: 16px 16px;
	background-repeat: no-repeat;
	background-position:
		10px 10px,
		calc(100% - 10px) 10px,
		10px calc(100% - 10px),
		calc(100% - 10px) calc(100% - 10px);
}

@media (max-width: 478px) {
	.vb-plaque--rivets {
		background-size: 12px 12px;
		background-position:
			7px 7px,
			calc(100% - 7px) 7px,
			7px calc(100% - 7px),
			calc(100% - 7px) calc(100% - 7px);
	}
}

/* 5. Cards with a stretched link
   The heading link covers the whole card on the front end only
   (body.bricks-is-frontend), so in the Bricks builder every element inside
   a card stays selectable. .vb-event-row__cta sits above it (z-index: 1).
   ------------------------------------------------------------------------ */
.vb-event-row {
	transition: background-color var(--vb-duration);
}

.vb-event-row__title a,
.vb-space-card__title a,
.vb-story__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--vb-duration);
}

.bricks-is-frontend .vb-event-row__title a::after,
.bricks-is-frontend .vb-space-card__title a::after,
.bricks-is-frontend .vb-story__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.vb-space-card__title a:hover,
.vb-story__title a:hover {
	color: var(--vb-amber);
}

/* Stories: the featured image and the two compact stories share one row,
   so the side column ends exactly where the featured image ends (≥992px).
   Subgrid is not a Bricks control, hence it lives here. */
@media (min-width: 992px) {
	.vb-story--featured {
		display: grid;
		grid-row: span 2;
		grid-template-rows: subgrid;
	}

	.vb-story--featured .vb-story__media {
		align-self: stretch;
		margin-bottom: 0;
	}

	.vb-story--featured .vb-story__body {
		padding-top: var(--vb-space-l);
	}
}

/* 6. Event categories
   ------------------------------------------------------------------------ */
.vb-event-cats__link {
	white-space: nowrap;
	transition: border-color var(--vb-duration), color var(--vb-duration);
}

.vb-event-cats__count {
	transition: background-color var(--vb-duration), color var(--vb-duration);
}

.vb-event-cats__link:hover .vb-event-cats__count {
	background-color: var(--vb-burgundy);
	color: var(--vb-white);
}

.vb-event-row__time {
	white-space: nowrap;
}

/* Horizontal scroll row on mobile */
@media (max-width: 767px) {
	.vb-event-cats__nav {
		-webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
		mask-image: linear-gradient(to right, #000 85%, transparent);
	}

	.vb-event-cats__list {
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.vb-event-cats__list::-webkit-scrollbar {
		display: none;
	}

	.vb-event-cats__item {
		scroll-snap-align: start;
	}
}

/* 7. Media placeholders (temporary)
   Replaced by Bricks Image elements / featured images when content arrives.
   Placeholder tints are intentionally not in the palette.
   ------------------------------------------------------------------------ */
.vb-media {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background-color: #E3E6EE;
}

.vb-media::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(135deg, rgba(37, 7, 12, 0.07) 0 1px, transparent 1px 14px);
}

.vb-media__label {
	position: relative;
	margin: var(--vb-space-s);
	padding: var(--vb-space-3xs) var(--vb-space-2xs);
	border-radius: var(--vb-radius-xs);
	background-color: rgba(255, 255, 255, 0.75);
	color: rgba(37, 7, 12, 0.65);
	font-size: var(--vb-text-2xs);
	font-weight: 600;
}

.vb-media--tone-1 { background-color: #ECE4E5; }
.vb-media--tone-2 { background-color: #DCE0E9; }
.vb-media--tone-3 { background-color: #F3E3CF; }
.vb-media--tone-4 { background-color: #C9CFDD; }
.vb-media--tone-ink { background-color: #4A5470; }

.vb-media--tone-ink::before {
	background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 14px);
}

.vb-media--tone-ink .vb-media__label {
	background-color: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.7);
}

/* 8. Forms (newsletter placeholder; same classes for the Mailchimp form)
   ------------------------------------------------------------------------ */
.vb-form__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
	gap: var(--vb-space-xs);
	align-items: end;
}

.vb-field {
	display: flex;
	flex-direction: column;
	gap: var(--vb-space-2xs);
}

.vb-field__label {
	color: var(--vb-burgundy);
	font-size: var(--vb-text-xs);
	font-weight: 500;
}

.vb-input {
	height: 5.2rem;
	padding: 0 var(--vb-space-s);
	border: 1px solid rgba(37, 7, 12, 0.35);
	border-radius: var(--vb-radius-s);
	background-color: var(--vb-white);
	color: var(--vb-burgundy);
	font-family: var(--vb-font-body);
	font-size: var(--vb-text-base);
}

.vb-input:focus {
	outline: 2px solid var(--vb-burgundy);
	outline-offset: 0;
	border-color: var(--vb-burgundy);
}

/* Submit mirrors vb-btn + vb-btn--primary. The form is raw HTML (Code
   element), so it cannot rely on Bricks global classes. */
.vb-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 5.2rem;
	padding: 0 var(--vb-space-l);
	border: 1.5px solid var(--vb-night-blue);
	border-radius: var(--vb-radius-s);
	background-color: var(--vb-night-blue);
	color: var(--vb-white);
	font-family: var(--vb-font-body);
	font-size: var(--vb-text-m);
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--vb-duration), border-color var(--vb-duration);
}

.vb-form__submit:hover {
	border-color: var(--vb-night-blue-hover);
	background-color: var(--vb-night-blue-hover);
}

.vb-check {
	display: flex;
	align-items: flex-start;
	gap: var(--vb-space-xs);
	margin-top: var(--vb-space-s);
	color: var(--vb-plum);
	font-size: var(--vb-text-s);
}

.vb-check__input {
	flex-shrink: 0;
	width: 1.8rem;
	height: 1.8rem;
	margin: 0.2rem 0 0;
	accent-color: var(--vb-burgundy);
}

@media (max-width: 767px) {
	.vb-form__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.vb-form__submit {
		width: 100%;
	}
}

/* 9. Reduced motion
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
	}
}

/* Event rows: the row image is hidden ≤767px by its Bricks class; .vb-media
   above sets display and loads later, so the class is doubled here. */
@media (max-width: 767px) {
	.vb-media.vb-event-row__media {
		display: none;
	}
}