/* ========================================================
	VERSICOLOR WEBSITE 2026
	RESPONSIVE CSS
======================================================== */



/* ============================
	XXXL
============================ */

@media (min-width: 2000px) {
	.home--hero {
		min-height: 920px;
	}

	.site--container {
		max-width: 1960px;
	}

	.page--eventscontainer {
		max-width: 1500px;
	}
}



/* ============================
	XXL
============================ */

@media (max-width: 1599.98px) {
	.site--container {
		padding-left: 1.35rem;
		padding-right: 1.35rem;
	}

	.site--navactions {
		gap: .65rem;
		margin-left: 1.15rem;
	}

	.site--navbutton {
		font-size: .98rem;
		min-height: 48px;
		padding: .85rem 1.05rem .9rem 1.05rem;
	}

	.site--navlist {
		gap: 1.15rem;
	}
}



/* ============================
	XL
============================ */

@media (max-width: 1499.98px) {
	.site--navactions {
		gap: .55rem;
		margin-left: 1rem;
	}

	.site--navbutton {
		font-size: .95rem;
		min-height: 48px;
		padding: .85rem 1rem .9rem 1rem;
	}

	.site--navlink {
		font-size: 1rem;
	}

	.site--navlist {
		gap: 1rem;
	}
}

@media (max-width: 1399.98px) {
	.site--navactions {
		display: none;
	}

	.site--navlink {
		font-size: 1rem;
	}

	.site--navlist {
		gap: 1.05rem;
	}
}



/* ============================
	LG
============================ */

@media (max-width: 1199.98px) {
	.site--brandlogo {
		height: 62px;
	}

	.site--footercolumn--nav {
		max-width: none;
		padding-right: 0;
	}

	.site--topbar {
		display: none;
	}

	.site--nav {
		top: 0;
	}

	.site--nav {
		padding: .95rem 0;
	}

	.site--nav.scrolled {
		padding: .75rem 0;
	}

	.site--nav.scrolled .site--brandlogo {
		height: 58px;
	}

	.topbar--actions {
		justify-content: flex-start;
	}

	.topbar--notice {
		justify-content: flex-start;
		text-align: left;
	}
}



/* ============================
	MD
============================ */

@media (max-width: 991.98px) {
	.home--hero {
		min-height: 700px;
	}

	.home--heroinner {
		padding: 7.5rem 0 6rem 0;
	}

	.page--gallerygrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.page--practicalbuttons {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.site--container {
		padding-left: 1.15rem;
		padding-right: 1.15rem;
	}

	.site--footerbottomlinks {
		justify-content: center;
	}

	.site--newsletterbox {
		padding: 2rem;
	}

	.site--newsletterfooter {
		align-items: stretch;
		flex-direction: column;
	}
}



/* ============================
	SM
============================ */

@media (max-width: 767.98px) {
	.home--hero {
		min-height: 660px;
	}

	.home--herobuttons {
		align-items: stretch;
		flex-direction: column;
	}

	.home--heroinner {
		padding: 6.5rem 0 5.5rem 0;
	}

	.home--herotitle {
		letter-spacing: -.045em;
	}

	.page--about,
	.page--gallerypreview,
	.page--groups,
	.page--practical,
	.page--seasons,
	.page--visits {
		padding: 5rem 0;
	}

	.page--aboutbuttons,
	.page--groupsbuttons,
	.page--practicalbuttons,
	.topbar--actions {
		align-items: stretch;
		flex-direction: column;
	}

	.page--aboutgrid,
	.page--gallerygrid,
	.page--groupslist,
	.page--practicallist {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.page--factcard,
	.page--groupsimagebox,
	.page--practicalbox,
	.page--visitcard {
		border-radius: 1.5rem;
	}

	.page--facts {
		padding: 0 0 5rem 0;
	}

	.page--galleryitem--large {
		grid-column: auto;
		grid-row: auto;
	}

	.page--intro {
		padding: 5rem 0 3rem 0;
	}

	.page--intro .vc--sectiontext,
	.vc--sectiontext {
		font-size: 1.05rem;
	}

	.page--visitcard--cover {
		aspect-ratio: auto;
		min-height: 560px;
	}

	.page--visitcovercontent {
		padding: 1.5rem;
	}

	.site--footer {
		padding-top: 3.25rem;
	}

	.site--footerbottom {
		margin-top: 2.5rem;
	}

	.site--footercolumn h3 {
		margin-bottom: 1rem;
	}

	.site--footerlist--horizontal,
	.site--footertextactions {
		align-items: flex-start;
		flex-direction: column;
		gap: .45rem;
	}

	.site--footerlogo {
		height: 56px;
	}

	.site--footerlogobox--inline {
		justify-content: flex-start;
		margin-top: 1.35rem;
	}

	.site--newsletter {
		padding: 4rem 0;
	}

	.site--newsletterbox {
		border-radius: 1.5rem;
		padding: 1.5rem;
	}

	.topbar--button,
	.vc--button {
		width: 100%;
	}

	.topbar--circlelink::after,
	.topbar--circlelink::before {
		display: none;
	}

	.vc--sectiontitle {
		font-size: clamp(2.1rem, 8vw, 2.8rem);
	}
}



/* ============================
	XS
============================ */

@media (max-width: 575.98px) {
	.home--herotitle {
		font-size: clamp(2.65rem, 12vw, 3.35rem);
	}

	.page--visitcard--cover {
		min-height: 600px;
	}

	.site--brandlogo {
		height: 58px;
	}

	.site--offcanvas {
		width: 100% !important;
	}

	.site--offcanvasbody {
		padding: 1.75rem 1.15rem 1.5rem 1.15rem;
	}

	.site--offcanvascontact {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.site--offcanvasheader {
		padding: 1.15rem 1.15rem 1rem 1.15rem;
	}

	.site--offcanvaslink {
		font-size: 1.35rem;
	}

	.site--nav.scrolled .site--brandlogo {
		height: 54px;
	}
}



/* ============================
	GALLERY PAGE RESPONSIVE
============================ */

@media screen and (max-width: 1199.98px) {

	.gallerypage {
		padding: 6rem 0;
	}

	.gallerypage--filters {
		margin: 2.25rem 0 3rem;
	}

	.gallerypage--item--large {
		aspect-ratio: 4 / 3;
		min-height: 0;
	}

	.gallerypage--block+.gallerypage--block {
		margin-top: 1rem;
	}

}


@media screen and (max-width: 991.98px) {

	.gallerypage--filter {
		font-size: 1rem;
		min-height: 50px;
		padding: .8rem 1.15rem .85rem;
	}

	.gallerypage--paneltitle {
		margin-bottom: 1.75rem;
	}

	.gallerypage--videocard {
		border-radius: 1.5rem;
	}

	.gallerypage--videobox {
		border-radius: 1rem;
	}

}


@media screen and (max-width: 767.98px) {

	.gallerypage {
		padding: 5rem 0;
	}

	.gallerypage--filters {
		flex-wrap: nowrap;
		justify-content: flex-start;
		margin: 2rem 0 2.5rem;
		overflow-x: auto;
		padding-bottom: .75rem;
		scrollbar-width: thin;
		width: 100%;
	}

	.gallerypage--filter {
		flex: 0 0 auto;
		font-size: .975rem;
		min-height: 48px;
		padding: .75rem 1rem .8rem;
	}

	.gallerypage--item {
		border-radius: 1.1rem;
	}

	.gallerypage--caption {
		bottom: 1rem;
		left: 1rem;
		max-width: calc(100% - 4.5rem);
	}

	.gallerypage--caption strong {
		font-size: 1.15rem;
	}

	.gallerypage--item--large .gallerypage--caption strong,
	.gallerypage--item--month .gallerypage--caption strong {
		font-size: 1.4rem;
	}

	.gallerypage--zoom {
		height: 38px;
		opacity: 1;
		right: .85rem;
		top: .85rem;
		transform: none;
		width: 38px;
	}

	.gallerypage--videocard {
		padding: .75rem;
	}

	.gallerypage--videocontent {
		padding: 1.75rem 1rem 1rem;
	}

	.gallerypage--videocontent p {
		font-size: 1.025rem;
	}

}


@media screen and (max-width: 575.98px) {

	.gallerypage {
		padding: 4.5rem 0;
	}

	.gallerypage--filters {
		margin-top: 1.75rem;
	}

	.gallerypage--smallgrid>[class*="col-"] {
		width: 100%;
	}

	.gallerypage--item,
	.gallerypage--item--large,
	.gallerypage--item--month {
		aspect-ratio: 4 / 3;
		border-radius: 1rem;
	}

	.gallerypage--block+.gallerypage--block {
		margin-top: .75rem;
	}

	.gallerypage--caption small {
		font-size: .7rem;
	}

	.gallerypage--caption strong,
	.gallerypage--item--large .gallerypage--caption strong,
	.gallerypage--item--month .gallerypage--caption strong {
		font-size: 1.2rem;
	}

	.gallerypage--videocard {
		border-radius: 1.15rem;
		padding: .6rem;
	}

	.gallerypage--videobox {
		border-radius: .8rem;
	}

	.gallerypage--videocontent {
		padding: 1.5rem .75rem .85rem;
	}

	.gallerypage--videocontent h3 {
		margin-top: .75rem;
	}

}



/* ============================
	SOCIAL CTA
============================ */

@media (max-width: 1199.98px) {
	.socialcta {
		padding: 5.75rem 0;
	}

	.socialcta--box {
		padding: 2.25rem;
	}
}

@media (max-width: 767.98px) {
	.socialcta {
		padding: 4.75rem 0;
	}

	.socialcta--box {
		border-radius: 1.5rem;
		padding: 1.5rem;
	}

	.socialcta--button {
		font-size: 1rem;
		min-height: 56px;
		padding: .9rem 1rem .95rem 1.1rem;
	}

	.socialcta--intro p {
		font-size: 1.05rem;
	}
}

@media (max-width: 575.98px) {
	.socialcta--box {
		border-radius: 1rem;
		padding: 1.25rem;
	}

	.socialcta--button {
		border-radius: .85rem;
	}
}



/* ============================
	CONFIRMATION PAGE
============================ */

@media (max-width: 1199.98px) {
	.confirmationpage {
		padding: 6.5rem 0;
	}

	.confirmationpage--card {
		padding: 3.5rem;
	}
}

@media (max-width: 767.98px) {
	.confirmationpage {
		padding: 5rem 0;
	}

	.confirmationpage--card {
		border-radius: 1.5rem;
		padding: 2.5rem 1.5rem;
	}

	.confirmationpage--icon {
		font-size: 1.65rem;
		height: 66px;
		width: 66px;
	}

	.confirmationpage--lead {
		font-size: 1.05rem;
	}

	.confirmationpage--actions {
		align-items: stretch;
		flex-direction: column;
	}

	.confirmationpage--actions .vc--button {
		width: 100%;
	}
}