@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: calc(var(--font-size) * .75);
	--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);
}



/* ================================================================================================ */
/* ============================================= 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;
	display: flex;
	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.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);
}


/* =============== 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;
	height: auto;
	width: auto;
}
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; }


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

main > figure.is-left {
	align-self: flex-start;
	margin-left: max(var(--section-gap-x), 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-x), calc((100% - var(--content-max-width)) / 2)) !important;
}

figure.text-left figcaption {
	text-align: left;
	margin-right: auto;
}
figure.text-center figcaption {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
figure.text-right figcaption {
	text-align: right;
	margin-left: auto;
}


/* ============================== 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 {
	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 */

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

/* For images, text */

figure.size-2-3 {
	max-width: calc(var(--content-max-width) * 2 / 3) !important;
}
figure.size-1-3 {
	max-width: calc(var(--content-max-width) * 1 / 3) !important;
}
figure.size-1-4 {
	max-width: calc(var(--content-max-width) * 1 / 4) !important;
}


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

figure a .link-label .label {
	font-weight: var(--font-weight-bold);
	padding: 1em 1.5em;
	border-radius: 3em;
	background: var(--bright-color);
	
}


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

.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);
}


/* =============== MEDIA =============== */

.thumbnail.media {
	--thumbnail-border-radius: 1em;
	max-width: none;
	aspect-ratio: var(--media-ratio);
}


/* =============== AVATAR =============== */

.thumbnail.avatar {
	--img-ratio: var(--avatar-ratio);
	--img-height: 10em;
	--img-width: 10em;
}
.thumbnail.avatar > *,
.thumbnail.avatar img {
	max-height: var(--img-height);
	max-width: var(--img-width);
}


/* ============================== AD ============================== */

figure.ad {
	--img-ratio: var(--ad-ratio);
	--img-height: 100%;
	--img-fit: cover;
}


/* ============================== ILLUSTRATION ============================== */

/* @use in section.banner */

figure.illustration {
	--figcaption-font-size: 1em;
	--figcaption-gap: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: none;
    margin: 0;
}
figure.illustration picture {
    flex-grow: 1;
    overflow: hidden;
    width: 100%;
}
figure.illustration img {
    height: 100%;
    width: 100%;
    max-width: none;
}
figure.illustration figcaption {
    display: block;
    width: 100%;
    padding: 1em;
    margin: 0 auto;
    line-height: 1;
    max-width: var(--content-max-width);
    background: var(--bright-color);
}
figure.illustration.contain picture {
   display: contents;
}


/* ============================== FLIPBOOK ============================== */

/* =============== DEFAULT =============== */

.flipbook-container {
	display: flex;
	flex-direction: column;
	align-items: center;
    width: 100%;
    height: 100svh;
	max-height: 60svh;
	overflow: clip;
}
.flipbook-container > * {
    width: 100%;
    height: 100%;
    display: block;
	margin: auto;
}


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

body.iframed {
    height: fit-content;
}
body.iframed main {
    flex-grow: unset;
}
body.iframed .flipbook-container {
	max-height: 100svh;
}


/* ============================== EMBED ============================== */

figure.is-type-rich {
	width: 100%;
}


/* ============================== SECTION IMAGE ============================== */

.section-image {
	--img-fit: cover;
	--img-height: 100%;
	--img-ratio: var(--section-image-ratio);
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	aspect-ratio: var(--section-image-ratio) !important;
	overflow: hidden;
	object-position: center center;
}
.section-image picture {
	width: 100%;
	margin: 0;
	aspect-ratio: var(--section-image-ratio) !important;
}

main .section-image + [class*='-background-color'] {
	margin-top: 0;
}