/* =========================================================
   Back to Essential — base
   ========================================================= */
:root {
	--bte-ink:   #231F20;      /* the "black" — page background, tile backgrounds, AND text color on light areas */
	--bte-on-ink: #f5f3ef;     /* text sitting on dark tiles */
	--bte-white: #ffffff;      /* pure white — the line/gutter color, same weight everywhere via --bte-gap */
	--bte-accent: #B38E90;     /* duotone screen-blend color for photos */
	--bte-sepia-darken: 1;  /* darkens the photo BEFORE the screen blend (screen only ever lightens, so this is what controls overall brightness — lower = darker, 1 = no darkening */

	--bte-gap: 6px;            /* the ONE line weight used for every gap/border in the layout */
	--bte-row-h: 240px;        /* height of a standard (whole) row, e.g. 1x1 */
	--bte-row-h-half: calc(var(--bte-row-h) / 2); /* height of a "½" row — quotes, menu, logo */
	--bte-container: 70%;      /* editorial margins either side */
	--bte-container-max: 1360px;

	--font-serif: "Bodoni Moda", Georgia, serif;   /* titles — Light weight, always uppercase */
	--font-sans: "Inter", Helvetica, Arial, sans-serif; /* body text */
	--font-mono: "Space Mono", "Courier New", monospace; /* menu / meta info (date, place, labels) */
}

* { box-sizing: border-box; }

html {
	scroll-behavior: smooth; /* "elevator" effect for the menu's #anchor links */
}

body {
	margin: 0;
	background: var(--bte-ink);
	color: var(--bte-on-ink);
	font-family: var(--font-sans);
	line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* =========================================================
   Editorial page container — 70% width, centered. Its own
   background is WHITE; every tile sits on top of it at full
   opacity, so the only place white shows through is the
   --bte-gap space between tiles/sections/edges — one line
   weight for the outer edge AND every inner seam.
   ========================================================= */
.bte-page {
	width: var(--bte-container);
	max-width: var(--bte-container-max);
	min-width: 320px;
	margin: 0 auto;
	background: var(--bte-white);
	padding: var(--bte-gap);
	display: flex;
	flex-direction: column;
	gap: var(--bte-gap);
}
@media (max-width: 900px) {
	.bte-page { width: 92%; }
}

/* Legacy top bar — only used on single/page fallback templates now,
   NOT on the front page (there, logo + menu are their own header row) */
.bte-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 5%;
	background: var(--bte-ink);
}
.bte-header .bte-nav a,
.bte-header .bte-logo-text { color: var(--bte-on-ink); }

.bte-nav {
	list-style: none;
	display: flex;
	gap: 32px;
	margin: 0;
	padding: 0;
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.bte-nav a { transition: opacity .2s ease; }
.bte-nav a:hover { opacity: .6; }
.bte-logo-text {
	font-family: var(--font-serif);
	font-weight: 400; /* Bodoni Moda's lightest available weight — no true "Light"/300 cut exists for this family */
	text-transform: uppercase;
	font-size: 24px;
	letter-spacing: .04em;
}

/* =========================================================
   Header row — Menu + Logo. These behave as the page HEADER:
   always first, fixed in place, not part of the sortable
   masonry list even though menu/logo can be posts under the hood.
   Same ink color as every other tile — no separate shade.
   ========================================================= */
.bte-chrome-row {
	display: flex;
	gap: var(--bte-gap);
}
.bte-chrome-tile {
	flex: 1 1 50%;
	height: var(--bte-row-h-half);
	background: var(--bte-ink);
	display: flex;
	align-items: center;
	padding: 0 28px;
}
.bte-chrome-tile--menu .bte-nav { color: var(--bte-on-ink); }
.bte-chrome-tile--logo { justify-content: flex-end; }
.bte-chrome-tile--logo .bte-logo-text,
.bte-chrome-tile--logo .bte-header__logo { color: var(--bte-on-ink); }
.bte-chrome-tile--logo img.custom-logo,
.bte-chrome-tile--logo .custom-logo-link img {
	height: 100%;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* =========================================================
   Sticky / pinned tile — sits AFTER the header row, spans
   the full grid width, inside the 70% container.
   ========================================================= */
.bte-sticky-zone { width: 100%; }
.bte-sticky-tile { width: 100%; background: var(--bte-ink); }
.bte-sticky-tile .bte-card { min-height: var(--bte-row-h-half); }

/* If you'd rather it stick WHILE scrolling instead of just being
   pinned at the top of the document, swap the line below in: */
/* .bte-sticky-zone { position: sticky; top: 0; z-index: 50; } */

/* =========================================================
   Masonry columns
   ========================================================= */
.bte-columns {
	display: flex;
	align-items: flex-start;
	gap: var(--bte-gap);
}
.bte-column {
	flex: 1 1 50%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: var(--bte-row-h-half); /* half-row base unit — whole sizes span 2 of these */
	grid-auto-flow: dense;
	gap: var(--bte-gap);
}

.bte-tile { overflow: hidden; position: relative; background: var(--bte-ink); }

/* --- nomenclature -> grid span (base unit = half a standard row) --- */
.bte-size-1x1   { grid-column: span 1; grid-row: span 2; }
.bte-size-2x1   { grid-column: span 2; grid-row: span 2; }
.bte-size-1x2   { grid-column: span 1; grid-row: span 4; }
.bte-size-2x2   { grid-column: span 2; grid-row: span 4; }
/* half-height variants — quotes, menu, logo, anything that doesn't need a full row */
.bte-size-1x0-5 { grid-column: span 1; grid-row: span 1; }
.bte-size-2x0-5 { grid-column: span 2; grid-row: span 1; }

@media (max-width: 900px) {
	.bte-columns { flex-direction: column; }
}
@media (max-width: 600px) {
	.bte-column {
		grid-template-columns: repeat(2, 1fr); /* keep 2 sub-columns available, same as desktop */
		/* grid-auto-rows intentionally NOT overridden here — it stays the
		   same --bte-row-h-half unit as desktop, so the height HIERARCHY
		   is preserved: 1x0-5/2x0-5 stay half the height of 1x1/2x1, which
		   stay half the height of 1x2/2x2.
		   This matches desktop's own fixed-height-per-size behavior exactly
		   (same overflow:hidden rules apply on desktop too) — if a specific
		   text post's content is too long for its assigned size, either
		   bump that post's layout_size, or turn on "Leer más" (show_read_more)
		   so only a short excerpt shows on the tile and the full text opens
		   in the lightbox instead. */
	}
	/* Default: every tile goes full-width on mobile regardless of its
	   desktop size. The !important also cancels out the inline
	   grid-column style from "sub_column" (a desktop-only feature) —
	   without it, a tile that had a Left/Right sub-column set on desktop
	   would otherwise keep forcing an unwanted 2nd column on mobile. */
	.bte-size-1x1, .bte-size-2x1, .bte-size-1x2, .bte-size-2x2,
	.bte-size-1x0-5, .bte-size-2x0-5 {
		grid-column: span 2 !important;
	}
	/* Opt-in exception: tiles explicitly marked "Keep half-width on
	   mobile" pair up 2-per-row instead — e.g. client logos. */
	.bte-mobile-half {
		grid-column: span 1 !important;
	}
}

/* =========================================================
   Cards — shared
   ========================================================= */
.bte-card {
	height: 100%;
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
}
.bte-card--text {
	justify-content: center;
	padding: 32px;
	background: var(--bte-ink);
}
.bte-card__title {
	font-family: var(--font-serif);
	font-weight: 400; /* light */
	text-transform: uppercase;
	letter-spacing: .02em;
	font-size: clamp(22px, 2.4vw, 34px);
	line-height: 1.15;
	margin: 0 0 14px;
}
.bte-card__excerpt { font-size: 15px; opacity: .85; margin-bottom: 16px; }
.bte-card__excerpt p { margin: 0 0 10px; }

/* Text tiles placed in a half-height slot (quotes, short callouts) get
   tighter padding and a smaller title so they don't overflow. */
.bte-size-1x0-5 .bte-card--text,
.bte-size-2x0-5 .bte-card--text {
	padding: 14px 28px;
}
.bte-size-1x0-5 .bte-card__title,
.bte-size-2x0-5 .bte-card__title {
	font-size: clamp(18px, 1.8vw, 26px);
	margin-bottom: 6px;
}
.bte-readmore {
	align-self: flex-start;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
	transition: opacity .2s ease;
}
.bte-readmore:hover { opacity: .6; }

/* image / video / gallery share the "full-bleed tile" look */
.bte-card--image, .bte-card--video, .bte-card--gallery { padding: 0; }
.bte-image-link, .bte-video-link { display: block; height: 100%; width: 100%; }

/* =========================================================
   Duotone hover effect — matches the Photoshop recipe:
   grayscale photo + a solid color layer blended with "screen",
   fading away on hover to reveal the full-color photo.
   ========================================================= */
.bte-media {
	position: relative;
	height: 100%;
	width: 100%;
	overflow: hidden;
	isolation: isolate; /* keeps the screen-blend contained to this element */
}
.bte-media img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.4) brightness(var(--bte-sepia-darken));
	transition: filter .6s ease, transform .6s ease;
	transform: scale(1.001); /* avoids subpixel edge flicker on transition */
}
.bte-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--bte-accent);
	mix-blend-mode: multiply;
	transition: opacity .6s ease;
	pointer-events: none;
}
.bte-image-link:hover .bte-media img,
.bte-video-link:hover .bte-media img,
.bte-carousel__slide:hover .bte-media img {
	filter: grayscale(0) contrast(1);
	transform: scale(1.035);
}
.bte-image-link:hover .bte-media::after,
.bte-video-link:hover .bte-media::after,
.bte-carousel__slide:hover .bte-media::after {
	opacity: 0;
}

.bte-image-caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 14px 18px;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .02em;
	background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
	opacity: 0;
	transition: opacity .3s ease;
	z-index: 1;
}
.bte-image-link:hover .bte-image-caption,
.bte-video-link:hover .bte-image-caption,
.bte-card--gallery:hover .bte-image-caption { opacity: 1; }

/* Reusable "meta info" style — date, place, tags, etc. Space Mono, small. */
.bte-meta {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .03em;
	opacity: .75;
}

/* video play icon */
.bte-play-icon {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	transition: transform .25s ease;
	z-index: 1;
}
.bte-video-link:hover .bte-play-icon { transform: translate(-50%, -50%) scale(1.1); }

/* =========================================================
   Gallery carousel (autoplay, loop)
   ========================================================= */
.bte-card--gallery { background: var(--bte-ink); }
.bte-carousel__track { height: 100%; width: 100%; position: relative; }
.bte-carousel__slide {
	position: absolute; inset: 0;
	opacity: 0;
	transition: opacity .8s ease;
	pointer-events: none;
}
.bte-carousel__slide.is-active { opacity: 1; pointer-events: auto; }
.bte-carousel__count {
	position: absolute; top: 12px; right: 14px;
	font-family: var(--font-mono);
	font-size: 11px; letter-spacing: .03em; text-transform: uppercase;
	background: rgba(0,0,0,.5); padding: 4px 8px; z-index: 2;
}

/* =========================================================
   Lightbox inline text content (glightbox styles this container)
   ========================================================= */
.bte-lightbox-content { display: none; }
.glightbox-inline-content {
	max-width: 640px;
	margin: 0 auto;
	background: var(--bte-ink);
	color: var(--bte-on-ink);
	padding: 48px;
	font-family: var(--font-sans);
}
.glightbox-inline-content h2 {
	font-family: var(--font-serif);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .02em;
	font-size: 30px;
	margin-top: 0;
}

/* =========================================================
   Footer
   ========================================================= */
.bte-footer {
	text-align: center;
	padding: 30px;
	font-size: 12px;
	opacity: .6;
}