/*
	main.css
*/

/* local imports */
@import url('fonts.css');
@import url('header.css?v=3');
@import url('footer.css?v=4');
@import url('menus.css');
@import url('modal.css');
@import url('form.css?v=2');
@import url('reserveform.css');
@import url('../js/hotel-datepicker/hotel-datepicker.css');
@import url('https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css');

/*------------------
	THEME
------------------*/

:root{	
	/* colors - new */
	--bright-aqua:#BBD8DC;
	--bright-gold:#C2A152;
	--coastal-navy:#273751; /*#283A5D;*/
	--coral:#D97C6E; /*#E46A5B; old */
	--deep-purple:#373652;
	--deep-teal:#33647E;
	--golf-earth:#463816;
	--golf-green:#567043;
	--light-sand:#F5F2E8;
	--sea-glass:#9ECAC7;
	--weathered-grey:#717179;
	
	/* brand colors */
	--plaza-blue:#3D73A3;
	--sweetgrass-indigo:#8D98BB;
	--vacation-green:#7CAF83;
	--dusty-tope: #726A70;
	--white: white;


	/* color aliases */
	--brand: var(--deep-teal);
	--brand-5: hsl(from var(--brand) h s 97% / alpha);
	--brand-10: hsl(from var(--brand) h s 93% / alpha);
	
	/* gradients */
	--gradient-black: linear-gradient(180deg,rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 1) 100%);
	--gradient-black-50: linear-gradient(180deg,rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5) 100%);
	--gradient-black-25: linear-gradient(180deg,rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.25) 100%);
	--black-cover: rgba(0,0,0,0.2);
	
	/* text colors */
	--text:			var(--weathered-grey);
	--text-dark:	#4D4D57;
	--text-light:	hsl(from var(--text) h s calc(l + 50%)); /* 50% lighter */
	
	/* font sizes */
	--serif: 				"Palatino LT Pro", Georgia, Times, Times New Roman, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol","Noto Color Emoji", system-ui; 
	--sans: 				"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Century Gothic, CenturyGothic, AppleGothic, sans-serif, 
							"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol","Noto Color Emoji", system-ui;
	--sans2:				"Sofia Pro", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Century Gothic, CenturyGothic, AppleGothic,
							sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol","Noto Color Emoji", system-ui;
	--mono:					Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
	--script:				"Brittany Signature";
	--icon:					'remixicon';
	--line-height:  		1.7;
	--font-size:			17px;
	--font-small:			clamp(0.8rem, 3vw, 0.95rem);
	--font-default: 		clamp(1rem, 3vh, 1rem);
	--font-medium:  		clamp(1.1rem, 3vw, 1.5rem);
	--font-large: 			clamp(1.3rem, 3vw, 2rem);
	--font-xlarge:  		clamp(1.6rem, 5vw, 2.5rem);
	--font-headline:		clamp(0.8rem, 2vw, 1rem);
	--font-h1:				300 normal var(--font-xlarge)/1.2 	var(--serif);
	--font-h2:				300 normal var(--font-xlarge)/1.2 	var(--serif);
	--font-h3:				300 normal var(--font-medium)/1.4   var(--serif);
	--font-h4:				500 normal var(--font-default)/1.5 	var(--sans);
	--font-h5:				500 normal var(--font-default)/1.5 	var(--sans);
	--font-h6:				500 normal var(--font-default)/1.5 	var(--sans);
	--font-normal: 			300 normal var(--font-default)/1.5  var(--sans);
	
	/* font families */
	--font-copy: "Poppins", sans-serif;
	--font-heading: "georgia", serif;
	
	/* containers */
	--mw: 1600px;
	--mw-medium: 800px;
	--page-margin: clamp(15px, 4vw, 66px);
	--page-margin-small: calc(var(--page-margin) / 2);
	--page-margin-xsmall: calc(var(--page-margin) / 4);
	--page-margin-medium: calc(var(--page-margin) * 0.75);
	/* padding */
	--padding: 		  clamp(25px, 4vw, 66px);   /* var(--page-margin) */
	--padding-xsmall: clamp(10px, 4vw, 15px);	/*calc(var(--page-margin-small)* 0.75);*/
	--padding-small:  clamp(12px, 4vw, 16px); 	/*var(--page-margin-small);*/
	--padding-medium: clamp(15px, 4vw, 50px); 	/*var(--page-margin-medium);*/
	--padding-large:  clamp(20px, 4vw, 132px); 	/*calc(var(--page-margin) * 2);*/
}

/*------------------
	UTILITY
------------------*/
*, :before, :after{box-sizing:border-box;}
.prevent-select{-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:default;}
.prevent-select a{cursor:pointer;}
.pointer-events-off{pointer-events:none;}
.pointer-events-off a{pointer-events:all;}
.hide-scrollbars::-webkit-scrollbar{display:none;}
.hide-scrollbars{-ms-overflow-style:none;scrollbar-width:none;}
.overflow-horizontal{flex-wrap:nowrap;overflow:hidden;overflow-x:auto;}
.noscroll{height:100%;width:100%;overflow:hidden;}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.unlist{margin:0;padding:0;list-style-type:none;li{margin:0;padding:0;}}
.align_left{text-align:left;}
.align_right{text-align:right;}
.align_center{text-align:center;}

/* grid */
.grid{display:flex;min-width:1px;}
.grid>*{flex:1;min-width:1px;}

/* 
	widths
	- fullwidth - make an element 100vw (break parent)
	- fullleft - make element continue to left of viewport
	- fullright - make element continue to right of viewport
*/
.fullwidth{width:100vw;margin-left: calc((100vw - 100%) / -2);}
.fullleft{border:1px solid red;width:calc(100vw - ((100vw - 100%) /2));margin-left:calc((100vw - 100%) / -2);}
.fullright{border:1px solid gold;width:calc(100vw - ((100vw - 100%) /2));}
.popwidth{width:calc(100% + (var(--page-margin) * 2));margin-left:calc(var(--page-margin) * -1);}


/*------------------
	TYPOGRAPHY & HTML ELEMENTS
------------------*/
hgroup{
	display:flex;flex-direction:column;line-height:1.5;
	&[flip]{flex-direction:column-reverse;}
	/* children */
	&>*{margin:0;}
}

h1,h2,h3,h4,h5,h6{
	color:inherit;text-wrap:balance;overflow-wrap:break-word;hyphens:auto;
	margin:0 0 10px 0;
	&.fancy{font-style:italic;font-weight:300;font-size:var(--font-large);letter-spacing:0.05em;}
	&.fancy:after{content:"";display:block;border-top:1px solid var(--light-sand);opacity:0.5;width:25%;margin-top:0.5em;}
}
/* headline style */
.headline,
h3:has(+h2),h2 + h3,
h3:has(+h1),h1 + h3{ 
	color:var(--bright-gold);
	font-family:var(--sans2);font-size:var(--font-headline); 
	text-transform:uppercase;letter-spacing:0.1em;
	margin-bottom:5px;
}

h1,h2{
	&:has(+ p){margin-bottom:var(--page-margin-small);}
}
h1, .h1-style{font:var(--font-h1);color:inherit;}
h2, .h2-style{font:var(--font-h2);color:var(--brand);}
h3, .h3-style{font:var(--font-h3);color:inherit;}
h4, .h4-style{font:var(--font-h4);color:inherit;}
h5, .h5-style{font:var(--font-h5);color:inherit;}
h6, .h6-style{font:var(--font-h6);color:inherit;}

/* blockquote */
blockquote{
	margin:40px 0;padding:0;
	border-left: 1px solid var(--brand-10);
	padding-left: var(--padding);
	p{font-size:var(--font-medium);font-family:var(--serif);text-wrap:balance;}
	cite, p:nth-child(2){font-size:0.9em;color:var(--text-light);font-style:italic;}
}

hr{border:none;border-top:1px solid var(--brand-10);margin:50px 0;height:1px;}
p{
	margin-top:0;font-weight:normal;
	line-height:2;
	font-size:clamp(0.9rem, 2vw, 1rem);
	@media (max-width:700px){
		&{line-height:1.5;}
	}
}
b,strong{font-weight:500;}
i,em{}
small{font-size:var(--font-small);}

/* a links */
a{
	transition:all 0.3s ease;
	text-decoration-color: rgba(from currentColor r g b / calc(alpha * 0.3));
	text-underline-offset:5px;
	text-decoration-thickness: 1px;
	color:var(--brand);
	&:active{}
	&:visited{}
	&:hover{}
}

/* 
	lists 
	- we are going to hang the bullets,
		so keep that in mind with container padding.
*/
ul,ol{
	margin:var(--page-margin-small) 0 30px 0;
	padding:0 20px;
	li{margin-bottom:10px;line-height:1.4;}
	li::marker{color:var(--brand);}
	[autocontrast="dark"] &{
		li::marker{color:white;}
	}
}

pre{}
code{}

/* media */
img{
	vertical-align:bottom;padding:0;margin:0;max-width:100%;width:100%;height:auto;
	&.parallax{scale:1.1;transform-origin:center top;max-width:unset;} 
}
video{}
.cover{
	overflow:hidden;
	&>*{object-fit:cover;object-position:center;width:100%;height:100%;}
}
.contain{
	overflow:hidden;
	&>*{object-fit:contain;object-position:center;width:auto;height:100%;
		display:block;margin:auto;}
}
.icon-arrow:after{font-family:var(--icon);content:"\f5dc";font-style:normal;
	display:inline-block;vertical-align:middle;opacity:0.5;}

/*------------------
	LAYOUT
------------------*/
html{
overflow-x:hidden;
scroll-behavior:smooth;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing: grayscale;
/* noscroll */
&:has(body.noscroll){}
}
html,body{
margin:0;
padding:0;
min-height:100vh;
scroll-padding-top: 150px;
max-width:100%;
overflow-x: clip;
}

body{
background: white;
color: var(--text);
font-family: var(--sans);
font-weight:300;
font-size: var(--font-size);
line-height:1.5;
scroll-behavior:smooth;
}

/* this is the scroll container */
[outerwrapper]{
	padding:0 var(--page-margin);
	overflow-x:hidden;
	max-width:100%;
	width:100%;
	
	/* children */
	&>*{flex-grow:0;flex-shrink:0;}
	&>[wrapper]{
		max-width:1600px;
		min-height:100vh;
		margin:0 auto;
		display:flex;
		flex-direction:column;
	}
	& [layout]{flex-grow:1;}
	
	@media (max-width:700px){
		&{padding:0;}
	}
}

[layout]{
	display:flex;
	flex-direction:column;
	[autonav]{ /* see menus.css */  }
}

section{
	margin:0;
	padding:var(--page-margin) 0;
	position:relative;
	z-index:2;
}

group{
	margin:0;
	padding:var(--page-margin-small) 0;
	position:relative;
	display:block;
	&>*:first-child{}
	&>*:last-child{}
	&>section{padding:var(--page-margin-small) 0;}
	&:has(>background){padding:var(--page-margin) 0;}
	
	/* if the first element is a group */
	[layout]>&:first-child{padding:0;}
}

background{
	--bg:var(--brand);
	--bg-light:hsl(from var(--bg) h s 97% / alpha);
	--m: var(--page-margin);
	--m-small: var(--page-margin-small);
	--m-double: calc(var(--page-margin) * 2);
	
	display:block;z-index:-1;position:absolute;
	background:var(--bg);
	inset:var(--m-small) var(--m);
	
	/* lightened */
	&[lightened]{background:var(--bg-light);}
	
	/* sizes - default, small, medium, large */
	&[size="default"]{}
	&[size="small"]{
		inset:var(--m-small) var(--m-double);
	}
	&[size="medium"]{
		inset:var(--m-small) 0;
	}
	/* full background */
	&[size="large"]{
		width:100vw;height:100%;
		margin-left: calc((100vw - 100%) / -2);
		inset:unset;top:0;left:0;
	}
	
	/* in a group */
	group>section>&{
		&[size]{top:0;bottom:0;}
	}
	
	/* breakpoints */
	@media (max-width: 1000px){
		&{inset:0 !important;}
	}
}

/*------------------
	ELEMENTS
------------------*/
/*
	close
	- wild dunes style close button
*/
[close]{
	display:inline-flex;align-items:center;
	position:absolute;overflow:hidden;
	color:inherit;text-decoration:none;
	z-index:10;
	&>i{
		display:inline-block;
		width:40px;height:40px;place-content:center;
		&:before,
		&:after{content:"";display:block;height:1px;width:50px;margin-left:-5px;
		border-top:1px solid var(--text);transform:rotate(45deg);transform-origin:center center;}
		&:before{transform:rotate(-45deg);border-color:var(--bright-gold);}
	}
	&>span{padding:10px;display:inline-block;}
}


[social]{
	width:100%;margin:0;padding:0;list-style-type:none;
	display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;
	li{margin:0;padding:0;}
	a{display:inline-block;width:24px;font-size:24px;color:var(--text-dark);text-decoration:none;}
	svg{vertical-align:middle;position:relative;top:-2px;}
}

[slider]{
	/* 1px borders are adding layout, don't remove. */
	ul{display:flex;list-style-type:none;margin:0;padding:0;border-right:1px solid transparent;}
	ul>*{overflow:hidden;margin:0;padding:0;height:unset;}
	/*img{object-fit:cover;width:100%;height:100%;}*/
}

[gallerybar]{
	border:13px solid white;background:white;min-width:1px;max-width:100%;
	ul{display:flex;margin:0;padding:0;list-style-type:none;}
	ul>*{display:block;aspect-ratio:1/0.8;margin:0;padding:0;width:150px;position:relative;}
	.swiper-slide:after{content:"";display:block;position:absolute;inset:0;background:rgba(0,0,0,0.2);opacity:1;transition:all 0.5s ease;}
	.swiper-slide-thumb-active:after{opacity:0;}
	img{object-fit:cover;width:100%;height:100%;}
}

/*
	navbar
	- global use element
	- see also [type=navbar] below
*/
[navbar]{
	--v: 10px;
	--h: 0;
	--font-size:clamp(1rem, 3vw, 1.2rem);
	padding:0;margin:0;list-style-type:none;
	display:flex;flex-wrap:wrap;
	column-gap:clamp(20px, 2vw, 30px);
	row-gap:10px;
	&>*{margin:0;padding:0;}
	li{
		transition:all 0.3s ease;
		a{padding:var(--v) var(--h);display:inline-block;white-space:nowrap;margin:-10px 0;
			color:inherit;font-style:italic;font-family:var(--font-heading);font-size:var(--font-size);line-height:1;}
		&:last-of-type a{/*font-style:italic;color:var(--bright-gold);*/white-space:nowrap;}
		&:last-of-type a:after{font-family:var(--icon);content:"\f5dc";font-style:normal;
			margin-left:5px;display:inline-block;vertical-align:middle;opacity:0.5;}
		&:first-child a{padding-left:0;}
	}
	/* hover */
	li:hover{scale:1.1;}
	
	/* variation */
	&[align="center"]{justify-content:center;}
	
	/* autocontrast */
	[autocontrast="dark"] &,
	&[autocontrast="dark"]{
		li>a{color:white;}
	}
	
	@media (max-width:700px){
		ul{padding:20px;}
	}
}

[media]{
	background:var(--brand-5); /* default bg color */
}

[coverlink],
.coverlink{
	position:absolute;inset:0;z-index:2;
	&>span{opacity:0;}
}

[tags]{
	display:flex;gap:10px;min-width:1px;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
	margin:0;padding:0;list-style-type:none;
	li{margin:0;padding:0;text-transform:uppercase;font-size:0.8rem;letter-spacing:0.1em;}
}

/*
	[staylogo]
	- hannacode in PW
	- [[staylogo for="sweetgrass"]]
	- <div staylogo style="--logo: url(path)">
*/
[staylogo]{
	--color: var(--bg, var(--brand));
	border:1px solid red;
	width:150px;
	height:150px;
	background:var(--color);
	mask-image: var(--logo);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	margin:0 auto var(--page-margin-small) auto;
}

/* swiper */
/* arrows */
.swiper-wrapper{z-index:-1;}
[class*="swiper-button"]{
	border-radius:200rem;
	font-size:20px;
	padding:15px;
	background:var(--brand);
	color:white !important;
	z-index:10;
}

/*------------------
	CONTENT ELEMENTS (repeaterMatrix)
------------------*/
[type="hero"]{
	padding:0;display:flex;flex-direction:column;min-width:1px;
	&>div{display:grid;}
	&>div>*{grid-area: 1/1;place-content:end center;min-width:1px;}
	
	[slider]{margin:0;}
	[media]{
		min-height:400px;
		max-height:800px;
		aspect-ratio:1/0.5;
		position:relative;
	}
	[content]{
		padding:12% 10%;z-index:10;pointer-events:none;
		&>*{color:var(--light-sand);margin:0;display:inline-block;}
		h2{font-style:italic;font-size:clamp(25px, 3vw, 40px);}
		h2:after{content:"";display:block;border-top:1px solid rgba(255,255,255,0.3);width:80%;}
		h3{display:block;margin-top:10px;opacity:0.8;}
	}
	[brand]{
		position: absolute;bottom: var(--page-margin);left:var(--page-margin);z-index:5;width:150px;
		filter: drop-shadow(5px 0 10px rgba(0,0,0,0.5));
	}
	[navbar]{}
	[gallerybar]{
		background:none;width:auto;display:inline-block;
		margin:auto;max-width:100%;border-color:transparent;
	}
	
	/* overlap */
	&[overlap]{
		margin-bottom:calc(var(--page-margin) * -1.5);
		&+section>background{top:0;}
	}
	
	/* sizes */
	&[size="default"]{ 
		/* small, but .fullwidth */
	}
	&[size="small"]{ 
		/* small, but inset - NOT .fullwidth */
		[media]{aspect-ratio:1/0.4;max-height:700px;}
	}
	&[size="medium"]{
		[media]{aspect-ratio:1/0.5;max-height:800px;}
	}
	&[size="large"]{ 
		[media]{aspect-ratio:1/0.6;max-height:1000px;}
	}
	
	/* swiper arrows */
	[class*="swiper-button"]{
		background:transparent;
		padding:7px;
	}
	
	/* gradient overlay */
	&[overlay]{
		[media]:after{content:"";position:absolute;inset:0;z-index:1;
			background-image: linear-gradient(0deg, rgba(0,0,0,0) 78%, rgba(0,0,0,0.6) 100%);} /* top */
		[media]:before{content:"";position:absolute;inset:0;z-index:1;
		background-image: linear-gradient(0deg, rgba(0,0,0,0) 78%, rgba(0,0,0,0.07) 100%), 
		linear-gradient(180deg, rgba(0,0,0,0) 43%, rgba(0,0,0,0.57) 100%);} /* bottom */	
	}
	
	/* before hero - increase bottom padding */
	group>section:has(+ &){padding-bottom:var(--page-margin);}
	/* after hero - increase top padding on next section */
	group>&+section{padding-top:var(--page-margin);}
}

[type="heading"]{
	hgroup{max-width:var(--mw-medium);margin:auto;text-align:center;padding-top:10px;}
	hgroup>*:first-child{margin-bottom:5px;}
	hgroup>*:last-child{margin-bottom:0;color:var(--brand);}
	
	/* tight version */
	&[options*="tight"]{
		padding:0;
		.headline{color:var(--brand);}
	}
	
	/* autocontrast */
	&[autocontrast="dark"],
	[autocontrast="dark"] &{
		color:white;
		hgroup>*{color:inherit;}
		h3{opacity:0.8;}
	}
}

[type="navbar"]{
	/* see [navbar] */
	padding:0;
	padding-top:0 !important;
	ul{padding:var(--page-margin-small) 20px;}
	li>a{color:var(--brand);}
	
	/* style2 - large version */
	&[options="style2"]{
		[navbar]{
			--fs:clamp(1.1rem, 2vw, 1.6rem); /* font-size */
			--v:clamp(25px, 4vw, 33px); /* padding vertical */
			position:relative;padding:0;
			background:var(--brand-5);margin-bottom:var(--page-margin);
			li a{font-size:var(--fs);margin:0;font-style:normal;}
			/*& li:not(:last-child)>a{color:var(--brand);}*/
			&:after{content:'';display:block;background:var(--brand-10);height:2vw;
			position:absolute;top:100%;left:50%;transform:translateX(-50%);width:calc(100% - (var(--page-margin) * 2));}
		}
		
		/* overlaping hero */
		[overlap] + &{margin-top:var(--page-margin-medium);}
	}
	
	/* before a hero */
	&:has(+ [type="hero"]){padding-bottom:var(--page-margin-xsmall);}
	
	@media (max-width:700px){
		&[options="style2"]{
			[navbar]{--v:10px;padding:10px 40px;}
		}
	}
}

[type="richtext"]{
	margin-left:auto;margin-right:auto;text-align:center;
	[content]{
		text-wrap:balance;max-width:60rem;margin:auto;
		padding:0 var(--padding);
		[item]>*:first-child{margin-top:unset;}
		[item].long{
			li, p{text-wrap:stable;}
		}
		a{color:var(--brand);}
		p.align_left + ul,
		p.align_left + ol{text-align:left;}
	}
	
	/* has columns */
	&[columns]{
		margin-left:0;margin-right:0;
		[content]{
			max-width:unset;text-align:left;
			display:grid;gap:var(--page-margin);
			grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
			margin:0 var(--page-margin);
		}
		[media]{
			&.right{order: 9999;} /* image on the right */
		}
	}
	
	h3:not(:has(+h2)){line-height:2;color:var(--brand);}
	iframe{width:60rem !important;max-width:100%;}
	
	/* with an image */
	&:has([media]){
		[content]{
			gap:var(--page-margin);
			align-items: center; 
		}
	}
	
	[autocontrast="dark"]{
		[content]{
			a{color:inherit;}
		}
	}
	
	/* table */
	[tablewrap]{
		max-width:100%;
		overflow:hidden;
		overflow-x:auto;
		padding:0 30px;
	}
	table{
		--border-color: rgba(0,0,0,0.1);
		table-layout:auto;
		border-collapse: collapse;
		border-spacing:0;
		margin:30px 0;
		border-width:0;
		min-width:100%;
		width:100%;
		border:1px solid var(--border-color);
		tr{}
		th,td{line-height:1.4;padding:10px;border:1px dotted var(--border-color);border-right:none;border-bottom:none;}
		th{text-transform:uppercase;font-weight:normal;font-size:0.85rem;text-wrap:nowrap;}
		td{background:rgba(255,255,255,0.8);}
	}
}

[type="panel"]{
	--m: var(--page-margin);
	--m-small: var(--page-margin-small);
	--bg: var(--tint, var(--tint-page, var(--brand))); /* default */
	--bg-light:hsl(from var(--bg) h s 97% / alpha);
	--offset: calc(var(--m) / -2);
	--offset-bottom: calc(var(--m) * -0.7);
	
	display:flex;padding:var(--m-small) var(--m);
	&>*{flex:1;}
	
	[media]{
		position:relative;
		flex-basis:50%;display:flex;flex-direction:column;min-width:1px;
		&>[slider]{flex-grow:1;position:relative;width:100%;}
	}
	[gallerybar]{
		z-index:10;border-width:0;
		&.swiper{margin-left:unset;}
	}
	[content]{
		align-content:center;
		flex-basis:calc(50% - var(--m));
		padding:var(--padding);
		padding-right:calc(var(--padding) * 1.5);
		background:var(--bg);
	}
	[navbar]{
		margin-top:var(--page-margin-small);
	}
	
	/* lightened */
	&[lightened]{
		[content]{background:var(--bg-light);}
	}
	
	/* tinted - Tint content */
	&[lightened][options*="tinted"]{
		[content]>*{color:hsl(from var(--bg) h s 55% / alpha);}
		[content]>p{color:hsl(from var(--bg) h s 40% / alpha);}
	}
	
	/* autocontrast */
	[autocontrast="dark"]{
		color:white;
		>*{color:inherit;}
		h3{opacity:0.8;}
	}
	
	/* options */
	&[options*="reverse"]{flex-direction:row-reverse;}
	/* default is bigger image w/smaller content area */
	&[options*="style1"]{ /* default */ }
	/* popped out version */
	&[options*="style2"]{
		padding:var(--m);
		[media]{
			width:calc(100% + (var(--offset) * -1));
			margin-bottom:var(--offset-bottom);margin-left:var(--offset);
			&>[slider]{margin-top:var(--offset);}
		}
		[gallerybar]{max-width:calc(100% + 13px);border-width:13px;}
	}
	/* offset version */
	&[options*="style3"]{
		[media]{background:var(--bg);}
		[slider]{left:calc(var(--m-small) * -1);margin:var(--m-small) 0;}
	}
	/* style4 */
	&[options*="style4"]{
		/* TBD */
	}
	/* style5 */
	&[options*="style5"]{
		/* TBD */
	}
	
	/* media query */
	@media (max-width: 1000px){
		&,&[options*="reverse"]{flex-direction:column-reverse;} /* media on top */
		&[options*="style2"]{
			padding-left:0;padding-right:0;
			[media]{margin:unset;width:100%;}
			[gallerybar]{margin:0 -13px;max-width:unset;}
		}
	}

}

[type="staycards"]{
	--bg: var(--brand);
	background[size="default"]{top:60% !important;}
	[wrapper]{display:flex;flex-wrap:wrap;gap:1vw;justify-content:center;}
	[card]{
		background:var(--bg);position:relative;
		display:flex;flex-direction:column;overflow:hidden;
		width:20%;min-width:200px;max-width:250px;border:10px solid white;
		text-align:center;color:white;transition:all 0.5s ease;
		&>*{min-width:1px;margin:0;transition:all 0.5s ease;}
		[image]{
			padding:var(--page-margin-small);place-content:center center;
			margin-bottom:0px;
			&>img{width:90%;max-width:130px;}
		}
		[title]{
			flex-grow:1;font-family:var(--serif);font-size:var(--font-medium);
			line-height:1.1;margin-bottom:var(--page-margin-small);transform:translateY(-10px);
			small{font-family:var(--sans);display:block;text-transform:uppercase;letter-spacing:0.1em;opacity:0.8;margin-top:0;}
		}
		&:after{
			content:"";display:block;background:rgba(255,255,255,0.4);
			padding-top:10%;
		}
	}

	/* hover */
	[card]:hover{
		/* darken bg */
		background: hsl(from var(--bg) h s calc(l - 10) / alpha);
		[image]{scale:1.05;}
	}
	
	/* variations */
	[card="sweetgrass"]{--bg:var(--sweetgrass-indigo);}
	[card="boardwalk"]{	--bg:var(--dusty-tope);}
	[card="plaza"]{		--bg:var(--plaza-blue);}
	[card="vacation"]{	--bg:var(--vacation-green);}
	
	/* single card */
	&[options="single"]{
		width:unset;position:absolute;top:50%;transform:translateY(-50%);
		margin-left:calc(var(--page-margin) - 10px);
		/* section beside it */
		&  ~ *{width:80%;margin:auto;padding-left:max(230px, 10%);padding-right:10%;}
		background:has(~ &){display:block !important;}
		[card]{min-width:250px;}
	}
	
	/* special case */
	/* increase padding-bottom on navbar that follows [staycards] */
	& + [type="navbar"]{padding-bottom:var(--page-margin-small);}
	/* Inside a group 
		- if the first "element" is [staycards]
		- select the parent group background
			- if it is size="default" & hide it. 
	*/
	group>background[size="default"]:has(+ &:nth-child(2)){display:none;}
	
	/* breakpoints */
	@media (max-width:1000px){
		&[options="single"]{
			/* section beside it */
			all:unset;
			&  ~ *{width:unset;padding-left:unset;padding-right:unset;}
			[card]{margin:var(--page-margin-small) 0;}
		}
	}
	
	@media (max-width:700px){
		&:not([options="single"]){
			[card]{
				width:40%;min-width:unset;
				[title]>small{font-size:0.7rem;letter-spacing:0.05em;}
			}
		}
	}
}

[type="cards"]{
	--gap: 20px;
	--width: 30%;
	--accent: var(--brand);
	--bg: white; 
	--tint:var(--brand);
	--tint-light: hsl(from var(--tint) h s 97% / alpha);
	--delay: 0s;
	
	[wrapper]{display:flex;gap:0;flex-wrap:wrap;justify-content:center;align-items:stretch;}
	[card]{
		min-width:400px;
		flex-shrink:0;
		border:calc(var(--gap) / 2) solid transparent;
		display:flex;flex-direction:column;transition:all 0.3s ease;
		flex-basis:var(--width);position:relative;
		&::before{
			content:"";background:rgba(0,0,0,0.4);z-index:1;position:absolute;inset:0;
			opacity:0;transition:all 1s ease;
		}
	}
	[media]{
		background:var(--tint);
		aspect-ratio:4/3;overflow:hidden;
		img{transition:scale 1s ease;}
	}
	[content]{
		background:var(--bg);
		flex-grow:1;display:flex;gap:5px;flex-direction:column;transition:all 0.5s ease;
		padding:var(--padding-large);z-index:3;min-height:1px;pointer-events:none;
		& *{margin:0;}
		[title]{font-size:var(--font-medium);}
		[headline]{font-size:var(--font-headline);text-transform:uppercase;letter-spacing:0.1em;}
		[summary]{font-size:var(--font-small);margin-top:15px;}
		[navbar]{pointer-events:all;margin-top:auto;margin-bottom:calc(var(--padding-medium) * -0.5);
			padding:var(--page-margin-small) 0;}
		[more]{transition:all 1s ease-in-out;transition-delay:0s;display:contents;}
	}
	
	/* sideshow */
	.swiper{overflow:visible;}
	.swiper-wrapper{
		justify-content:unset;flex-wrap:unset;
		.swiper-slide{width:var(--width);height:unset;flex-basis:unset;}
	}
	
	/* hover styles */
	[card]:hover{
		&:before{opacity:1;transition-delay:calc(var(--delay) * 1.2);}
		[media]>img{scale:1.15;transition-delay:var(--delay);transition-property:scale;}
		[more]{max-height:100%;opacity:1;transition-delay:1s;}
	}
	
	/* style default */
	&[option="style1"]{
		/* default */
	}
	
	/* cover - style2 & share cover style style3, style6 */
	&[option="style2"],
	&[option="style3"],
	&[option="style6"]{
		--gap: 10px;
		--width: 30%;
		--delay: 0.8s;
		[card]{
			display:grid;aspect-ratio: 1/1.3;width:var(--width);border:var(--gap) solid white;
			margin-right:calc(var(--gap) * -1);margin-bottom:-10px;position:relative;
			&>*{grid-area: 1 / 1;place-content:end;min-width:1px;color:white;}
			[title]{font:var(--font-h1);font-size:var(--font-medium);color:inherit;}
		}
		[card]:after{
			content:"";display:block;height:10px;width:100%;position:absolute;z-index:3;left:0;bottom:0;background:var(--tint);
		}
		[media]{aspect-ratio:unset;}
		[content]{background:var(--gradient-black-50);padding:var(--padding);}
		[more]{max-height:0%;opacity:0;display:block;}
	}
	
	/* large feature - style3 */
	&[option="style3"]{
		--width:33%;
		padding:var(--page-margin) 0;
		[card] [title]{font-size:var(--font-large);font-style:italic;}
		[content]{padding:var(--padding);}
		.swiper-wrapper{--width:36%;}
		.swiper-slide-active{scale:1.1;z-index:100;}
	}
	
	/* horizontal - style4 */
	&[option="style4"]{
		--width:60%;
		[card]{flex-direction:row;}
		[media]{aspect-ratio:1/1;flex-grow:0;flex-basis:60%;}
		[content]{flex-grow:0;flex-basis:40%;place-content:center;}
		[navbar]{margin:unset;}
	}
	
	/* feature - style5 */
	&[option="style5"]{
		--m: var(--page-margin);
		--ms: var(--page-margin-small);
		--mxs: var(--page-margin-xsmall);
		--offset:var(--ms);
		--offset-n:calc(var(--ms) * -1);
		--width:50%;
		
		padding:inherit var(--m);
		[card]{
			--tint-light:hsl(from var(--tint) h s 97% / alpha);
			margin-top:var(--m);
			background:var(--tint-light);
			border:var(--ms) solid transparent;
			background-clip: padding-box;
			&:before{display:none !important;}
		}
		[media]{
			width:calc(100% - var(--ms));margin-top:calc(var(--m) * -1);
			transition:all 0.5s ease;
			[card]:nth-child(odd) &{margin-left:var(--offset-n);}
			[card]:nth-child(even) &{margin-left:calc(var(--offset) + var(--ms));}
		}
		[content]{
			--bg:var(--tint-light);
			padding:var(--padding);
			*{order:1;}
			[title]{font:var(--font-h2);}
			[headline]{order:0;color:var(--tint);}
		}
		
		/* slideshow */
		.swiper-wrapper{
			/* cards after */
			[card] [media]{margin-left:calc(var(--offset) + var(--ms));}
			
			/* cards before .swiper-slide-active */
			& > *:has(~ [card].swiper-slide-active),
			[card].swiper-slide-active{
				[media]{margin-left:var(--offset-n);}
			}
		}
	}
	
	/* small - style6 */
	&[option="style6"]{
		[card]{aspect-ratio: 1/1;}
	}
	
	/* breakpoint */
	@media (max-width:700px){
		& [card]{min-width:90%;}
		&[option="style3"]{
			margin:20px 0;
			[card]{min-width:80%;}
		}
		&[option="style5"]{
			[media]{width:100%;margin:0 !important;}
		}
	}
}

[type="list"]{
	[wrapper]{
		padding:0 var(--page-margin);
		column-width:500px;
		column-fill: balance;
	}
	[item]{
		position:relative;
		display:flex;gap:20px;align-items:start;
		max-width:700px;margin:0 auto;
		break-inside: avoid;
		padding-bottom:20px;
	}
	time{
		line-height:1.1;text-transform:uppercase;
		color:var(--bright-gold);text-align:right;
		flex-shrink:0;align-self:start;margin-right:-10px;width:37px;
		span{display:block;color:var(--brand);font-size:1.5em;font-weight:400;}
	}
	[media]{
		flex-basis:25%;flex-shrink:0;overflow:hidden;
		position:relative;aspect-ratio:4/3;
		&>img{object-fit:cover;width:100%;height:100%;transition:all 0.5s ease;}
		&:after{content:"";display:block;position:absolute;inset:0;
		background:var(--black-cover);opacity:0;z-index:1;transition:all 0.5s ease;}
	}
	[content]{
		display:flex;flex-direction:column;
		&>*{margin:0;}
		[title]{font-family:var(--font-heading);font-size:var(--font-medium);color:var(--brand);}
		[headline]{ /* strong tag */  }
		[summary]{font-size:var(--font-small);line-height:1.5;}
	}
	
	/* hover styles */
	[item]:hover{
		[media]>img{scale:1.3;}
		[media]:after{opacity:1;}
	}
	
	/* breakpoints */
	@media (max-width:700px){
		& [item]{
			align-items:stretch;
			[title]{font-size:1.2rem;line-height:1.2;}
			[summary]{font-size:0.9rem;}
		}
		& time{
			position:absolute;top:0;left:0;z-index:5;font-weight:500;color:white;
			font-size:0.8rem;text-align:left;padding:5px;width:unset;
			background:var(--brand);
			span{color:white;font-size:0.8rem;}
		}
	}
}

[type="textscript"]{
	--c:var(--color, var(--bright-aqua));
	h2{
		margin:auto;line-height:2;
		font-family:var(--script);text-align:center;text-wrap:balance;
		font-size:clamp(30px, 5vw, 60px);
		color:var(--c);
	}
}

[type="embed"]{
	&[empty]{
		[default]{
			display:flex;flex-direction:column;padding:var(--padding);
			background:var(--brand-5);border:1px dashed var(--brand-10);margin:auto;
			&>*{margin:0;}
		}
		[icon]{font-size:var(--font-large);display:block;margin-bottom:20px;}
		[title]{color:inherit;}
		[text]{}
	}
}

[type="featurebar"]{
	--tint:var(--brand);
	.grid{gap:var(--page-margin-small);padding:0 var(--page-margin-small);}
	[content]{
		--tint-light: hsl(from var(--tint) h s 97% / alpha);
		--tint-darker: hsl(from var(--tint) h s 60% / alpha);
		--border-lighter: hsl(from var(--tint) h calc(s - 10) 70% / alpha);
		display:flex;flex-direction:column;
		border:1px solid var(--border-lighter);
		background: var(--tint-darker);/*var(--tint-light);*/
		max-width:50%;margin:0 auto;
		
		[body]{
			flex-grow:1;
			padding:var(--padding) var(--padding);
			&>*{color:white;}
			&>*:first-child{margin-top:0;}
		}
		
		/* button version */
		ul[buttons]{
			margin:-1px;
			&>li>a{background:var(--tint-darker);}
		}
	}
	
	@media (max-width: 1000px){
		& .grid{flex-wrap:wrap;}
		& [media]{aspect-ratio: 4/3;}
		& [content]{flex-basis:100%;max-width:unset;}
	}
}

[type="featurebartext"]{
	--tint: var(--tint, var(--brand));
	--tint-light: hsl(from var(--tint) h s 97% / alpha);
	--tint-darker: hsl(from var(--tint) h s 60% / alpha);
	--border-lighter: hsl(from var(--tint) h calc(s - 10) 70% / alpha);
	padding-top:var(--padding-small) !important;
	[wrapper]{
		display:flex;flex-wrap:wrap;
		gap: var(--page-margin-small);
		padding:var(--padding-small);
		padding-left:var(--padding);
	}
	[content]{
		min-width:250px;flex:0;flex-basis:25%;padding:var(--padding-small);
		border:1px solid var(--border-lighter);
		background:var(--tint-light);
		&>*:last-child{margin-bottom:0;}
		&:nth-child(1){flex:1;padding:0 var(--padding);border-width:0;align-self:center;}
		h3{color:var(--tint-darker);}
	}
	[navbar]{
		width:100%;justify-content:end;padding:0 var(--page-margin);
		color:var(--tint-darker);position:relative;top:var(--page-margin-xsmall);
	}
	
	/* autocontrast */
	&[autocontrast="dark"]{}
	
	/* breakpoints */
	@media (max-width:1200px){
		& background{inset:0;}
		& [wrapper]{justify-content:center;padding:var(--padding);row-gap:var(--page-margin);}
		& [content]{flex-basis:40%;flex-grow:1;}
		& [content]:nth-child(1){flex-basis:100%;}
		& [navbar]{justify-content:center;}
	}
}

[type="gallery"]{
	[gallery]{
		display:grid;
		grid-template-columns: repeat(4, 1fr);
		gap:var(--page-margin-xsmall);
		padding:0 var(--page-margin);
		
		[media]{
			aspect-ratio: 1/1;
			position:relative;
			overflow:hidden;
			img{transition:scale 1.5s ease;}
		}
		
		/* hover */
		& [media]:hover{
			[content]{opacity:1;}
			img{scale:1.2;}
		} 
		
		[content]{
			display:block;background:var(--gradient-black-50);color:white;position:absolute;inset:0;width:100%;padding:15px;font-size:var(--font-small);line-height:1.4;place-content:end left;font-style:italic;opacity:0;transition:all 0.5s ease;pointer-events:none;z-index:2;
		}
	}
	
	/* featured version */
	&[featured]{
		[gallery]>*:first-child{
			aspect-ratio:unset;
			grid-row: 1/4; /* use 3 rows (if exists) */
			grid-column: 1/3;
		}
	}
	
	/* breakpoint */
	@media (max-width: 800px){
		& [gallery]{grid-template-columns: repeat(3, 1fr);}
		&[featured] [gallery]>*:first-child{ grid-row: 1/3; grid-column:1/3; }
	}
}

[type="hourslocation"]{
	[wrapper]{
		display:flex;flex-wrap:wrap;
		column-gap:calc(var(--page-margin) * 2);
		row-gap:var(--page-margin-small);
		padding:var(--padding) var(--padding-large);
		&>*{flex:1;}
		&>hgroup{flex-basis:100%;}
	}
	[col]{
		display:flex;flex-direction:column;gap:0;
		min-width:300px;max-width:500px;
		&>*{margin:0;}
		h3{margin-bottom:5px;}
		p{line-height:1.5;}
		[tags]{margin-bottom:10px;}
		[navbar]{margin-top:30px;}
	}
}

[type="hourslocation"],
[type="hourslist"]{
	/* table */
	table{
		--border:1px dotted rgba(0,0,0,0.2);
		table-layout:fixed;
		border-spacing:0;width:100%;
		border-width:0;
		font-size:0.8rem;text-transform:uppercase;
		line-height:1.4;letter-spacing:0.1em;
		tr{display:flex;gap:10px;border-bottom:var(--border)}
		tr:first-child{border-top:var(--border);}
		td{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
		td[label]{width:100px;flex-grow:0;flex-shrink:0;}
		td[value]{text-align:right;}
		[highlight]{color:var(--bright-gold);}
	}
	
	/* autocontrast */
	&[autocontrast="dark"],
	[autocontrast="dark"] &{
		--highlight-light: hsl(from var(--bright-gold) h s 70% / alpha);
		& *{color:white;}
		[highlight]>*{color:var(--highlight-light);}
	}
	
	/* special background treatment */
	group:has(&)>background:not([size="large"]),
	background:not([size="large"]){inset:var(--page-margin-small) 0;width:100%;}
}

[type="hourslist"]{
	[wrapper]{
		column-width: 300px;
		column-gap:var(--page-margin);
		column-fill: balance;
		padding:var(--padding) var(--padding-large);
		padding-bottom:0;
	}
	[item]{
		break-inside: avoid;
		padding-bottom:var(--page-margin);
		&>*{margin:0;}
		h3{margin-bottom:5px;}
		[tags]{margin-bottom:10px;}
	}
}

[type="gallerylinks"]{
	[wrapper]{
		display:grid;
		grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
		gap: var(--page-margin-small);
	}
	[item]{
		display:block;
		position:relative;transition:all 0.5s ease;
		[media]{
			aspect-ratio:1/1;
			img{object-position:center;transition:scale 0.8s ease;}
		}
		[content]{
			padding:var(--padding-xsmall);
			background:var(--brand-10);
			&>*{margin:0;}
			h3{font-style:italic;font-size:1.2rem;text-align:center;color:var(--brand);white-space:nowrap;}
			h3:after{margin-left:5px;font-size:0.9em;transition:all 0.5s ease;}
		}
	}
	
	/* hover */
	[item]:hover{
		img{scale:1.2;}
		h3:after{transform:translateX(10px);}
	}
}

[type="doublefeature"]{
	--offset:calc(var(--page-margin) * -1);
	[wrapper]{
		display:flex;gap:10px;
		&>*{display:flex;flex-direction:column;flex:1;min-width:1px;}
	}
	[col1]{}
	[col2]{}
	[head]{
		padding:var(--padding);
		&>h2{margin:0;}
	}
	[body]{
		padding:var(--padding-small) var(--padding);
		text-align:center;text-wrap:balance;
	}
	[gallerybar]{
		border-width:10px;margin-right:var(--offset);
		.swiper-slide:after{opacity:0;}
		ul>li:nth-child(1){display:none;} /* hide first thumb */
	}
	[media]{
		aspect-ratio:4/3;
	}
	
	/* reverse */
	&[reverse]{
		[col2]{order:-1;}
		[gallerybar]{margin-right:unset;margin-left:var(--offset);}
	}
	
	/* breakpoint */
	@media (max-width:1000px){
		&>[wrapper]{flex-direction:column;gap:0;}
		& [col2]{
			order:-1;
			[media]{display:none;}
		}
		& [head]{padding:var(--padding-small);}
		& [body]{padding:var(--padding-small);}
		& [gallerybar]{
			margin:0 auto !important;
			ul>li:nth-child(1){display:block;} /* show first thumb */
		}
	}
}

[type="menus"]{
	padding:var(--padding);
	[wrapper]{
		padding:var(--padding-small) var(--padding);
		padding-right:0;
	}
	[slider]{
		margin-left:-10px;
		ul{display:flex;list-style-type:none;}
		li{width:300px;padding:10px;}
		a{
			color:inherit;
			text-decoration:none;
			width:100%;
			background:white;
			border:10px solid white;
			display:flex;flex-direction:column;
			cursor: pointer;
			img{aspect-ratio:3/4;}
			scale:1;
			transition:all 0.5s ease;
			[label]{
				display:flex;gap:10px;
				padding:20px 10px 10px 10px;
				white-space:nowrap;
				text-overflow:elipsis;
				overflow:hidden;
				i{opacity:0.5;}
			}
		}
		
		a:hover{
			scale:1.05;
			color:var(--brand);
			&>[label]>i{color:var(--bright-gold);opacity:1;}
		}
		
		/* arrows */
		[class*="swiper-button-"]{
			&.swiper-button-prev{left:20px;}
		}
	}
}

[type="accordion"]{
	--bg: rgba(255,255,255,0.6);
	--border: 1px dotted rgba(0,0,0,0.1);
	[wrapper]{
		margin:0 var(--page-margin);
		border-bottom:var(--border);
	}
	details{
		display:flex;flex-direction:column;
		&>*{list-style-type:none;margin:0;}
		summary{
			display:flex;gap:10px;align-items:center;
			cursor: pointer;
			padding:clamp(15px, 3vw, 30px);
			font-size:var(--font-medium);
			font-family:var(--serif);
			border-top:var(--border);
			&.summary::marker,
			&::-webkit-details-marker{display:none;}
			&>i{font-size:1.5rem;opacity:0.5;}
		}
		[content]{
			max-height:0px;
			background:var(--bg);
			transition:all 0.5s ease;
			overflow:hidden;overflow-y:auto;
			padding:0 5% 5% 5%;
			&>*:last-child{margin-bottom:0;}
			[navbar]{margin-top:40px;}
		}
		/* hover */
		&:hover{
			summary{background:var(--bg);color:var(--brand);}
		}
	}
	
	/* open */
	details[open]{
		summary{color:var(--brand);background:var(--bg);}
		summary>i{rotate: 90deg;}
		[content]{max-height:1000px;}
	}
	
	/* autocontrast */
	&[autocontrast="dark"]{
		--bg: rgba(255,255,255, 0.05);
		--border: 1px solid rgba(255,255,255,0.2);
		& *{color:white !important;}
	}
}

[type="featurelist"]{
	[iconlist]{
		li{}
		[icon]{}
		[label]{}
		[desc]{}
	}
}

[iconlist]{
	--bg: var(--tint, var(--tint-page));
	--tint-light: hsl(from var(--bg) h s 97% / alpha);
	--tint-dark: hsl(from var(--bg) h s 60% / alpha);
	display:flex;gap:20px;flex-wrap:wrap;
	margin:0;padding:0;list-style-type:none;justify-content:center;
	>*{display:flex;gap:5px;align-items:center;margin:0;padding:10px 25px;background:var(--tint-light);border-radius:5px;position:relative;}
	[icon]{color:var(--tint-dark);}
	[label]{font-size:var(--font-small);color:var(--text-dark);max-width:200px;
		overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
	[desc]{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);
		width:250px;padding:20px;border-radius:5px;background:var(--tint-dark);color:white;
		opacity:0;visibility:hidden;transition:all 0.5s ease allow-discrete;font-size:var(--text-small);
		&:after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);width:0;height:0; 
		  border:10px solid transparent;border-bottom:none;border-top:10px solid var(--tint-dark);}
	}
	/* highlight */
	li.highlight{
		background:hsl(from var(--bright-gold) h s 97% / alpha);
		[icon]{color:var(--bright-gold);}
		[label]{font-style:italic;}
		[desc]{
			background:var(--bright-gold);
			&:after{border-top-color:var(--bright-gold);}
		}
	}
	
	/* hover */
	li:hover{
		&:has(>[desc]){cursor:help;}
		[desc]{opacity:1;visibility:visible;}
	}
}

[type="cardswide"]{
	--bg: var(--tint, var(--tint-page));
	--tint-light: hsl(from var(--bg) h s 97% / alpha);
	--tint-dark: hsl(from var(--bg) h s 45% / alpha);
	
	[card]{
		width:60%;
		min-width:min(750px, 85vw);
		padding:0 10px;
		display:flex;flex-direction:column;
	}
	[media]{
		position:relative;
		aspect-ratio:4/2.5;
		width:100%;
		[head]{
			padding:var(--padding-small);
			background:var(--gradient-black-50);
			position:absolute;inset:0;width:100%;place-content:end;z-index:2;color:white;
			pointer-events:none;
			>*{margin:0;}
			h3{font-size:var(--font-large);}
			h4{font-size:var(--font-small);text-transform:uppercase;letter-spacing:0.2;}
			[arrows]{
				pointer-events:all;
				font-size:30px;position:absolute;bottom:0;right:0;padding:calc(var(--padding-small) - 10px);
				>*{padding:10px;cursor:pointer;opacity:0.5;transition:all 0.3s ease;}
				[arrow-prev]{padding-right:0;}
				[arrow-next]{padding-left:0;}
			}
			[arrows]>*:hover{opacity:1;}
		}
	}
	[content]{
		flex-grow:1;
		display:flex;gap:15px;
		padding:var(--padding-small);
		background:var(--tint-dark);
		p{line-height:1.4;margin:0;}
	}
	
	ul[buttons]{
		li>a{background:none;color:inherit;border:1px solid rgba(255,255,255,0.5);
			padding:10px 25px;}
	}
	
	[iconlist]{
		justify-content:start;gap:5px;margin-bottom:10px;
		li:first-child{margin-left:-10px;}
		li{
			padding:2px 10px;
			background:none;
			[icon]{color:inherit;}
			[label]{color:inherit;}
		}
		li.highlight{background:rgba(255,255,255, 0.1);}
	}
	
	/* autocontrast */
	[autocontrast="dark"]{
		>*{color:white;}
	}
	
	/* swiper */
	&>.swiper{overflow:visible;}
	.swiper-wrapper{
		justify-content:unset;flex-wrap:unset;
		.swiper-slide{height:unset;flex-basis:unset;}
	}
	
	/* arrows */
	[class*="swiper-button-"]{color:white;}
	
	/* breakpoints */
	@media (max-width:1000px){
		& [content]{flex-wrap:wrap;}
		&>[slider] [class*="swiper-button-"]{top:30%;margin-top:0;}
	}
}

[type="linklists"]{
	--bg: var(--tint, var(--tint-page, var(--brand)));
	--tint-light: hsl(from var(--bg) h s 97% / alpha);
	--tint-dark: hsl(from var(--bg) h s 45% / alpha);
	--border: hsl(from var(--bg) h s 45% / 0.3);
	[wrapper]{
		column-width:300px;
		column-fill: balance;
		column-gap:0;
		column-rule:1px dotted var(--border);
		padding:calc(var(--padding-small) - 1.5rem) var(--padding);
	}
	[list]{
		break-inside:avoid;
		padding:0.75rem var(--padding);
		&>*{margin:unset;}
		[title]{}
		ul{list-style-type:none;margin:0;padding:0;}
		li{display:block;margin:0;padding:0;}
		a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
			padding:5px 0;border-bottom:1px dotted var(--border);text-decoration:none;
			color:var(--tint-dark);}
	}
}