/* ============================================
   REGEDOURA — CARDS COMPONENT
   News and event cards for homepage sections.
   Usa apenas variáveis de theme.css.
   ============================================ */

/* --------------------------------------------
   News section (secção «Notícias», C6)
   -------------------------------------------- */

.news {
	width: 100%;
	padding-block: var(--section-padding-y);
	background: var(--home-section-bg, var(--news-section-bg));
}

.news__inner {
	max-width: var(--page-max-width);
	margin-inline: auto;
	padding-inline: var(--page-padding);
}

/* Título à esquerda com a barra amarela do .section-title (como Sobre) */
.news__title {
	--section-title-align: var(--section-title-align-editorial);

	margin-block-end: var(--news-title-gap);
}

/* Mobile: 1 coluna. 768px: 2. 1024px: 3. Largura e altura iguais; com 1 ou 2
   cartões as colunas vazias mantêm a largura de uma coluna da grelha. */
.news__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-rows: 1fr;
	gap: var(--news-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.news__item {
	display: flex;
	margin: 0;
}

.news__item > .card-news {
	flex: 1 1 auto;
}

@media (min-width: 768px) {
	.news__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.news__grid {
		grid-template-columns: repeat(var(--news-cols-desktop), minmax(0, 1fr));
	}
}

/* --------------------------------------------
   News card
   Uma só ligação (no título) esticada sobre o cartão inteiro.
   -------------------------------------------- */

.card-news {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: var(--news-card-border-width) solid var(--news-card-border-color);
	border-radius: var(--news-card-radius);
	background: var(--home-card-bg, var(--news-card-bg));
	box-shadow: var(--news-card-shadow);
	overflow: hidden;
	transition: border-color var(--news-transition);
}

.card-news:hover {
	border-color: var(--news-card-border-hover);
}

.card-news:hover .card-news__title-text {
	text-decoration: underline;
	text-underline-offset: var(--news-title-underline-offset);
}

.card-news__media {
	aspect-ratio: var(--news-image-aspect);
	overflow: hidden;
	background: var(--news-media-bg);
}

.card-news__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-news__body {
	display: flex;
	flex-direction: column;
	gap: var(--news-card-gap);
	flex: 1;
	padding: var(--news-card-padding);
}

.card-news__date {
	margin: 0;
	color: var(--news-date-color);
	font-family: var(--news-date-font);
	font-size: var(--news-date-size);
	font-weight: var(--news-date-weight);
	line-height: var(--news-date-leading);
}

.card-news__title {
	margin: 0;
	color: var(--news-title-color);
	font-family: var(--news-title-font);
	font-size: var(--news-title-size);
	font-weight: var(--news-title-weight);
	line-height: var(--news-title-leading);
}

.card-news__link {
	color: inherit;
	text-decoration: none;
}

/* Área clicável: o cartão inteiro, sem segunda ligação */
.card-news__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.card-news__link:focus-visible {
	outline: none;
}

.card-news__link:focus-visible::after {
	outline: var(--news-focus-width) solid var(--news-more-hover);
	outline-offset: calc(var(--news-focus-width) * -1);
	border-radius: var(--news-card-radius);
}

.card-news__excerpt {
	margin: 0;
	color: var(--news-excerpt-color);
	font-family: var(--news-excerpt-font);
	font-size: var(--news-excerpt-size);
	line-height: var(--news-excerpt-leading);
}

/* «Ler mais →»: indicação visual (não é ligação; o título é a ligação) */
.card-news__more {
	display: inline-flex;
	align-items: center;
	gap: var(--news-section-link-gap);
	min-height: var(--news-more-min-height);
	margin-block-start: auto;
	color: var(--news-more-color);
	font-family: var(--news-date-font);
	font-size: var(--news-more-size);
	font-weight: var(--news-more-weight);
}

.card-news:hover .card-news__more {
	color: var(--news-more-hover);
	text-decoration: underline;
	text-underline-offset: var(--hover-underline-offset);
}

@media (prefers-reduced-motion: reduce) {
	.card-news {
		transition: none;
	}
}

/* --------------------------------------------
   Events section
   -------------------------------------------- */

.events {
	width: 100%;
	padding-block: var(--section-padding-y);
	background: var(--home-section-bg, var(--events-section-bg));
}

.events__inner {
	max-width: var(--page-max-width);
	margin-inline: auto;
	padding-inline: var(--page-padding);
}

.events__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--events-header-gap);
	margin-block-end: var(--events-carousel-gap);
}

.events__title {
	margin: 0;
	color: var(--events-section-title-color);
	font-family: var(--events-section-title-font);
	font-size: var(--events-section-title-size);
	font-weight: var(--events-section-title-weight);
	line-height: var(--events-section-title-leading);
	letter-spacing: var(--events-section-title-tracking);
	text-align: var(--section-title-align);
	text-transform: uppercase;
}

.events__all {
	display: inline-flex;
	align-items: center;
	gap: var(--events-section-link-gap);
	color: var(--events-section-link-color);
	font-family: var(--event-meta-font);
	font-size: var(--events-section-link-size);
	font-weight: var(--events-section-link-weight);
	text-decoration: none;
}

.events__all:hover {
	color: var(--events-section-link-hover);
	text-decoration: underline;
	text-underline-offset: var(--hover-underline-offset);
}

.events__all:focus-visible {
	outline: var(--events-focus-width) solid var(--events-section-link-hover);
	outline-offset: var(--events-focus-width);
}

.events__carousel {
	display: flex;
	align-items: center;
	gap: var(--events-carousel-gap);
}

.events__track {
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.events__track::-webkit-scrollbar {
	display: none;
}

.events__list {
	display: flex;
	gap: var(--events-list-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.events__item {
	flex: 0 0 var(--events-card-width);
	scroll-snap-align: start;
}

.events__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--events-nav-size);
	height: var(--events-nav-size);
	padding: 0;
	border: 0;
	border-radius: var(--events-radius-pill);
	background: transparent;
	color: var(--events-nav-color);
	cursor: pointer;
	transition: color var(--events-transition);
}

.events__nav:hover {
	color: var(--events-nav-hover);
	box-shadow: var(--hover-ring);
}

.events__nav:focus-visible {
	outline: var(--events-focus-width) solid var(--events-nav-hover);
	outline-offset: var(--events-focus-width);
}

.events__nav-icon {
	display: block;
	width: var(--events-nav-icon-size);
	height: var(--events-nav-icon-size);
	border-top: var(--events-arrow-stroke) solid currentColor;
	border-right: var(--events-arrow-stroke) solid currentColor;
}

.events__nav-icon--prev {
	transform: rotate(-135deg);
}

.events__nav-icon--next {
	transform: rotate(45deg);
}

.events__empty {
	margin: 0;
	color: var(--events-empty-color);
	font-family: var(--event-meta-font);
	font-size: var(--event-meta-size);
	line-height: var(--event-meta-leading);
}

/* --------------------------------------------
   Event card
   -------------------------------------------- */

.card-event {
	height: 100%;
}

.card-event__link {
	display: flex;
	align-items: flex-start;
	gap: var(--event-card-gap);
	height: 100%;
	padding: var(--event-card-padding);
	border-radius: var(--event-card-radius);
	background: var(--home-card-bg, var(--event-card-bg));
	box-shadow: var(--event-card-shadow);
	color: inherit;
	text-decoration: none;
	transition: box-shadow var(--events-transition);
}

.card-event__link:hover {
	box-shadow: var(--event-card-shadow-hover);
}

.card-event__link:hover .card-event__title {
	text-decoration: underline;
	text-underline-offset: var(--events-section-link-gap);
}

.card-event__link:focus-visible {
	outline: var(--events-focus-width) solid var(--events-nav-hover);
	outline-offset: var(--events-focus-width);
}

.card-event__badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: var(--event-badge-min-size);
	min-height: var(--event-badge-min-size);
	width: var(--event-badge-size);
	height: var(--event-badge-size);
	border-radius: var(--event-badge-radius);
	background: var(--event-badge-bg);
	color: var(--event-badge-color);
}

.card-event__day {
	font-family: var(--event-day-font);
	font-size: var(--event-day-size);
	font-weight: var(--event-day-weight);
	line-height: var(--event-day-leading);
}

.card-event__month {
	font-family: var(--event-month-font);
	font-size: var(--event-month-size);
	font-weight: var(--event-month-weight);
	letter-spacing: var(--event-month-tracking);
	text-transform: uppercase;
}

.card-event__body {
	display: flex;
	flex-direction: column;
	gap: var(--event-meta-gap);
	min-width: 0;
}

.card-event__title {
	margin: 0;
	color: var(--event-title-color);
	font-family: var(--event-title-font);
	font-size: var(--event-title-size);
	font-weight: var(--event-title-weight);
	line-height: var(--event-title-leading);
}

.card-event__meta {
	display: flex;
	align-items: center;
	gap: var(--event-meta-gap);
	margin: 0;
	color: var(--event-meta-color);
	font-family: var(--event-meta-font);
	font-size: var(--event-meta-size);
	line-height: var(--event-meta-leading);
}

.card-event__meta-icon {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--event-meta-icon-color);
}

@media (min-width: 768px) {
	.events__header {
		position: relative;
		flex-direction: row;
		justify-content: center;
	}

	.events__all {
		position: absolute;
		inset-inline-end: 0;
		inset-block-start: 50%;
		transform: translateY(-50%);
	}
}

@media (min-width: 1280px) {
	.events__item {
		flex-basis: var(--events-card-width-desktop);
	}

	.events__track {
		scroll-snap-type: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.card-event__link {
		transition: none;
	}

	.events__track {
		scroll-behavior: auto;
	}

	.events__nav {
		transition: none;
	}
}