/*
 * LIEG — home-page sections + page-equipe styles.
 *
 * Each home section owns its background, padding and inner layout.
 * Sections are designed to stack vertically with alternating
 * background colours so the page reads as a series of distinct
 * bands rather than one long scroll.
 */

/* ── Home section primitive ─────────────────────────── */
.home-section {
	padding-block: var(--space-8);
}

.home-section__header {
	margin-bottom: var(--space-7);
	max-width: 100%;
}

.home-section__content {
	font-size: var(--font-size-md);
	line-height: var(--line-height-loose);
	color: var(--color-text);
}

.home-section__content p {
	max-width: none;
}

.home-section__content > * {
	max-width: 100%;
}

.home-section__content p {
	max-width: var(--measure-prose);
}

.home-section__cta {
	margin-top: var(--space-7);
}

/* ── About band: two-column on desktop, stacked on mobile ─── */
.home-about__grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
	align-items: center;
}

@media ( min-width: 768px ) {
	.home-about__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-7);
	}
}

.home-about__grid > .home-section__image {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	order: -1;
}

@media ( min-width: 768px ) {
	.home-about__grid > .home-section__image {
		order: 0;
	}
}

/* ── Alternating section backgrounds ──── */
.home-section--about {
	background: var(--color-bg);
}

.home-section--atividades {
	background: var(--color-bg-alt);
}

.home-section--publicacoes {
	background: var(--color-bg);
}

.home-section--equipe {
	background: var(--color-brand-soft-bg);
	color: var(--color-text);
}

.home-section--equipe .page-header__eyebrow {
	color: var(--color-brand-primary);
}

.home-section--equipe .home-section__content,
.home-section--equipe .home-section__content p {
	color: var(--color-text);
	opacity: 0.92;
}

/* ── Equipe band: two-column grid, image on right ─── */
.home-equipe__grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
	align-items: center;
}

@media ( min-width: 768px ) {
	.home-equipe__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-7);
	}
}

.home-equipe__media {
	display: flex;
	justify-content: center;
	align-items: center;
}

.home-equipe__media > img,
.home-equipe__media > .home-section__image {
	width: 100%;
	max-height: 400px;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

.home-equipe__icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: var(--color-brand-soft);
	color: var(--color-brand-primary);
}

/* ── Contato section ─── */
.home-section--contato {
	background: var(--color-bg);
	color: var(--color-text);
}

.home-section--contato .page-header__title,
.home-section--contato .page-header__content,
.home-section--contato .page-header__content p {
	color: var(--color-text);
}

.home-contato__email {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-medium);
	color: var(--color-brand-primary);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-standard);
}

.home-contato__email:hover,
.home-contato__email:focus-visible {
	color: var(--color-brand-primary-dark);
	text-decoration: underline;
}

/* ── Hero / carousel band ─────────────────────────── */
.home-section--hero {
	background: var(--color-bg);
	color: var(--color-text);
	/* No padding: the carousel is full-bleed, top to bottom. */
	padding-block: 0;
	margin: 0;
}

.hero-carousel {
	position: relative;
	margin: 0;
}

.hero-carousel__track {
	display: flex;
	gap: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	-webkit-overflow-scrolling: touch;
	padding: 0;
	margin: 0;
	/* Hide scrollbar across engines. JS still drives navigation
	   via prev/next/dot buttons, so the lack of a draggable
	   scrollbar isn't a usability regression for this carousel. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.hero-carousel__track::-webkit-scrollbar {
	display: none;
}

.hero-carousel__track:focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 0;
	border-radius: 0;
}

/* Each slide snaps to the start edge and stays there. */
.hero-slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	background:
		linear-gradient(135deg,
			var(--color-brand-violet) 0%,
			var(--color-brand-primary) 55%,
			var(--color-brand-accent) 100%);
	color: var(--color-text-inverse);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* Locked at 400px so the carousel keeps a consistent
	   rhythm regardless of viewport size. The slide must fit:
	   meta chips + 2–3 line title + 3-line clamped excerpt +
	   CTA + vertical padding. The fixed height means long
	   titles or extra copies will just wrap tighter; the
	   excerpt line-clamp (3) prevents overflow regardless. */
	height: 400px;
	transition:
		transform var(--duration-base) var(--ease-standard);
}

/* Featured event gets a brand stripe on the left edge so users
   can tell at a glance that the next-up item is special. */
.hero-slide--event::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 4px;
	z-index: 3;
}

/* Background image. Inlined via style="background-image: url(...)".
   We always set a non-transparent background-color on the slide
   itself in case a slide has no featured image. */
.hero-slide__bg {
	position: absolute;
	inset: 0;
	background-color: transparent;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.55;
	z-index: 0;
}

/* When the slide has no image, the bg layer shows nothing and
   the gradient on .hero-slide shows through. */
.hero-slide--no-image .hero-slide__bg {
	opacity: 0;
}

/* Readability overlay. Sits between the background image and
   the content. Gradient leans darker on the bottom-left where
   the content sits, lighter on the top-right so the image
   itself stays visible. The left-heavy gradient ensures WCAG
   contrast for body text. */
.hero-slide__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			100deg,
			rgba(58, 27, 90, 0.92) 0%,
			rgba(58, 27, 90, 0.78) 35%,
			rgba(58, 27, 90, 0.45) 65%,
			rgba(58, 27, 90, 0.25) 100%);
	z-index: 1;
}

/* Body wrap. Mirrors the global .container rule so the slide
   text column begins at the same horizontal offset as the
   navbar's content — without `max()` hacks. The slide bg +
   overlay still span the full viewport; only the body content
   lives inside this rail. The wrap also fills the slide
   vertically so the body inside can center its content
   within the slide's 425px height. */
.hero-slide__body-wrap {
	width: 100%;
	height: 100%;
	max-width: 100%;
	padding-inline: var(--space-4);
	display: flex;
	align-items: stretch;
}

@media (min-width: 1024px) {
	.hero-slide__body-wrap {
		max-width: 1440px;
		margin-inline: auto;
		padding-inline: var(--space-6);
	}
}

.hero-slide__body {
	padding-block: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	justify-content: center;
	flex: 1;
	position: relative;
	z-index: 2;
}

@media (min-width: 1024px) {
	.hero-slide__body {
		padding-block: var(--space-7);
	}
}

.hero-slide__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-1);
}

.hero-slide__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.18);
	color: var(--color-text-inverse);
	border: 1px solid rgba(255, 255, 255, 0.28);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.4;
}

.hero-slide__chip--event {
	background: var(--color-brand-accent);
	color: var(--color-text-inverse);
	border-color: transparent;
}

.hero-slide__chip--event::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	background: currentColor;
	border-radius: 50%;
	animation: lieg-pulse 2.4s ease-in-out infinite;
}

.hero-slide__chip--topic {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: var(--color-text-inverse);
	text-transform: none;
	letter-spacing: normal;
	font-weight: var(--font-weight-medium);
}

.hero-slide__title {
	margin: 0;
	font-size: clamp(var(--font-size-lg), 2.4vw + 0.5rem, var(--font-size-2xl));
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-snug);
	color: var(--color-text-inverse);
	letter-spacing: var(--letter-spacing-tight);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.hero-slide__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-standard);
}

.hero-slide__title a:hover,
.hero-slide__title a:focus-visible {
	color: var(--color-brand-soft);
	text-decoration: underline;
}

.hero-slide__date {
	margin: 0;
	font-size: var(--font-size-sm);
	color: var(--color-text-inverse);
	opacity: 0.85;
}

.hero-slide__local {
	color: var(--color-text-inverse);
	opacity: 0.85;
}

.hero-slide__excerpt {
	margin: 0;
	font-size: var(--font-size-base);
	line-height: var(--line-height-normal);
	color: var(--color-text-inverse);
	opacity: 0.92;
	/* Cap the excerpt at 3 lines so a long post doesn't push
	   the slide taller than its fixed height or hide the
	   CTA below the fold. The ellipsis is provided by the
	   `wp_trim_words()` call in the template, so the
	   line-clamp is a final safety net. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

@media (min-width: 1024px) {
	.hero-slide__excerpt {
		font-size: var(--font-size-md);
	}
}

.hero-slide__cta {
	margin: var(--space-2) 0 0;
}

/* On the dark slide the ghost button re-inverts: white text on a
   transparent background, then solid white on hover. Keeps the
   CTA legible against the brand gradient + image overlay. */
.hero-slide .button--ghost {
	background: transparent;
	color: var(--color-text-inverse);
	border: 2px solid var(--color-text-inverse);
}

.hero-slide .button--ghost:hover,
.hero-slide .button--ghost:focus-visible {
	background: var(--color-text-inverse);
	color: var(--color-brand-deep);
	border-color: var(--color-text-inverse);
}

/* Ghost button (default — light backgrounds outside the hero). */
.button--ghost {
	background: transparent;
	color: var(--color-brand-primary);
	border: 2px solid var(--color-brand-primary);
}

.button--ghost:hover,
.button--ghost:focus-visible {
	background: var(--color-brand-primary);
	color: var(--color-text-inverse);
}

/* Controls wrap. Same constraint as the body-wrap above so
   prev/next + dots begin at the navbar's content edge instead
   of floating dead-center on wide viewports. */
.hero-carousel__controls-wrap {
	width: 100%;
	max-width: 100%;
	padding-inline: var(--space-4);
}

@media (min-width: 1024px) {
	.hero-carousel__controls-wrap {
		max-width: 1440px;
		margin-inline: auto;
		padding-inline: var(--space-6);
	}
}

/* Carousel controls (centered inside the rail). */
.hero-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	margin-top: var(--space-5);
}

.hero-carousel__btn {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-brand-primary);
	border: 1px solid var(--color-border-strong);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition:
		background var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
}

.hero-carousel__btn:hover,
.hero-carousel__btn:focus-visible {
	background: var(--color-brand-primary);
	color: var(--color-text-inverse);
	border-color: var(--color-brand-primary);
}

.hero-carousel__btn:active {
	transform: scale(0.96);
}

.hero-carousel__btn[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none;
}

.hero-carousel__dots {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.hero-carousel__dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border-radius: var(--radius-pill);
	background: var(--color-border-strong);
	border: 0;
	cursor: pointer;
	transition:
		background var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard),
		width var(--duration-fast) var(--ease-standard);
}

.hero-carousel__dot:hover,
.hero-carousel__dot:focus-visible {
	background: var(--color-brand-primary-light);
}

.hero-carousel__dot.is-active {
	background: var(--color-brand-primary);
	width: 28px;
}

@media (prefers-reduced-motion: reduce) {
	.hero-carousel__track,
	.hero-slide {
		scroll-behavior: auto;
	}
	.hero-slide__chip--event::before {
		animation: none;
	}
}

/* ── Publicações list ──────────────────────── */
.publicacoes-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
}

@media ( min-width: 768px ) {
	.publicacoes-list {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-5);
	}
}

/*
 * Card layout mirrors .card from atividades so the two home
 * sections share one visual rhythm: the type badge ends up in
 * the media slot (right-aligned pill, magenta), title sits
 * underneath with the year in parentheses, and the whole
 * surface is clickable via a stretched link on the title <a>.
 */
.card--publicacao {
	display: flex;
	flex-direction: column;
	position: relative; /* anchor for stretched-link ::before */
	padding: 0;
}

/* Override .card { flex-direction: row } at 480px+ from components.css */
@media ( min-width: 480px ) {
	.card--publicacao {
		flex-direction: column;
	}
}

.publicacoes-list__badge-row {
	display: flex;
	justify-content: flex-end;
	width: 100%;
}

.publicacoes-list__body {
	gap: var(--space-3);
	padding-block: var(--space-4);
	padding-inline: var(--space-4);
}

/* Year shown inline after the title, in muted medium weight.
   Sits flush inside .card__title so it travels with title. */
.publicacoes-list__year {
	color: var(--color-text-muted);
	font-weight: var(--font-weight-medium);
}

.publicacoes-list__authors {
	margin: 0;
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	font-style: italic;
}

/* Stretched link: turn the title anchor into a click target
   spanning the entire card. Hover/focus lift + glow are
   inherited from the shared .card:hover rules in
   components.css, so this section naturally tracks Atividades. */
.card--publicacao .card__title a {
	position: static;
}

.card--publicacao .card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--radius-lg);
}

.card--publicacao .card__title a:focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 2px;
	border-radius: var(--radius-lg);
}

/* ── Buttons ───────────────────────────────── */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-pill);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	transition:
		background var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard);
}

.button--primary {
	background: var(--color-brand-primary);
	color: var(--color-text-inverse);
}

.button--primary:hover,
.button--primary:focus-visible {
	background: var(--color-brand-primary-dark);
	color: var(--color-text-inverse);
}