.align-left {
}

.align-right {
}

.imgs:has(.align-left) {
	margin-right: 2rem;
	padding-top: 0;
	float: left;
}
.imgs:has(.align-right) {
	margin-left: 3rem;
	padding-top: 0;
	float: right;
}
@media screen and (max-width: 90rem) {
	.imgs:has(.align-left),
	.imgs:has(.align-right) {
		margin-right: 0;
		margin-left: 0;
	}
}

.imgs:has(.align-left) .img + .img {
	margin-left: 1rem;
}
.imgs:has(.align-right) .img + .img {
	margin-right: 1rem;
}


.align-left.half,
.align-right.half {
	max-width: 50%;
	max-width: 25rem; /* temp fix until the float width is sorted out */
}
.align-left.phi,
.align-right.phi {
	max-width: 40%;
	max-width: 18rem; /* temp fix until the float width is sorted out */
}

.align-left img,
.align-right img {
	width: 100%;
}



@media screen and (min-width: 1024px + 1px) {

	.align-left.half-bleed {
		width: 75%;
		margin-left: -25%;
		float: left;
	}
	.align-left.half-bleed .caption {
		text-align: right;
	}

	.align-right.half-bleed {
		width: 75%;
		margin-right: -25%;
		float: right;
	}
	.align-right.half-bleed .caption {
		text-align: left;
	}


	.align-half,
	.align-full,
	.align-full-left,
	.align-full-right,
	.align-half-left,
	.align-half-right {
		margin-left: calc(((100vw - (2* var(--colsize)) + 3rem) / 2) * -1);
		width: 100vw;
		display: grid;
		grid-template-columns:
	  [full-start] minmax(1em, 1fr)
	  [wide-start] minmax(0, 1fr)
	  [content-start] minmax(0, calc( (2* var(--colsize)) + 3rem)) [content-end]
	  minmax(0, 1fr) [wide-end]
	  minmax(1em, 1fr) [full-end];
	}

	.align-half > * {
		grid-column: wide;
	}

	.align-full > * {
		grid-column: full;
	}

	.align-full-left {
		width: calc(100vw - 6rem);
	}

	.align-full-left a {
		grid-column: full-start/content-end;
	}

	.align-full-left .caption {
		grid-column: content-start/content-end;
		text-align: right;
	}

	.align-full-right {
		padding-left: 4.5rem;
		width: calc(100vw - 3rem);
	}

	.align-full-right a {
		grid-column: content-start/full-end;
		grid-row: 1;
	}

	.align-full-right .caption {
		grid-column: content-start/full-end;
		align-self: end;
		text-align: left;
		padding-right: 1em;
	}

	.align-half-left a {
		grid-column: full-start/wide-end;
	}

	.align-half-left .caption {
		grid-column: full-start/wide-end;
		grid-row: 2;
		text-align: right;
	}
	.align-half-right a {
		grid-column: wide-start/full-end;
	}

	.align-half-right .caption {
		grid-column: wide-start/full-end;
		grid-row: 2;
		text-align: left;
	}
}

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

	.align-left.half-bleed {
		width: 100%;
	}

	.align-right.half-bleed {
		width: 100%;
	}

	.align-half,
	.align-full,
	.align-full-left,
	.align-full-right,
	.align-half-left,
	.align-half-right {
		margin-left: -1.5rem;
		width: 100vw;
	}
}

@media screen and (min-width: 1680px + 1px) {
	.align-full-left {
		width: calc(100vw - 6rem);
	}

	.align-full-left a {
		grid-column: full-start/content-end;
		margin-bottom: 1.25em;
	}

	.align-full-left .caption {
		grid-column: content-end/full-end;
		align-self: end;
		text-align: left;
		padding-left: 1em;
		padding-bottom: 1.25em;
	}

	.align-full-right {
		padding-left: 4.5rem;
		width: calc(100vw - 3rem);
	}

	.align-full-right a {
		grid-column: content-start/full-end;
		grid-row: 1;
		margin-bottom: 1.25em;
	}

	.align-full-right .caption {
		grid-column: full-start/content-start;
		grid-row: 1;
		align-self: end;
		text-align: right;
		padding-right: 1em;
		padding-bottom: 1.25em;
	}

}

/* ---------------------------------------------------------------------------- */ /* copyright hover */


.img {
	position: relative;
	display: inline-block;
	align-items: center;
	top: 0;
	object-fit: contain;
}

.frame-type-textpic:not(.partner) .img.align-center {
	display: flex;
	justify-content: center;
	margin-bottom: 2rem;
}
.frame-type-textpic:not(.partner) .img.align-center > div {
	width: 100%;
}




.hero,
.img > a,
.img > div {
	display: block;
	position: relative;
	z-index: 0;
}

.hero .copy,
.img .copy {
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: .66rem;
	width: 100%;
	text-align: right;
	z-index: 1;
	mix-blend-mode: difference;
	color: #fff;
}

.copy .trigger {
	display : inline-block;
	padding: 2px 6px 2px 4px;
	opacity: 1;
}
.copy .data {
	position: absolute;
	width: auto;
	max-width: 85%;
	bottom: 0;
	right: 0;
	padding: 2px 6px 2px 4px;
	opacity: 0;
	background-color : #8888;
}
@media only screen and (max-width: 991px) {
	.copy .data {
		max-width: 96%;
	}
}

.copy:hover {
	mix-blend-mode: unset;
	transition: .2s mix-blend-mode ease-in-out;
}
.copy:hover .trigger,
.copy:hover .trigger {
	opacity: 0;
	transition: .2s opacity ease-in-out;
}

.copy:hover .data,
.copy:hover .data {
	opacity: 1;
	transition: .2s opacity ease-in-out;
}



/* ---------------------------------------------------------------------------- */ /* multicol text */

@media screen and (min-width: 70rem) {
	.splash-text {
		columns: 2;
		column-gap: 2rem;
	}

	.splash-text p {
		padding-top: 0;
	}
}

/* ------------------------------------------------------------------------- */ /* caballero accordion collapsible */

@media screen and (max-width: 70rem) {
	.accordion {
		padding: 0 20px;
	}
}

details {
	position:relative;
	overflow:hidden;
	max-width: 100%;
	--detailContentHeight:auto;
	border-top:1px solid #d8d8d8;
	margin-block-start: 0;
}
details:last-child {
	border-bottom:1px solid #d8d8d8;
}


summary {
	position:relative;
	display:block; /* turns off the open indicator on modern UA's */
	padding:1rem 3em 1em 1em;
	background-color : #fff;
	cursor : pointer;
	z-index : 1;
	transition: .2s background-color ease-in-out;
}
details[open] summary + * {
	padding: .5rem 1rem;
}

summary::-webkit-details-marker {
	display:none;
}

summary:hover {
	background-color : #fafafa;
}

summary:focus {
	outline:none;
}

summary:after {
	position:absolute;
	top:.8rem;
	right:1rem;
	content: '+';
	display:inline-block;
	color: inherit;
	font-size : 1.25rem;
	transition:transform 0.2s;
}

details[open]:not(.closed) > summary {
	background-color : #f8f8f8;
}

details[open]:not(.closed) > summary:after {
	transform-origin: center center;
	transform: rotateZ(45deg);
}

details > div {
	overflow:hidden; /* wrap margins */
	transition:margin-top 0.3s;
	padding: 20px;
}

details.closed > div {
	margin-top:var(--detailContentHeight);
}
details[open]:not(.closed) > div {
	margin-top: 2rem;
	margin-bottom: 4rem;
}


/* ---------------------------------------------------------------------------- */ /* s:spacing b:before / a:after */

.sb-xs { padding-block-start: .5rem; }
.sa-xs { padding-block-end:   .5rem; }

.sb-s  { padding-block-start: 1rem; }
.sa-s  { padding-block-end:   1rem; }

.sb-m  { padding-block-start: 2rem; }
.sa-m  { padding-block-end:   2rem; }

.sb-l  { padding-block-start: 4rem; }
.sa-l  { padding-block-end:   4rem; }

.sb-xl { padding-block-start: 8rem;) }
.sa-xl { padding-block-end:   8rem;) }


/* ------------------------------------------------------------------------- */