/**
 * Casas Choice — [cc_perspetivas_grid] shortcode (Perspetivas pill filter +
 * article grid). Penpot board "Perspetivas" → Desktop / Mobile.
 *
 * Scoped entirely under .cc-persp so it never leaks into the rest of the
 * page (the title/intro above it is built directly on the page). Tokens
 * mirror assets/css/comprar.css so every section reads as the same design
 * system without the files depending on each other.
 */

.cc-persp {
	--cc-ink: var( --theme-palette-color-5, #333538 );
	--cc-border: var( --theme-palette-color-7, #C4C7CA );
	--cc-bg-alt: var( --theme-palette-color-8, #F2F3F4 );
	--cc-accent: var( --theme-palette-color-1, #00A6CE );
	--cc-font: 'Montserrat', sans-serif;

	color: var( --cc-ink );
	font-family: var( --cc-font );
	box-sizing: border-box;
}

.cc-persp *,
.cc-persp *::before,
.cc-persp *::after {
	box-sizing: border-box;
}

/* ----------------------------------------------------------------------
 * Pill filter bar — "Todos" + one pill per category. Single-select: only
 * one pill (or none, on load "Todos") carries .is-active at a time.
 * -------------------------------------------------------------------- */

.cc-persp-pills {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	margin-bottom: 32px;
	/* So the last pill isn't flush against the viewport edge when this row
	 * scrolls horizontally on narrow screens. */
	padding-block: 2px;
	cursor: grab;
	/* Let assets/js/perspetivas.js drive horizontal panning via Pointer
	 * Events (mouse/touch/pen) instead of the browser's own touch-scroll
	 * gesture — `pan-y` still allows the page itself to scroll vertically
	 * through this row. */
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

.cc-persp-pills.is-dragging {
	cursor: grabbing;
}

.cc-persp-pills::-webkit-scrollbar {
	display: none;
}

.cc-persp-pill {
	flex: none;
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding-inline: 22px;
	background: transparent;
	border: 1px solid rgba( 196, 199, 202, 0.6 );
	border-radius: 999px;
	font-family: var( --cc-font );
	font-size: 14px;
	font-weight: 400;
	color: var( --cc-ink );
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cc-persp-pill:hover {
	border-color: var( --cc-ink );
}

.cc-persp-pill.is-active {
	background: var( --cc-ink );
	border-color: rgba( 196, 199, 202, 0.6 );
	color: #FFFFFF;
}

.cc-persp-pill.is-active:hover {
	border-color: rgba( 196, 199, 202, 0.6 );
}

/* ----------------------------------------------------------------------
 * Card grid
 * -------------------------------------------------------------------- */

.cc-persp-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	column-gap: 32px;
	row-gap: 64px;
}

.cc-persp-grid__empty {
	margin-top: 32px;
	font-size: 16px;
	color: var( --cc-ink );
}

/* Pill clicks fade the *whole* grid out, swap which cards carry `hidden`
 * while invisible, then fade the (now-filtered) grid back in — see
 * assets/js/perspetivas.js. A per-card fade was tried first but reads as
 * messy: matching cards sit still while others fade/reflow around them.
 * One clean crossfade of the whole block reads far calmer. */
.cc-persp-grid,
.cc-persp-grid__empty {
	transition: opacity 0.28s cubic-bezier( 0.16, 1, 0.3, 1 ), transform 0.28s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.cc-persp-grid.is-transitioning,
.cc-persp-grid__empty.is-transitioning {
	opacity: 0;
	transform: translateY( 8px );
}

.cc-persp-card {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	text-decoration: none;
	color: inherit;
}

/* `.cc-persp-card` sets its own `display`, which — at equal selector
 * specificity — would otherwise beat the `[hidden]` attribute's built-in
 * `display: none` simply by coming later in the stylesheet. Without this,
 * a filtered-out card would keep its grid cell (a blank gap) even though
 * it's invisible while the grid is faded out. */
.cc-persp-card[hidden] {
	display: none;
}

.cc-persp-card__img {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var( --cc-bg-alt );
	overflow: hidden;
}

.cc-persp-card__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.cc-persp-card:hover .cc-persp-card__img img {
	transform: scale( 1.04 );
}

.cc-persp .cc-persp-card {
	transition: 500ms all ease;
}
    
.cc-persp .cc-persp-card:hover {
	box-shadow: 0px 225px 63px rgba(0, 0, 0, 0), 0px 144px 58px rgba(0, 0, 0, 0.01), 0px 81px 49px rgba(0, 0, 0, 0.05), 0px 36px 36px rgba(0, 0, 0, 0.09), 0px 9px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.cc-persp-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
}

.cc-persp-card__meta {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var( --cc-accent );
}

.cc-persp-card__title {
	margin: 0;
}

.cc-persp-card__excerpt {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: var( --cc-ink );
}

.cc-persp-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	color: var( --cc-ink );
}

.cc-persp-card__cta svg {
	width: 16px;
	height: 16px;
	display: block;
	flex: none;
	transition: transform 0.2s ease;
}

.cc-persp-card:hover .cc-persp-card__cta svg {
	transform: translateX( 4px );
}

.cc-persp-empty {
	grid-column: 1 / -1;
	font-size: 16px;
	color: var( --cc-ink );
}

/* ----------------------------------------------------------------------
 * [cc_perspetivas_teaser] — homepage "Perspetivas" section: same cards as
 * above, no pill bar, rendered through the swiper-based `.cc-gcard-grid`
 * system (assets/css/comprar.css) instead of `.cc-persp-grid` — confirmed
 * against Penpot: the Homepage board's mobile "Perspetivas" section is a
 * one-card slider with a "1 / N" counter, not a stacked list.
 *
 * Wrapper is `.cc-persp-teaser`, NOT `.cc-persp` — same tokens (duplicated
 * below, same convention as `.cc-article` in assets/css/artigo.css), but a
 * different class on purpose: `.cc-gcard-grid__slide:hover` (comprar.css)
 * already puts a shadow + lift on the slide these cards sit in here (same
 * as in "Artigos relacionados", inc/artigo.php), and `.cc-persp-card:hover`
 * above carries that *exact same* shadow, scoped to a `.cc-persp` ancestor.
 * Reusing `.cc-persp` here would make both rules match at once — slide and
 * card each animating their own copy of the identical shadow — doubling it
 * up instead of the single clean lift every other card grid on the site
 * gets. Renaming the wrapper is enough: `.cc-persp-card`'s own hover rule
 * then simply doesn't match, exactly like it doesn't in "Artigos
 * relacionados" either.
 * -------------------------------------------------------------------- */

.cc-persp-teaser {
	--cc-ink: var( --theme-palette-color-5, #333538 );
	--cc-border: var( --theme-palette-color-7, #C4C7CA );
	--cc-bg-alt: var( --theme-palette-color-8, #F2F3F4 );
	--cc-accent: var( --theme-palette-color-1, #00A6CE );
	--cc-font: 'Montserrat', sans-serif;

	color: var( --cc-ink );
	font-family: var( --cc-font );
	box-sizing: border-box;
}

.cc-persp-teaser *,
.cc-persp-teaser *::before,
.cc-persp-teaser *::after {
	box-sizing: border-box;
}

/* Only the fallback (≥1000px, un-initialized) grid's gap needs overriding
 * here — everything else about `.cc-gcard-grid` and the cards themselves
 * (`.cc-persp-card`, above) is already exactly right — same fix as
 * `.cc-artigo-related__grid` in assets/css/artigo.css. */
.cc-persp-teaser__grid .cc-gcard-grid__swiper:not( .swiper-initialized ) > .swiper-wrapper {
	gap: 32px;
}

/* ----------------------------------------------------------------------
 * Mobile — single column grid, pills stay in one scrollable row.
 * -------------------------------------------------------------------- */

@media ( max-width: 999px ) {
	/* Full-bleed, edge-to-edge scrollable row — Penpot's Mobile board gives
	 * this bar 24px of its own left padding and 0 on the right (so it keeps
	 * the page's usual left gutter but lets the last pill scroll flush to
	 * the screen edge), rather than sitting inset inside .ct-container like
	 * everything else on the page. The 100vw/-50vw pair breaks it out of
	 * .ct-container without depending on that container's own padding.
	 */
	.cc-persp-pills {
		width: 100vw;
		position: relative;
		left: 50%;
		margin-left: -50vw;
		padding-left: 24px;
		padding-right: 0;
	}

	.cc-persp-grid {
		grid-template-columns: 1fr;
		/* Penpot's Mobile board stacks cards with a 48px gap, not the 64px
		 * used between desktop's grid rows. */
		row-gap: 48px;
	}

	/* Penpot's Mobile board crops the photo to 390:280 (≈1.39:1) rather
	 * than desktop's 4:3 — a deliberate mobile-specific crop, not a rounding
	 * artifact, so it's matched exactly rather than reusing 4/3. */
	.cc-persp-card__img {
		aspect-ratio: 39 / 28;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cc-persp-pill,
	.cc-persp-grid,
	.cc-persp-grid__empty,
	.cc-persp-card__img img,
	.cc-persp-card__cta svg {
		transition: none;
	}
}