/**************************************************************************
Name:         landing.css
Description:  Landing page styling
Date Created: 2025-04-08 by Owen Haggerty
Modified:
**************************************************************************/
/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 5 versions,>0.05%,not dead
* Date: 2025-07-07
*/
/* =====Header===== */
.landingHeader {
	aspect-ratio: 640 / 323;
	background-image: url("/images/landingHeader.webp");
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	width: 100%;
}

.landingHeaderText {
	font-size: clamp(45px, 4.64vw, 65px);
	position: absolute;
	top: 14%;
	left: 18%;
	z-index: 20;
}

.headerIcon {
	height: clamp(40px, 4.29vw, 60px);
	-webkit-transform: translateX(-2%);
	transform: translateX(-2%);
	width: unset;
}

.landingHeaderText h1 {
	color: #f8f7e7;
	display: block;
	font-family: var(--font-hotel);
	font-size: inherit;
	font-weight: 400;
	line-height: 1.15;
	padding-block: 10px 2.3em;
	text-transform: uppercase;
	text-shadow: 0 4px 4px #00000040;
	width: 3em;
}

/* =====Main content===== */
.px-30 {
	padding-inline: 30px;
}

/* Content blocks */
.contentBlock {
	color: var(--color-dark);
	margin: 50px auto;
	max-width: 1000px;
	position: relative;
	width: calc(100% - 20px);
}
.contentBlock.extraPadding {
	max-width: 850px;
	width: calc(100% - 80px);
}
.contentBlock > ol {
	-webkit-padding-start: 60px;
	padding-inline-start: 60px;
}

.contentBlock.colorLine {
	container: landingPageContentBlock / inline-size;
	max-width: none;
	padding-block: 30px;
	padding-inline: calc(50% - 500px);
	position: relative;
	width: min(1000px, 90vw);
}
.contentBlock.colorLine::before {
	bottom: 0;
	border-radius: 0 50cqh 50cqh 0;
	content: "";
	left: 0;
	position: absolute;
	right: 4.5%;
	top: 0;
	z-index: -5;
}
.contentBlock.colorLine.colorLineRight::before {
	border-radius: 50cqh 0 0 50cqh;
	left: 4.5%;
	right: 0;
}
.contentBlock.colorLine.yellowLine::before {
	background-color: #ebad28bf;
}
.contentBlock.colorLine.tealLine::before {
	background-color: #79bfbd;
}

.contentBlock .contentBlockTitle {
	color: var(--color-orange);
	font-family: var(--font-hotel);
	font-size: clamp(45px, 3.79vw, 53px);
	font-weight: 900;
	letter-spacing: 0.1em;
	line-height: 1.2;
	padding: 50px 0 30px 0;
	text-transform: lowercase;
}
.contentBlock .contentBlockTitle.dark {
	color: var(--color-dark);
}

/* Content text */
.contentBlockText {
	color: inherit;
	font-family: var(--font-gotham);
	font-size: clamp(25px, 1.93vw, 27px);
	font-weight: 500;
	line-height: 1.2;
	margin: 0;
	padding: 20px 0;
}
.contentBlockText::marker {
	color: var(--color-orange);
	font-family: var(--font-hotel);
	font-size: clamp(40px, 3.43vw, 48px);
	font-weight: 900;
}
li.contentBlockText:nth-child(3) > * {
	-webkit-transform: translateY(-0.5em);
	transform: translateY(-0.5em);
}

.contentBlockTextSmall {
	color: inherit;
	font-family: var(--font-gotham);
	font-size: clamp(18px, 1.43vw, 20px);
	font-weight: 500;
	line-height: 1.5;
	padding: 15px 0;
}
.contentBlockTextSmall.footnote {
	-webkit-margin-start: -15px;
	margin-inline-start: -15px;
}
.contentBlockText > .contentBlockTextSmall {
	line-height: 1;
}

/* Floating images */
.imageLeftGutter,
.imageRightGutter {
	--trans-x: 0;
	--trans-y: 0;
	position: absolute;
	-webkit-transform: translate(var(--trans-x), var(--trans-y));
	transform: translate(var(--trans-x), var(--trans-y));
}
.imageLeftGutter {
	--trans-x: -100%;
	left: -30px;
}
.imageRightGutter {
	--trans-x: 100%;
	right: -30px;
}
.imageLeftGutter.topAlign,
.imageRightGutter.topAlign {
	--trans-y: -50%;
}
.imageLeftGutter.rounded,
.imageRightGutter.rounded {
	border-radius: 50%;
}
.contentBlock.colorLine > .imageLeftGutter {
	--trans-x: 50%;
	left: unset;
	right: max(1690px, 85%);
}
.contentBlock.colorLine > .imageRightGutter {
	--trans-x: -50%;
	left: max(1690px, 85%);
	right: unset;
}

/* Content tiles */
.contentBlockTileWrapper {
	-webkit-column-gap: 25px;
	-moz-column-gap: 25px;
	column-gap: 25px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	padding-bottom: 30px;
}
.contentBlockTile {
	color: #f7f6e6;
	background-color: #c74f2c;
	border-radius: 20px;
	box-shadow: 0 0 0 0 #00000040;
	display: block;
	font-family: var(--font-gotham);
	font-weight: 500;
	line-height: 1.5;
	padding: 60px 40px 100px 40px;
	position: relative;
	text-decoration: none;
	-webkit-transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out;
	transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out;
}
.contentBlockTile:hover,
.contentBlockTile:focus-visible {
	background-color: var(--color-orange);
	box-shadow: 0 0 8px 8px #00000040;
}
.contentBlockTileHeader,
.contentBlockTileText {
	color: inherit;
	font-family: inherit;
	line-height: inherit;
}
.contentBlockTileHeader {
	display: inline-block;
	font-size: clamp(23px, 2vw, 28px);
	-webkit-padding-after: 20px;
	padding-block-end: 20px;
	text-transform: uppercase;
}
.contentBlockTileText {
	font-size: clamp(18px, 1.43vw, 20px);
}
.contentBlockTileArrow {
	aspect-ratio: 1 / 1;
	background-color: var(--color-dark);
	border-radius: 50%;
	bottom: 20px;
	position: absolute;
	right: 20px;
	width: 80px;
}
.contentBlockTileArrow::before,
.contentBlockTileArrow::after {
	background-color: #f8f7e7;
	border-radius: 4px 0 0 4px;
	content: "";
	display: block;
	height: 8px;
	left: calc(50% - 23px);
	position: absolute;
	top: calc(50% - 4px);
	-webkit-transition: -webkit-transform 0.3s ease-out;
	transition: -webkit-transform 0.3s ease-out;
	transition: transform 0.3s ease-out;
	transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
	width: 36px;
}
.contentBlockTileArrow::before {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transform-origin: bottom right;
	transform-origin: bottom right;
}
.contentBlockTileArrow::after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transform-origin: top right;
	transform-origin: top right;
	top: calc(50% - 6px);
}
.contentBlockTile:hover .contentBlockTileArrow::before,
.contentBlockTile:focus-visible .contentBlockTileArrow::before {
	border-radius: 4px;
	-webkit-transform: rotate(25deg) translate(8px, -4px) scaleX(1.3);
	transform: rotate(25deg) translate(8px, -4px) scaleX(1.3);
}
.contentBlockTile:hover .contentBlockTileArrow::after,
.contentBlockTile:focus-visible .contentBlockTileArrow::after {
	border-radius: 4px;
	-webkit-transform: rotate(-25deg) translate(8px, 4px) scaleX(1.3);
	transform: rotate(-25deg) translate(8px, 4px) scaleX(1.3);
}

/* Content row */
.contentBlockRow {
	display: grid;
	grid-template-columns: 11fr 16fr;
	-webkit-column-gap: 115px;
	-moz-column-gap: 115px;
	column-gap: 115px;
}
.ctaButtonColumn {
	-webkit-box-align: stretch;
	align-items: stretch;
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	-webkit-box-pack: justify;
	justify-content: space-between;
	padding-block: 40px;
}
.ctaButtonColumn > .ctaButton {
	width: calc(100% - 120px);
}

@container landingPageContentBlock (max-width: 1910px) {
	.imageLeftGutter,
	.imageRightGutter {
		--trans-scale: 0.9;
		-webkit-transform-origin: center center;
		transform-origin: center center;
		-webkit-transform: translate(var(--trans-x), var(--trans-y)) scale(var(--trans-scale));
		transform: translate(var(--trans-x), var(--trans-y)) scale(var(--trans-scale));
	}
}