@layer components {
@media (max-width: 600px) {
	#goals {
		grid-template-columns: 1fr !important;
	}
}
#birthdays, #calendar {
	animation-name: enter-left;
	animation-timeline: view(80% 0);
	border-radius: var(--radius-huge);
	box-shadow: var(--shadow-dark);
	margin: var(--spacing-huge) var(--spacing-medium);
	overflow: hidden;
	padding: var(--spacing-medium);
	transform-origin: bottom;
}

#birthdays {
	animation-name: enter-right;
	background: linear-gradient(120deg, var(--dark-white), var(--pastel-grey) 200%);
}

#birthdays h2, #calendar h2, #goals h2, #news h2 {
	background-clip: text !important;
	color: transparent !important;
	font-weight: var(--font-weight-medium);
	font-size: var(--title-size-large);
	height: 1em;
	letter-spacing: -4%;
}

#birthdays h2, #news h2 {
	background: linear-gradient(to top, var(--dark-grey), var(--light-grey));
}

#birthdays h2 {
	margin-left: -28px;
}

#birthdays-list li {
	border-bottom: 1px solid var(--pastel-grey);
	display: flex;
	flex-direction: column;
	min-height: 64px;
	padding: var(--spacing-small);
}

#birthdays-list p {
	color: var(--black);
	font-size: var(--font-size-small);
	line-height: var(--line-height-large);
	margin: 0;
	margin-left: 120px;
}

#birthdays-list p span.department {
	color: var(--grey);
	font-style: italic;
	margin-left: var(--spacing-small);
}

#birthdays-list p span.department::before {
	content: " - ";
}

#birthdays-list time {
	color: var(--dark-grey);
	display: inline-block;
	font-size: var(--title-size-large);
	font-weight: var(--font-weight-large);
	line-height: 1;
	position: absolute;
	text-align: right;
	width: 80px;
}

#birthdays-list time span {
	display: inline-block;
	font-size: var(--font-size-small);
	font-style: italic;
	font-weight: var(--font-weight-small);
	line-height: var(--title-size-large);
	margin-left: -2px;
	margin-top: -8px;
	rotate: -90deg;
	vertical-align: top;
}

#calendars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	margin: var(--spacing-huge) auto;
	max-width: 1200px;
	width: min(1200px, 100vw);
}

#calendar {
	background: linear-gradient(120deg, var(--off-white), var(--light-blue) 150%);
}

#calendar h2 {
	background: linear-gradient(to top, var(--blue), var(--light-blue));
	margin-left: -28px;
}

#goals {
	color: var(--white);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-large);
	margin: var(--spacing-huge) auto;
	max-width: 1024px;
	width: 100%;
}

#goals h2 {
	background: linear-gradient(to top, var(--teal), var(--cyan));
}

#goals h3 {
	font-size: var(--title-size-large);
	font-weight: var(--font-weight-medium);
	margin: 0;
}

#goals p {
	color: var(--light-grey) !important;
	margin-top: 0;
}

#goals-feats {
	display: flex;
	flex-direction: column;
}

#news::before {
	content: "";
	display: block;
	height: 340px;
	mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
	overflow: hidden;
	position: absolute;
	width: 100%;
}

.simcal-calendar {
	border-radius: var(--radius-medium);
	box-shadow: var(--shadow-light);
}

.form-search {
	margin-bottom: var(--spacing-huge);
}

.hero-quick-access {
	background: color-mix(in srgb, var(--pastel-grey), transparent 60%);
	backdrop-filter: blur(16px);
	border: 1px solid var(--pastel-grey);
	border-radius: var(--radius-huge);
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
	margin: var(--spacing-huge) auto;
	max-width: 1028px;
	padding: var(--spacing-huge);
}

.hero-quick-access h2, .hero-quick-access h3 {
	text-align: center;
}

.home .title {
	display: none;
}

.latest-posts {
	display: block;
	margin: var(--spacing-medium) auto;
	padding: var(--spacing-huge) 0;
	position: relative;
	width: min(100vw, 1200px);
}

.latest-posts ul {
	display: flex;
	flex-wrap: nowrap;
	height: 340px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	transition: all 0.5s ease-in-out;
	width: 100%;
	
	/* 1. Definimos a máscara inicial (com fade apenas na direita, assumindo que começa no início) */
	mask-image: linear-gradient(to right, black 95%, transparent 100%);
	-webkit-mask-image: linear-gradient(to right, black 95%, transparent 100%);
	
	/* 2. Vinculamos a animação ao scroll horizontal do próprio elemento */
	animation: carousel-fade linear both;
	animation-timeline: scroll(self inline);
}

.latest-posts ul li, .card-news {
	/* animation-duration: auto; IMPORTANTE: Permite que o scroll controle a linha do tempo */
    animation-timeline: view(x); /* Começa o efeito assim que o item entra na tela */
    /* animation-range: entry 0% exit 0%; */
	animation-name: appear;
	animation-fill-mode: both;
	transform-origin: bottom;
    flex: 0 0 auto;
}

.pre-footer {
	display: grid;
	grid-template-columns: 1fr;
	margin: 0 auto;
}

.pre-footer img {
	max-width: 1280px !important;
	width: 100%;
}

.search-title {
	color: var(--grey) !important;
	letter-spacing: -6%;
	font-size: 48px;
	font-weight: var(--font-weight-small);
	margin: 0;
	margin-bottom: var(--spacing-large);
	text-align: center;
	text-shadow: var(--shadow-light);
	text-transform: uppercase;
}

.search-title strong {
	background: linear-gradient(to right, var(--blue), var(--cyan));
	background-clip: text;
	color: transparent;
	font-weight: var(--font-weight-large);
	letter-spacing: 0;
}

.services {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-large);
	justify-content: space-around;
}

.services + p {
	margin-top: var(--spacing-huge);
}


/* MARK: Fixes
*/
label[for=wp-block-search__input-1] {
	display: none;
}

.iframe-sonner {
	border: none;
    display: block;
	height: 960px;
    margin: auto;
    width: 800px;
}

.wp-block-search__input {
	border: 2px solid #000;
}

.wp-block-cover {
	overflow: hidden !important;
}

.wrapper-sonner {
    background: transparent;
    display: block;
    height: 960px;
    overflow: hidden;
    position: relative;
    transition: height 0.6s ease-in-out;
    will-change: height;
}

.wrapper-sonner .inner-sonner {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

}







.card-with-attributes {
  --status: attr(data-status type(<custom-ident>));
  border: 1px solid;
  border-color: if(
    style(--status: pending): royalblue;
    style(--status: complete): seagreen;
    else: gray);
  background-color: if(
    style(--status: pending): #eff7fa;
    style(--status: complete): #f6fff6;
    else: #f7f7f7);
  /*  Now accessible with reading-flow: grid-columns */
  grid-column: if(
    style(--status: pending): 1;
    style(--status: complete): 2;
    else: 3);
}