@charset "UTF-8";

/**
 * medias.css 1.5.0
 * Author: hybrid.
 *
 * Base styles for media — images, figures, SVG, thumbnails,
 * placeholders, backgrounds, float and galleries.
 * Figcaption styles live here, not in reset.css.
 * Project overrides live in the THEME section below.
 * figure — layout container, always width: 100%.
 *          size constraints apply to children (> *, img), not the figure itself.
 *          use parent or wrapper to control figure width.
 *
 * Sections
 * CONFIG     — core tokens, theme tokens, responsive sizes
 * ANIMATIONS — picture, img, link-label transitions
 * CORE       — img, picture, svg, figure, links, placeholder, gallery, background, float
 * THEME      — section-image, thumbnail
 *
 * Tokens defined here
 * --img-fit / --img-height / --img-width / --img-ratio / --img-margin
 * --img-placeholder-blur
 * --picture-bg-color
 * --figure-gap
 * --figcaption-font-size / --figcaption-gap
 * --figure-link-font-size / --figure-link-icon-size
 * --figure-link-bg-color / --figure-link-filter
 * --thumbnail-border-radius / --thumbnail-background-color
 * --section-image-ratio / --icon-image-ratio
 *
 * Dependencies
 * --light-color        defined in colors.css
 * --bright-rgb         defined in colors.css
 * --font-size          defined in fonts.css
 * --line-height        defined in fonts.css
 * --content-spacing    defined in structure.css
 * --section-gap        defined in structure.css
 * --content-max-width  defined in structure.css
 * --duration-fast      defined in animations.css
 * --duration-normal    defined in animations.css
 * --ease               defined in animations.css
 */



/* ================================================================================================== */
/* ============================================= CONFIG ============================================= */
/* ================================================================================================== */


/* =============== CORE =============== */

:root {
	/* img */
	--img-fit: contain;
	--img-height: auto;
	--img-width: 100%;
	--img-ratio: auto;
	--img-margin: 0 auto;
	--img-placeholder-blur: 2rem;

	/* picture */
	--picture-bg-color: var(--light-color);

	/* figure */
	--figure-gap: var(--content-spacing);

	/* figcaption */
	--figcaption-font-size: var(--font-size);
	--figcaption-gap: .5em;

	/* figure link */
	--figure-link-font-size: var(--font-size);
	--figure-link-icon-size: calc(var(--font-size) * 2);
	--figure-link-bg-color: rgba(var(--bright-rgb), .75);
	--figure-link-filter: grayscale(1);

	/* thumbnail */
	--thumbnail-border-radius: 0;
	--thumbnail-background-color: var(--light-color);

	/* ratios */
	--thumb-ratio: 32/23;
	--media-ratio: 16/9;
	--avatar-ratio: 1/1;
	--ad-ratio: 1/1;

	/* iframe */
	--iframe-height: 2em;
	--iframe-ratio: 16/9;
	--iframe-bg-color: var(--light-color);
}


/* =============== THEME =============== */

:root {
	--section-image-ratio: 16/5;
	--icon-image-ratio: 5/1;
}

@media (max-width: 1000px) {
	figure.short-size {
		--img-height: 5rem;
		--img-width: 5rem;
	}
}
@media (min-width: 1000px) {
	figure.short-size {
		--img-height: 8rem;
		--img-width: 8rem;
	}
}



/* ====================================================================================================== */
/* ============================================= ANIMATIONS ============================================= */
/* ====================================================================================================== */

picture {
	transition:
		opacity var(--duration-fast) var(--ease),
		background var(--duration-fast) var(--ease);
}
img {
	transition:
		transform var(--duration-normal) var(--ease),
		opacity var(--duration-fast) var(--ease);
}
.link-label * {
	transition:
		transform var(--duration-normal) var(--ease),
		opacity var(--duration-fast) var(--ease);
}



/* ================================================================================================== */
/* ============================================= HACKS ============================================== */
/* ================================================================================================== */

/*
 * Context-level overrides via CSS variables.
 * Use when adding a class to figure is not practical.
 * !important is intentional — overrides inline style generated by get_thumbnail().
 */

figure picture {
	aspect-ratio: var(--picture-ratio) !important;
	height: var(--picture-height, auto);
}
/*
usage
.swiper-thumbs figure {
	--picture-ratio: unset;
	--picture-height: 100%;
	--img-fit: cover;
	--img-height: 100%;
}
*/



/* ================================================================================================ */
/* ============================================= CORE ============================================= */
/* ================================================================================================ */


/* ============================== IMG ============================== */

img {
	position: relative;
	height: var(--img-height);
	width: var(--img-width);
	margin: var(--img-margin);
	aspect-ratio: var(--img-ratio);
	object-fit: var(--img-fit);
}
img[loading='lazy'] { opacity: 0; }
img::before { font-size: 0; } /* hide alt broken img */


/* ============================== PICTURE ============================== */

picture {
	position: relative;
	width: 100%;
	background: var(--picture-bg-color);
}


/* ============================== SVG ============================== */

svg {
	height: 100%;
	width: 100%;
	/* GPU compositing — legacy rendering fix */
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
}


/* ============================== FIGURE ============================== */

figure {
	position: relative;
	display: flex;
	flex-direction: column;
	height: auto;
	width: inherit;
	max-width: 100%;
	align-items: flex-start;
}


/* =============== CONTENT =============== */

figure:not([class*="-size"]) picture:not([style*="aspect-ratio"]) {
	display: contents;
}
figure img {
	z-index: 10; /* above .img-placeholder (z-index: 1) */
}
figure.empty img {
	opacity: 0;
}
figure svg {
	width: auto;
}

/* =============== 	CONTAIN =============== */

figure.contain picture {
	background: transparent !important;
}


/* =============== CROPPED =============== */

figure.cropped {
	--img-fit: cover;
	--img-height: 100%;
}
figure.cropped picture {
	display: flex;
}
figure.cropped.contain {
	--img-fit: contain;
	--img-height: auto;
	--img-margin: auto;
}


/* =============== COVER =============== */

figure.cover {
	--img-fit: cover;
	--img-height: 100%;
	max-width: none;
	width: 100%;
	align-items: normal;
}


/* =============== SIZES =============== */

/*figure[class*="-size"] {
	width: var(--img-width);
}*/
figure[class*="-size"] > *,
figure[class*="-size"] img {
	max-height: var(--img-height);
	max-width: var(--img-width);
}


/* =============== ALIGNMENT =============== */

main > figure.is-left {
	align-self: flex-start;
	margin-left: max(var(--section-gap), calc((100% - var(--content-max-width)) / 2)) !important;
}
main > figure.is-center {
	align-self: center;
}
main > figure.is-right {
	align-self: flex-end;
	margin-right: max(var(--section-gap), calc((100% - var(--content-max-width)) / 2)) !important;
}



/* =============== FIGCAPTION =============== */

figure figcaption {
	z-index: 20; /* wp editor fix */
	font-size: var(--figcaption-font-size);
	margin-top: var(--figcaption-gap) !important;
}


/* ============================== LINKS ============================== */

figure a {
	position: relative;
	display: block;
	width: fit-content;
	margin: auto;
}


/* =============== LABEL =============== */

figure a .link-label {
	position: absolute;
	inset: 0;
	z-index: 15;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 0;
	line-height: 0;
	color: currentColor;
	opacity: 0;
}
figure a .link-label > * {
	line-height: var(--line-height);
	color: currentColor;
	transform: translateY(1em);
	pointer-events: none;
}
figure a .link-label .label {
	position: relative;
	font-size: var(--figure-link-font-size);
	margin-top: .25em;
}
figure a .link-label [class^="icon-"] {
	font-size: var(--figure-link-icon-size);
}


/* =============== OVERLAY =============== */

figure a::before {
	content: '';
	position: absolute;
	z-index: 15;
	inset: 0;
	background: var(--figure-link-bg-color);
	backdrop-filter: var(--figure-link-filter);
	opacity: 0;
}


/* =============== HOVER =============== */

@media (hover: hover) {
	figure a:hover::before,
	figure a:hover .link-label {
		opacity: 1;
	}
	figure a:hover .link-label > * {
		transform: translateY(0);
	}
}
@media (hover: none) {
	figure a.hover::before,
	figure a.hover .link-label {
		opacity: 1;
	}
	figure a.hover .link-label > * {
		transform: translateY(0);
	}
}


/* ============================== PLACEHOLDER ============================== */

/**
 * Permanent blur layer beneath the main image.
 * Visible during load, stays visible if image fails.
 */

figure .img-placeholder {
	position: absolute;
	z-index: 1;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(var(--img-placeholder-blur));
	clip-path: inset(0);
}
figure[data-loaded] .img-placeholder {
	opacity: 0;
}
figure[data-loaded=true]:not(.empty) picture {
	background: transparent !important;
}


/* ============================== GALLERY ============================== */

.gallery {
	--img-fit: cover;
	--img-height: 100%;
	--img-ratio: inherit;
}
.gallery figure {
	width: 100%;
	max-width: none;
}
.gallery picture {
	height: 100%;
}


/* ============================== BACKGROUND ============================== */

.background-container {
	position: absolute;
	z-index: -1;
	top: 0;
	left: -100%;
	right: -100%;
	height: 100%;
	width: auto;
	overflow: hidden;
	padding: 0 !important;
	margin: 0 !important;
}
.background {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	max-width: none;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	pointer-events: none;
}
.background.contain {
	background-size: contain !important;
	background-position: left !important;
}

.bg-top-left      { background-position: top left !important; }
.bg-top-center    { background-position: top center !important; }
.bg-top-right     { background-position: top right !important; }
.bg-center-left   { background-position: center left !important; }
.bg-center-right  { background-position: center right !important; }
.bg-bottom-left   { background-position: bottom left !important; }
.bg-bottom-center { background-position: bottom center !important; }
.bg-bottom-right  { background-position: bottom right !important; }


/* ============================== FLOAT ============================== */

figure.float-left,
figure.float-right {
	width: auto;
}
figure.float-left + *,
figure.float-right + * {
	margin-top: 0;
}
figure.float-left {
	float: left;
	margin: 0 var(--figure-gap) var(--figure-gap) 0;
}
figure.float-right {
	float: right;
	margin: 0 0 var(--figure-gap) var(--figure-gap);
}
.clear-float {
	clear: both;
}


/* ============================== IFRAME ============================== */

.iframe-container {
	
}
.iframe-container {
	position: relative;
	width: 100%;
	min-height: var(--iframe-height);
	aspect-ratio: var(--iframe-ratio, 16/9);
	background: var(--iframe-bg-color);
}
.iframe-container iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}



/* ================================================================================================= */
/* ============================================= THEME ============================================= */
/* ================================================================================================= */

/* here for project-specific media overrides */

/* ============================== MEDIAPLAYER ============================== */

.mediaplayer-container a::before {
	display: none;
}


/* ============================== THUMBNAIL ============================== */

.thumbnail.background {
	position: absolute;
}
/*
.thumbnail {
	--img-fit: cover;
	--img-height: 100%;
	--img-margin: 0;
	--img-ratio: var(--thumb-ratio);
	position: relative;
	display: block;
	width: 100%;
}

.thumbnail > * {
	max-height: inherit;
}
.thumbnail picture {
	border-radius: var(--thumbnail-border-radius);
}
.thumbnail img {
	border-radius: var(--thumbnail-border-radius);
	background: var(--thumbnail-background-color);
}
*/

/*
ratio 1/1 : 100% / 100% (focus, event) == default
ratio 2/3 : 100% / 150% (portrait)
ratio 16/9 : 160 / 90 (block front)
*/

.thumbnail {
	position:relative;
	width:100%;
	background:var(--light-color);
	aspect-ratio:1/1;
}
.thumbnail a:not(.post-icon),
.thumbnail video,
.thumbnail img {
	display:block;
	height:100%;
	width:100%;
	-o-object-fit: cover;
	   object-fit: cover;
	aspect-ratio: inherit;
}

/* for :focus-visible */

.thumbnail a {
	/*color: var(--primary-color);*/
	color: var(--theme-color);
}
/*
body.alt .thumbnail a {
	color:var(--secondary-color);
}
*/

/********** POSITIONS **********/

.thumbnail.top-left img {
	-o-object-position: top left;
	   object-position: top left;
}
.thumbnail.top-center img {
	-o-object-position: top center;
	   object-position: top center;
}
.thumbnail.top-right img {
	-o-object-position: top right;
	   object-position: top right;
}
.thumbnail.center-left img {
	-o-object-position: center left;
	   object-position: center left;
}
.thumbnail.center-center img {
	-o-object-position: center center;
	   object-position: center center;
}
.thumbnail.center-right img {
	-o-object-position: center right;
	   object-position: center right;
}
.thumbnail.bottom-left img {
	-o-object-position: bottom left;
	   object-position: bottom left;
}
.thumbnail.bottom-center img {
	-o-object-position: bottom center;
	   object-position: bottom center;
}
.thumbnail.bottom-right img {
	-o-object-position: bottom right;
	   object-position: bottom right;
}

/********** EMPTY **********/

.thumbnail.empty:after {
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	transform: translate3d(-50%,-50%,0);
	font-size: 1em;
	line-height: 1;
	/* temp no font icon */
	height:2em;
	width:2em;
	background:url(../images/layout/oonr-icon.svg) no-repeat;
	opacity:.5;
}

/********** WITH ANCHOR **********/

.thumbnail a:before {
	content: '';
	position: absolute;
	z-index: 15;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: var(--theme-color);
	mix-blend-mode: screen;
	opacity: 0;
	pointer-events: none;
}
.thumbnail a:hover:before {
	opacity: 1;
}

/********** SIZES **********/

.thumbnail.small {
	max-height: 3rem;
	max-width: 3rem;
}




/* ============================================================================================== */
/* ============================================= FX ============================================= */
/* ============================================================================================== */

/*
.fx
mode  = normal, fixed, clip (with image)
shapes = .triangle, .arc
*/

.fx {
	z-index: 20;
	margin: 0;
	pointer-events: none;
}


/* ============================== CLIPPED ============================== */

/*
triangle equilateral height == 87%
triangle isocele height == 50%
clip-path: polygon(0% 0%, 100% 0%, 50% 87%, 0% 0%);
clip-path: polygon(0% 0%, 100% 0%, 50% 50%, 0% 0%);
*/

figure.clipped {
	height: auto;
	clip-path: polygon(0% 0%, 100% 0%, 50% 50%, 0% 0%);
}

figure.clipped.left {
	max-width: none !important;
	clip-path: polygon(0% 0%, 50% 50%, 0% 100%, 0% 0%);
}

.fx.clipped {
	aspect-ratio: 2/1;
	clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 0% 0%);
}


/* ============================== SHAPE ============================== */

.shape {
	stroke: var(--theme-color);
	stroke-width: var(--logo-line-height);
	fill: none;
	overflow: visible;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	pointer-events: none;
}

.shape > * {
	height: auto;
	width: 100%;
	stroke: inherit;
	fill: inherit;
	overflow: inherit;
}


/* ============================== DOTS ============================== */

/* for actions only */

.dots {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.dots .items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	font-size: 0;
	height: calc(100% + 10%);
	margin: -2.5%;
	overflow: hidden;
}

.dots .dot {
	position: relative;
	display: inline-block;
	margin: 0;
	aspect-ratio: 1/1;
	height: calc(100% / 10);
	opacity: 0;
	transform: scale(0);
}

.dots .dot::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	height: 90%;
	width: 90%;
	margin: 5%;
	background: var(--primary-color);
	border-radius: 50%;
	opacity: inherit;
	transition: inherit;
}

.dots .dot.active {
	opacity: 1;
	transform: scale(1);
}

.dots .dot.none { visibility: hidden; }
.dots .dot.none::after { background: none; }

.dots .dot.active.var-1 { opacity: 1; }
.dots .dot.active.var-2 { opacity: .75; }
.dots .dot.active.var-3 { opacity: .5; }
.dots .dot.active.var-4 { opacity: .25; }

/* no transition before JS init */

body.onload .dots .dot {
	transition: none;
}


/* ============================== IN SECTION ============================== */

section .fx.clipped,
section .fx.shape {
	height: calc(100% + var(--gutter-gap) * 2);
	width: auto;
	aspect-ratio: 10/5;
}

/* clipped */

section .fx.clipped {
	position: relative;
	z-index: 20;
	margin-left: auto;
	margin-right: auto;
	margin-top: calc(var(--gutter-gap) * -1 - var(--logo-line-height)) !important;
	height: auto;
}

/* shape */

section .fx.shape {
	position: absolute;
	z-index: 20;
	top: 0;
	left: 50%;
	margin-top: calc(var(--gutter-gap) * -1 - var(--logo-line-height));
	transform: translate3d(-50%, 0, 0);
}

/* onload */

body.onload section .fx {
	opacity: 0;
}

body.onload section .fx:not(.dots) {
	transform: translate3d(0, -100%, 0) scale(.5);
}

body.onload section .fx.shape:not(.dots) {
	transform: translate3d(-50%, -100%, 0) scale(.5);
}

section .fx.clipped + * {
	margin-top: var(--gutter-gap) !important;
}

/* layout */

section .fx.clipped,
section .fx.shape {
	max-width: 60%;
}

@media (min-width: 1200px) {
	section .fx.clipped,
	section .fx.shape {
		max-width: 40%;
	}
}