/**
 * Portfolio Gallery — Artículos Observatorio layout.
 */

.portfolio-gallery--observatorio {
	--obs-color: #e8c87a;
	--obs-ink: #111;
	--obs-pad-x: clamp(1.5rem, 4vw, 3.5rem);
	--obs-pad-y: clamp(1.5rem, 4vw, 3rem);
	--obs-side-rail: clamp(2.25rem, 3.5vw, 3.25rem);
	position: relative;
	isolation: isolate;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	background: var(--obs-color);
	color: var(--obs-ink);
	padding: var(--obs-pad-y) var(--obs-pad-x);
	overflow: visible;
}

/*
 * Full-bleed tint ONLY: content (shell) stays in the parent width.
 * A ::before layer paints the viewport-wide color behind the article.
 * Limitation: an ancestor with overflow:hidden will still clip the bleed.
 */
.portfolio-gallery--observatorio.portfolio-gallery--obs-bg-full {
	background: transparent;
}

.portfolio-gallery--observatorio.portfolio-gallery--obs-bg-full::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--obs-color);
	z-index: 0;
	pointer-events: none;
}

@supports (width: 100dvw) {
	.portfolio-gallery--observatorio.portfolio-gallery--obs-bg-full::before {
		width: 100dvw;
	}
}

/* Label chip: white only behind the text, not a full-width bar. */
.portfolio-gallery--observatorio .observatorio__brand {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 var(--obs-pad-y);
	padding: 0 clamp(0.35rem, 1.5vw, 1rem);
}

.portfolio-gallery--observatorio .observatorio__brand-text {
	display: inline-block;
	margin: 0;
	padding: 0.35em 0.55em;
	background: #fff;
	color: #111;
	font-family: var(
		--wp--preset--font-family--heading,
		var(--wp--preset--font-family--headings, Georgia, "Times New Roman", serif)
	);
	font-size: clamp(1.2rem, 1rem + 0.75vw, 1.65rem);
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: 0.01em;
	text-align: left;
}

.portfolio-gallery--observatorio .observatorio__shell {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-inline: var(--obs-side-rail);
	padding-top: 0;
	box-sizing: border-box;
}

.portfolio-gallery--observatorio .observatorio__main {
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

.portfolio-gallery--observatorio .observatorio__viewport {
	width: 100%;
}

.portfolio-gallery--observatorio .observatorio__slide {
	display: none;
	background: var(--obs-color);
}

.portfolio-gallery--observatorio .observatorio__slide.is-active {
	display: block;
}

.portfolio-gallery--observatorio .observatorio__column {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.55rem;
	width: 100%;
	padding: 0 clamp(0.35rem, 1.5vw, 1rem);
	box-sizing: border-box;
}

/* Shade clips the prelude while it folds up (blind). Motion driven by JS §9. */
.portfolio-gallery--observatorio .observatorio__shade {
	overflow: hidden;
	width: 100%;
}

.portfolio-gallery--observatorio .observatorio__prelude {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.55rem;
	width: 100%;
	will-change: transform;
}

.portfolio-gallery--observatorio .observatorio__header {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 0.45rem 0.7rem;
	margin: 0 0 0.55rem;
	width: 100%;
	text-align: left;
}

.portfolio-gallery--observatorio .observatorio__index {
	flex: 0 0 auto;
	margin: 0;
	font-family: var(
		--wp--preset--font-family--heading,
		var(--wp--preset--font-family--headings, Georgia, "Times New Roman", serif)
	);
	font-size: clamp(2.75rem, 2rem + 3vw, 4.25rem);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.02em;
	color: inherit;
}

.portfolio-gallery--observatorio .observatorio__heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem;
	min-width: 0;
	flex: 1 1 auto;
	padding-top: 0.12em;
}

.portfolio-gallery--observatorio .observatorio__title {
	margin: 0;
	font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.65rem);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: left;
	text-wrap: balance;
}

.portfolio-gallery--observatorio .observatorio__architect {
	margin: 0;
	font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.125rem);
	line-height: 1.3;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-align: left;
	text-wrap: balance;
}

/* WP core / theme often hide this; keep for a11y of the archive index. */
.portfolio-gallery--observatorio .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.portfolio-gallery--observatorio .observatorio__media {
	position: relative;
	width: 100%;
	margin: 0.25rem 0 0.15rem;
	background: var(--obs-color);
	line-height: 0;
	overflow: hidden;
}

.portfolio-gallery--observatorio .observatorio__image {
	display: block;
	width: 100%;
	height: auto;
	filter: grayscale(1) contrast(1.05);
	mix-blend-mode: multiply;
	user-select: none;
}

.portfolio-gallery--observatorio .observatorio__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	max-height: min(70vh, 48rem);
	background: rgba(0, 0, 0, 0.12);
}

.portfolio-gallery--observatorio .observatorio__excerpt {
	margin: 0.35rem 0 0;
	font-size: clamp(0.875rem, 0.82rem + 0.2vw, 1.0625rem);
	line-height: 1.55;
	font-weight: 400;
	text-align: left;
	text-wrap: pretty;
}

/* Collapsed: out of flow (opacity alone still reserved full content height). */
.portfolio-gallery--observatorio .observatorio__article {
	display: none;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	transform: translateY(0.75rem);
	overflow-anchor: none;
}

.portfolio-gallery--observatorio .observatorio__fetch-error {
	margin: 0 0 0.5rem;
	width: 100%;
	text-align: center;
	font-size: 0.875rem;
	line-height: 1.4;
}

.portfolio-gallery--observatorio .observatorio__btn.is-loading {
	opacity: 0.45;
	pointer-events: none;
}

.portfolio-gallery--observatorio .observatorio__content {
	margin: 0;
	font-size: clamp(0.875rem, 0.82rem + 0.2vw, 1.0625rem);
	line-height: 1.6;
	font-weight: 400;
	text-align: left;
}

.portfolio-gallery--observatorio .observatorio__content > *:first-child {
	margin-top: 0;
}

.portfolio-gallery--observatorio .observatorio__content img,
.portfolio-gallery--observatorio .observatorio__content figure {
	max-width: 100%;
	height: auto;
}

/* Side prev/next: Y frozen at photo mid while collapsed; unchanged when expanded. */
.portfolio-gallery--observatorio .observatorio__btn--prev,
.portfolio-gallery--observatorio .observatorio__btn--next {
	position: absolute;
	top: var(--obs-arrow-y, 8rem);
	transform: translateY(-50%);
	z-index: 2;
	margin: 0;
}

.portfolio-gallery--observatorio .observatorio__btn--prev {
	left: 0;
}

.portfolio-gallery--observatorio .observatorio__btn--next {
	right: 0;
}

.portfolio-gallery--observatorio .observatorio__nav--expand {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 1.25rem 0 0;
	min-height: 2.5rem;
}

.portfolio-gallery--observatorio .observatorio__btn {
	appearance: none;
	margin: 0;
	padding: 0.35rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	line-height: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.portfolio-gallery--observatorio .observatorio__btn[hidden] {
	display: none !important;
}

.portfolio-gallery--observatorio .observatorio__btn:hover:not(:disabled) .observatorio__icon,
.portfolio-gallery--observatorio .observatorio__btn:focus-visible .observatorio__icon {
	opacity: 0.55;
}

.portfolio-gallery--observatorio .observatorio__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.portfolio-gallery--observatorio .observatorio__btn:disabled {
	opacity: 0.28;
	cursor: default;
}

.portfolio-gallery--observatorio .observatorio__icon {
	display: block;
	width: clamp(1.75rem, 2.4vw, 2.5rem);
	height: auto;
	flex-shrink: 0;
}

.portfolio-gallery--observatorio .observatorio__btn--expand .observatorio__icon,
.portfolio-gallery--observatorio .observatorio__btn--collapse .observatorio__icon {
	width: clamp(1.5rem, 2vw, 2rem);
}

.portfolio-gallery--observatorio.is-collapse-zone {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cg transform='translate(20 20) rotate(-90) translate(-20 -12)'%3E%3Cpath stroke='%23111111' stroke-width='1.75' stroke-linecap='square' stroke-linejoin='miter' d='M2 12h28M22 4l12 8-12 8'/%3E%3C/g%3E%3C/svg%3E") 20 20, pointer;
}

.portfolio-gallery--observatorio.is-collapse-zone :is(a, button, input, textarea, select, label) {
	cursor: pointer;
}

@media (max-width: 600px) {
	.portfolio-gallery--observatorio {
		--obs-pad-x: 0.85rem;
		--obs-pad-y: 1.15rem;
		--obs-side-rail: 1.75rem;
		padding: var(--obs-pad-y) var(--obs-pad-x);
	}

	.portfolio-gallery--observatorio .observatorio__column {
		padding: 0 0.1rem;
	}

	.portfolio-gallery--observatorio .observatorio__icon {
		width: 1.5rem;
	}
}