/**
 * CSS Variables - Mapping Equalmed names to Astra variables
 *
 * Astra already defines these colors as ast-global-color-X:
 * - ast-global-color-0: #264c84 (body)
 * - ast-global-color-1: #59aed6 (azure)
 * - ast-global-color-2: #b4ddc0 (teal)
 * - ast-global-color-3: #f5f5f5 (gray)
 * - ast-global-color-4: #FFFFFF (white)
 *
 * Astra spacing (already available):
 * - spacing-40: 1rem, spacing-50: 1.5rem, spacing-60: 2.25rem
 *
 * Astra layout:
 * - wide-size: calc(1200px + 2em + 2em)
 */
:root {
	/* Aliases: Map Equalmed color names to Astra global colors */
	--wp--preset--color--body: var(--wp--preset--color--ast-global-color-0, #264c84);
	--wp--preset--color--azure: var(--wp--preset--color--ast-global-color-1, #59aed6);
	--wp--preset--color--gray: var(--wp--preset--color--ast-global-color-3, #f5f5f5);

	/* Gradient (not in Astra, needs definition) */
	--wp--preset--gradient--gradient-2: linear-gradient(90deg, #1a6497, #61a6d1, #cce7d3);

	/* Typography - sizes not in Astra, need definition */
	--wp--preset--font-size--extra-small: 0.75rem;
	--wp--preset--font-size--body: 1rem;
	--wp--preset--font-size--extra-large: clamp(2.55rem, 2rem + 2.75vw, 4.35rem);

	/* Site header height for sticky sidebar */
	--site-header-height: 80px;
}

.media-page__container {
	width: 100%;
	/* padding: 0 var(--wp--preset--spacing--40); */
	background: linear-gradient(180deg, #f5f5f5, #fbfbfb);
}

.media-page__content {
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
}

.media-page__title {
	position: relative;
	margin: 0;
	font-weight: 500;
	line-height: 1;
	padding: var(--wp--preset--spacing--60) 0;
	color: var(--wp--preset--color--azure);
}

.media-page__title:after {
	position: absolute;
	content: "";
	top: 100%;
	right: 0;
	height: 5px;
	width: 100%;
	background: var(--wp--preset--gradient--gradient-2);
	border-radius: 0.5rem;
}

@media (min-width: 768px) {
	.media-page__title {
		border-bottom: 1px solid var(--wp--preset--color--body);
	}

	.media-page__title:after {
		height: 1px;
		width: 100vw;
		background-image: none;
		background-color: var(--wp--preset--color--body);
		right: 100%;
	}
}

.media-page__filters-toggle {
	position: relative;
	display: block;
	width: 100%;
	padding: 0.5rem 0;
	margin: 5px 0 0;
	text-align: left;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	color: var(--wp--preset--color--azure);
	background: transparent;
	border: 1px var(--wp--preset--color--azure);
	border-style: none none solid none;
	cursor: pointer;
}

.media-page__filters-toggle:after {
	position: absolute;
	content: "";
	height: 1.25rem;
	width: 1.25rem;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	background-image: url('data:image/svg+xml,<svg height="29" viewBox="0 0 29 29" width="29" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="%2359aed6"><g><circle cx="14.5" cy="14.5" r="14.5" stroke="none"/><circle cx="14.5" cy="14.5" fill="none" r="14"/></g><path d="m18194.055 3894.127 7.359 7.359 7.5-7.5" transform="translate(-18187 -3882)"/></g></svg>');
	background-repeat: no-repeat;
	background-size: contain;
}

.media-page__filters-toggle[aria-expanded="true"]:after {
	background-image: url('data:image/svg+xml,<svg height="29" viewBox="0 0 29 29" width="29" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="%2359aed6"><g><circle cx="14.5" cy="14.5" r="14.5" stroke="none"/><circle cx="14.5" cy="14.5" fill="none" r="14"/></g><path d="m14172.374-1387.262-13.087 13.086" transform="translate(-14151.287 1395.262)"/><path d="m13.087 0-13.087 13.086" transform="matrix(0 1 -1 0 21.087 8)"/></g></svg>');
}

.media-page__filters-list {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.media-page__filters-list--main {
	height: 0;
	visibility: hidden;
	opacity: 0;
}

.media-page__filters-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.media-page__filters-list li + li {
	border-top: 1px solid var(--wp--preset--color--body);
}

.media-page__filter-link {
	display: inline-block;
	padding: 0.5rem 0;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}

.media-page__filter-link:hover,
.media-page__filter-link:focus,
.media-page__filter-link--active,
.media-page__filter-link--useful.is-active {
	color: var(--wp--preset--color--azure);
}

.media-page__filter-link--reset {
	display: none;
}

.media-page__filter-link--active + .media-page__filter-link--reset {
	display: block;
	height: 1.25rem;
	width: 1.25rem;
	font-size: 0;
	background-image: url('data:image/svg+xml,<svg height="29" viewBox="0 0 29 29" width="29" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="%2359aed6"><g><circle cx="14.5" cy="14.5" r="14.5" stroke="none"/><circle cx="14.5" cy="14.5" fill="none" r="14"/></g><path d="m14172.374-1387.262-13.087 13.086" transform="translate(-14151.287 1395.262)"/><path d="m13.087 0-13.087 13.086" transform="matrix(0 1 -1 0 21.087 8)"/></g></svg>');
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
	cursor: pointer;
}

.media-page__filters--useful.is-hidden {
	display: none;
}

.media-page__filter-link--useful {
	padding: 0.25rem 0;
	font-size: var(--wp--preset--font-size--extra-small);
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
}

@media (max-width: 767px) {
	.media-page__filters-list--main.filters-open {
		padding: 0 var(--wp--preset--spacing--40);
		height: auto;
		visibility: visible;
		opacity: 100%;
		box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
		position: absolute;
		left: 0;
		right: 0;
		background: var(--wp--preset--color--gray);
		z-index: 2;
	}
}

@media (min-width: 768px) {
	.media-page__filters-toggle {
		display: none;
	}

	.media-page__filters {
		padding-top: var(--wp--preset--spacing--50);
		padding-right: var(--wp--preset--spacing--50);
		padding-bottom: var(--wp--preset--spacing--50);
	}

	.media-page__filters-list {
		height: 100%;
		visibility: visible;
		opacity: 1;
	}

	.media-page__filter-link {
		padding: 0.25rem 0;
		font-size: var(--wp--preset--font-size--medium);
	}

	.media-page__filter-link--active + .media-page__filter-link--reset {
		height: 1.5rem;
		width: 1.5rem;
	}
}

.media-page__post-item {
	position: relative;
	padding: var(--wp--preset--spacing--50) 0;
}

.media-page__post-item:not(:last-child):after {
	content: "";
	position: absolute;
	height: 5px;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--wp--preset--gradient--gradient-2);
	border-radius: 0.5rem;
}

.media-page__post-meta {
	margin-bottom: 0.5rem;
}

.media-page__post-meta p {
	margin-top: 0;
	margin-bottom: 0;
	font-size: var(--wp--preset--font-size--extra-small);
	text-transform: uppercase;
}

.media-page__post-category,
.media-page__post-date {
	font-weight: bold;
}

.media-page__post-thumbnail {
	margin-bottom: 1rem;
}

.media-page__post-item .media-page__post-thumbnail a[href*="youtube.com"],
.media-page__post-item .media-page__post-thumbnail a[href*="youtu.be"] {
	position: relative;
	display: block;
}

.media-page__post-item
	.media-page__post-thumbnail
	a[href*="youtube.com"]:before,
.media-page__post-item .media-page__post-thumbnail a[href*="youtu.be"]:before {
	position: absolute;
	content: "";
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 2rem;
	height: 2rem;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><g transform="translate(3862 -7894)"><path d="M25,10A15,15,0,1,0,40,25,15.016,15.016,0,0,0,25,10Zm5.265,15.8L22.81,30.358a.877.877,0,0,1-1.312-.8V20.443a.877.877,0,0,1,1.313-.8L30.265,24.2a.954.954,0,0,1,0,1.605Z" transform="translate(-3872 7884)" fill="%23fff"/></g></svg>');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 2;
}

.media-page__post-thumbnail img {
	width: 100%;
	border-radius: 0.5rem;
}

.media-page__post-title {
	margin-top: 0;
	margin-bottom: 0.75rem;
	color: var(--wp--preset--color--azure);
	line-height: 1.25;
	font-weight: 700;
}

.media-page__post-title a {
	color: inherit;
	text-decoration: none;
}

.media-page__post-excerpt p {
	font-size: var(--wp--preset--font-size--small);
	margin-top: 0;
	margin-bottom: 0;
}

.media-page__post-link {
	display: inline-block;
	margin-top: 1rem;
	padding: 0.25rem 1rem;
	color: var(--wp--preset--color--azure);
	font-weight: bold;
	font-size: var(--wp--preset--font-size--extra-small);
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid;
	border-radius: 0.5rem;
}

.media-page__post-item--estudo .media-page__post-link,
.media-page__post-item--podcast .media-page__post-link,
.media-page__post-item--entrevista .media-page__post-link {
	margin-top: 0;
}

.media-page__load-more {
	position: relative;
	grid-area: loadmore;
	padding: var(--wp--preset--spacing--60) 0
		calc(var(--wp--preset--spacing--60) * 3);
}

.media-page__load-more:before {
	content: "";
	position: absolute;
	height: 5px;
	top: 0;
	left: 0;
	right: 0;
	background: var(--wp--preset--gradient--gradient-2);
	border-radius: 0.5rem;
}

.media-page__load-more-btn {
	appearance: none;
	display: block;
	margin: 0 0 0 auto;
	padding: 0.75rem 1rem 0.75rem 5.5rem;
	background-color: transparent;
	background-image: url(../images/button_loadmore.svg);
	background-size: 3.5rem;
	background-repeat: no-repeat;
	background-position: 1rem center;
	color: var(--wp--preset--color--azure);
	font-weight: bold;
	font-size: var(--wp--preset--font-size--extra-small);
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid;
	border-radius: 0.5rem;
	cursor: pointer;
}

@media (min-width: 782px) {
	.media-page__content {
		display: grid;
		grid-template-areas:
			"sidebar posts"
			"sidebar loadmore";
		grid-template-columns: 25% auto;
		column-gap: var(--wp--preset--spacing--50);
	}

	.media-page__sidebar {
		grid-area: sidebar;
		border-right: 1px solid var(--wp--preset--color--body);
	}

	.media-page__sidebar__content {
		position: sticky;
		top: var(--site-header-height);
	}

	.media-page__posts-list {
		position: relative;
		grid-area: posts;
		margin-top: calc(
			var(--wp--preset--spacing--60) * 2 +
				var(--wp--preset--font-size--extra-large)
		);
	}

	.media-page__posts-list:before {
		content: "";
		position: absolute;
		height: 5px;
		top: 0;
		left: 0;
		right: 0;
		background: var(--wp--preset--gradient--gradient-2);
		border-radius: 0.5rem;
	}

	.media-page__post-item {
		display: grid;
		grid-template-areas: "meta content";
		grid-template-columns: 15% 1fr;
		column-gap: var(--wp--preset--spacing--50);
	}

	.media-page__post-item--podcast,
	.media-page__post-item--entrevista,
	.media-page__post-item--estudo,
	.media-page__post-item--post {
		grid-template-areas: "meta image text";
		grid-template-columns: 15% 12rem 1fr;
	}

	.media-page__post-meta {
		grid-area: meta;
		grid-row: 1 / span 3;
		padding-right: 10%;
	}

	.media-page__post-content {
		grid-area: content;
	}

	.media-page__post-item--podcast .media-page__post-content,
	.media-page__post-item--entrevista .media-page__post-content,
	.media-page__post-item--estudo .media-page__post-content,
	.media-page__post-item--post .media-page__post-content {
		display: contents;
	}

	.media-page__post-item--podcast .media-page__post-thumbnail,
	.media-page__post-item--entrevista .media-page__post-thumbnail,
	.media-page__post-item--estudo .media-page__post-thumbnail,
	.media-page__post-item--post .media-page__post-thumbnail {
		grid-area: image;
		grid-row: 1 / span 3;
	}

	.media-page__post-item--podcast .media-page__post-text,
	.media-page__post-item--entrevista .media-page__post-text,
	.media-page__post-item--estudo .media-page__post-text,
	.media-page__post-item--post .media-page__post-text {
		grid-area: text;
	}
}

/* LINKS ÚTEIS */

.media-page__posts-list:has(.media-page__post-item--link_util) {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--50);
}

@media (min-width: 782px) {
	.media-page__posts-list:has(.media-page__post-item--link_util) {
		grid-template-columns: repeat(3, 1fr);
	}
}

.media-page__post-item--link_util {
	display: block;
	padding: 0;
}

.media-page__post-item--link_util:not(:last-child):after {
	content: none;
}

.media-page__post-item--link_util .media-page__post-thumbnail {
	margin-bottom: 0;
}

.media-page__post-item--link_util .media-page__post-thumbnail img {
	background-color: white;
	filter: grayscale(100%);
	opacity: 0.8;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

.media-page__post-item--link_util .media-page__post-thumbnail a:hover img,
.media-page__post-item--link_util .media-page__post-thumbnail a:focus img {
	filter: grayscale(0%);
	opacity: 1;
}

/* PODCAST/VIDEO MODAL */

/* Basic styles for modal */
.video-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.8);
	z-index: 1000;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0.3s, opacity 0.3s;
}

.video-modal--visible {
	visibility: visible;
	opacity: 1;
}

.video-modal__content {
	background: #fff;
	border-radius: 8px;
	padding: 16px;
	position: relative;
	width: 90%;
	max-width: 720px;
}

.video-modal__close {
	position: absolute;
	top: -0.75rem;
	right: -0.75rem;
	width: 2rem;
	height: 2rem;
	font-size: 1.25rem;
	color: #333;
	background: white;
	line-height: 1;
	border: none;
	border-radius: 1rem;
	cursor: pointer;
}

.video-modal__backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	z-index: -1;
}

lite-youtube {
	background-color: #000;
	position: relative;
	display: block;
	contain: content;
	background-position: center center;
	background-size: cover;
	cursor: pointer;
	max-width: 720px;
}

/* gradient */
lite-youtube::before {
	content: attr(data-title);
	display: block;
	position: absolute;
	top: 0;
	/* Pixel-perfect port of YT's gradient PNG, using https://github.com/bluesmoon/pngtocss plus optimizations */
	background-image: linear-gradient(
		180deg,
		rgb(0 0 0 / 67%) 0%,
		rgb(0 0 0 / 54%) 14%,
		rgb(0 0 0 / 15%) 54%,
		rgb(0 0 0 / 5%) 72%,
		rgb(0 0 0 / 0%) 94%
	);
	height: 99px;
	width: 100%;
	font-family: "YouTube Noto", Roboto, Arial, Helvetica, sans-serif;
	color: hsl(0deg 0% 93.33%);
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
	font-size: 18px;
	padding: 25px 20px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	box-sizing: border-box;
}

lite-youtube:hover::before {
	color: white;
}

/* responsive iframe with a 16:9 aspect ratio
    thanks https://css-tricks.com/responsive-iframes/
*/
lite-youtube::after {
	content: "";
	display: block;
	padding-bottom: calc(100% / (16 / 9));
}
lite-youtube > iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
}

/* play button */
lite-youtube > .lyt-playbtn {
	display: block;
	/* Make the button element cover the whole area for a large hover/click target… */
	width: 100%;
	height: 100%;
	/* …but visually it's still the same size */
	background: no-repeat center/68px 48px;
	/* YT's actual play button svg */
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
	position: absolute;
	cursor: pointer;
	z-index: 1;
	filter: grayscale(100%);
	transition: filter 0.1s cubic-bezier(0, 0, 0.2, 1);
	border: 0;
}

lite-youtube:hover > .lyt-playbtn,
lite-youtube .lyt-playbtn:focus {
	filter: none;
}

/* Post-click styles */
lite-youtube.lyt-activated {
	cursor: unset;
}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lyt-playbtn {
	opacity: 0;
	pointer-events: none;
}

.lyt-visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* PODCAST SPOTIFY EMBED */

.media-page__post-item--podcast {
	display: block;
}

.media-page__post-item--podcast:empty {
	display: none;
	padding: 0;
}

.media-page__post-item--podcast:empty:after {
	content: none;
}

.media-page__post-embed {
	width: 100%;
}

.media-page__post-embed iframe {
	width: 100%;
	min-height: 152px;
	border-radius: 12px;
}