/*!
 * entorn.css
 *
 * Plantilla d'Entorn — pages /entorn/* i /activitats/.
 * Implementa el design "Plantilla entorn (standalone).html" del handoff
 * de Design 2026-05-21. Estructura en 5 blocs:
 *   1. Hero B (variant kicker categorial)
 *   2. Intro 640px alineat a l'esquerra (peça editorial, no fitxa)
 *   3. Tabs de navegació d'entorn (3 pestanyes)
 *   4. Llistat d'items (foto+text alternat)
 *   5. CTA final amb btn-primari
 *
 * Decisions del manual:
 *   §06 Hero B (sense widget) · overlay 28%
 *   §07 Intro amb regla actualitzada per entorn (640px L-aligned)
 *   §07 Bloc d'item amb foto+text alternat
 *   §07 Bloc CTA amb copy de tancament
 *   §08 Component de presència — NO s'usa en aquesta plantilla
 *   §09 Sistema de botons — btn-primari/fletxa per a CTA final
 *
 * Mobile-first: una columna sempre; expansió a 2 cols ≥880px (item).
 * Tipografia: Playfair (titulars) + Jost (cos, kickers, tabs).
 * Verd funcional #03693A per a kickers, links, tabs, active.
 * Verd marca #3EA534 per a accent (línia després kicker, underline tab).
 */

/* ═════════════════════════════════════════════════════
   HERO B — kicker categorial
   Padding, min-height i background es controlen des dels
   ajustos del bloc Kadence Row Layout. Aquí només estils
   de tipografia per al kicker i el títol.
   ═════════════════════════════════════════════════════ */
.er-env-hero__kicker {
	font-family: 'Jost', sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #D6E4C2;
	margin: 0 0 1rem;
}
.er-env-hero__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 600;
	font-size: clamp(2rem, 6vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: -0.015em;
	color: #FBF9F4;
	max-width: 18ch;
	text-wrap: balance;
	margin: 0;
}

/* ═════════════════════════════════════════════════════
   INTRO — 640px alineat a l'esquerra (editorial)
   Padding controlat des dels ajustos del bloc.
   ═════════════════════════════════════════════════════ */
.er-env-intro__inner {
	max-width: 640px;
	/* alineat a l'esquerra del container — NO centrat */
}
.er-env-intro__kicker {
	font-family: 'Jost', sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #03693A;
	margin: 0 0 1rem;
}
.er-env-intro__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 600;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #2A2520;
	margin: 0 0 1.5rem;
	text-wrap: balance;
}
.er-env-intro__lead {
	font-size: 1.05rem;
	color: #2A2520;
	line-height: 1.65;
	text-wrap: pretty;
	margin: 0;
}

/* ═════════════════════════════════════════════════════
   TABS DE NAVEGACIÓ D'ENTORN
   Tres pestanyes alineades a l'esquerra al content area.
   Sense fons, sense contenidor explícit. Hairline 1px
   #E3DCCF sota el conjunt que travessa tot el content
   area (1400px, igual que els row layouts alignfull del
   tema). La pestanya activa té un underline gruix 3px
   en verd funcional #03693A que es sobreposa a la
   hairline al tram del seu text. Resultat: separador
   subtil que cus les tabs, sense ombres.
   ═════════════════════════════════════════════════════ */
.er-env-tabs {
	/* Full-width — surt del container del .entry-content perquè quedi
	   alineat amb els row layouts alignfull del intro i del listing.
	   Equivalent a com el bloc HTML wp es comportaria amb align:full. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.er-env-tabs__inner {
	/* Content area = global-content-width del tema (1400px Kadence)
	   amb el mateix padding lateral (24px) que els row layouts. Així
	   els tabs alineen amb el edge intern del content area, igual que
	   l'intro i els items. */
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 var(--global-content-edge-padding, 24px);
	display: flex;
	gap: 2.5rem;
	overflow-x: auto;
	scrollbar-width: none;
	border-bottom: 1px solid #E3DCCF;
}
.er-env-tabs__inner::-webkit-scrollbar { display: none; }
.er-env-tab {
	display: inline-flex;
	align-items: center;
	padding: 1.5rem 0;
	font-family: 'Jost', sans-serif;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #03693A;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	transition: color 0.15s, border-color 0.15s;
	margin-bottom: -1px; /* solapa la hairline del __inner */
}
.er-env-tab:hover { color: #2A2520; }
.er-env-tab[aria-current="page"] {
	color: #2A2520;
	font-weight: 600;
	border-bottom-color: #03693A;
}

/* ═════════════════════════════════════════════════════
   LLISTAT D'ITEMS — foto + text alternat
   Padding del wrapper controlat des dels ajustos del bloc.
   ═════════════════════════════════════════════════════ */
/* Item = Kadence Row Layout amb 2 columnes. El HTML té el body com a
   primera columna i la photo com a segona → l'item 1 (impar) queda
   text-esquerra/foto-dreta de forma natural. Els items parells
   inverteixen amb row-reverse → foto-esquerra/text-dreta.

   Selector: passa per dins del .kt-inside-inner-col que Kadence Column
   afegeix com a wrapper intermig entre la columna i els seus fills. */
.er-env-listing__items .kt-inside-inner-col > .er-env-item + .er-env-item {
	margin-top: 4rem;
}
@media (min-width: 880px) {
	.er-env-listing__items .kt-inside-inner-col > .er-env-item + .er-env-item {
		margin-top: 6rem;
	}
	.er-env-listing__items .kt-inside-inner-col > .er-env-item .kt-row-column-wrap {
		align-items: center;
	}
	.er-env-listing__items .kt-inside-inner-col > .er-env-item:nth-child(even) .kt-row-column-wrap {
		flex-direction: row-reverse;
	}
	/* Alinear el body amb el edge del content area:
	   - Item impar (body a l'esquerra): padding-left=0, padding-right=32
	     perquè el text comenci al mateix edge que els tabs i l'intro,
	     mantenint el respir entre body i foto.
	   - Item par (body a la dreta): padding-left=32, padding-right=0
	     simètric — el text acaba al edge dret del content area. */
	.er-env-listing__items .kt-inside-inner-col > .er-env-item .er-env-item__body > .kt-inside-inner-col {
		padding-left: 0;
		padding-right: 2rem;
	}
	.er-env-listing__items .kt-inside-inner-col > .er-env-item:nth-child(even) .er-env-item__body > .kt-inside-inner-col {
		padding-left: 2rem;
		padding-right: 0;
	}
}

/* Variant monogràfica: blocs text+imatge densos (com a /vall-de-nuria/,
   /setcases/). Gap reduït — --sp-4 mobile, --sp-5 desktop. */
.er-env-listing--monographic .er-env-listing__items .kt-inside-inner-col > .er-env-item + .er-env-item {
	margin-top: 2.5rem;
}
@media (min-width: 880px) {
	.er-env-listing--monographic .er-env-listing__items .kt-inside-inner-col > .er-env-item + .er-env-item {
		margin-top: 4rem;
	}
}
.er-env-item__photo {
	position: relative;
	aspect-ratio: 4 / 3;
	background-color: #2A2520;
	overflow: hidden;
}
/* Kadence Column aplica el background-image al .kt-inside-inner-col
   intern, no al wrapper exterior. Forçant-lo a omplir el wrapper
   exterior (que té aspect-ratio), la imatge de fons es veu. */
.er-env-item__photo > .kt-inside-inner-col {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
.er-env-item__body {
	padding: 1rem 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 48ch;
}
.er-env-item__kicker {
	font-family: 'Jost', sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #03693A;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
}
.er-env-item__kicker::after {
	content: "";
	display: inline-block;
	width: 1.5rem;
	height: 1px;
	background: #3EA534;
}
.er-env-item__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 600;
	font-size: clamp(1.5rem, 3vw, 1.9rem);
	line-height: 1.15;
	letter-spacing: -0.005em;
	color: #2A2520;
	text-wrap: balance;
	margin: 0;
}
.er-env-item__desc {
	font-size: 1rem;
	line-height: 1.65;
	color: #2A2520;
	text-wrap: pretty;
	margin: 0;
}
.er-env-item__link {
	align-self: flex-start;
	margin-top: 0.3rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: 'Jost', sans-serif;
	font-size: 0.95rem;
	font-weight: 500;
	color: #03693A;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	transition: gap 0.15s;
}
.er-env-item__link::after {
	content: "→";
	display: inline-block;
	transition: transform 0.15s;
}
.er-env-item__link:hover { color: #2A2520; }
.er-env-item__link:hover::after { transform: translateX(3px); }

/* ═════════════════════════════════════════════════════
   CTA FINAL — pregunta de tancament + btn-primari
   Padding controlat des dels ajustos del bloc.
   ═════════════════════════════════════════════════════ */
.er-env-cta__text { max-width: 48ch; }
.er-env-cta__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 600;
	font-size: clamp(1.5rem, 3vw, 1.9rem);
	line-height: 1.15;
	letter-spacing: -0.005em;
	color: #2A2520;
	margin: 0 0 0.4rem;
	text-wrap: balance;
}
.er-env-cta__lead {
	color: #6B6258;
	font-size: 0.98rem;
	margin: 0;
}

/* Placeholders de foto retirats — quan el client puja una imatge
   al Kadence Column de la photo, aquesta gana al color fallback
   #2A2520 de .er-env-item__photo. Sense gradients que tapin. */


/* ═════════════════════════════════════════════════════
   PROVA DE PATRÓ — Grid de rutes (/entorn/natura-v2/)
   Reemplaça el llistat alternat per un grid de tarjetes
   inspirat en hotelyellowstonejh.com/activities/.
   Component aïllat amb namespace propi (.er-rutes-grid /
   .ruta-card / .breadcrumb-v2) per no afectar la versió
   actual del bloc entorn.
   ═════════════════════════════════════════════════════ */
.breadcrumb-v2 {
	font-family: 'Jost', sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: #5B6B47;
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
.breadcrumb-v2 a {
	color: #5B6B47;
	text-decoration: none;
	transition: color 0.2s;
}
.breadcrumb-v2 a:hover {
	color: #03693A;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.breadcrumb-v2 .separator {
	font-size: 13px;
	opacity: 0.6;
}
.breadcrumb-v2 .current {
	color: #2A2520;
	font-weight: 600;
}

/* Wrapper de secció — el grid el proveeix Kadence Row Layout amb
   columns:4 + customGutter. .er-rutes-grid només acota max-width. */
.er-rutes-grid {
	max-width: 1400px;
	margin: 0 auto;
}
/* Espai vertical entre files de cards. Kadence renderitza cada fila com
   un .kb-row-layout-wrap independent; falta gap entre files. */
.er-rutes-grid .kt-inside-inner-col > .kb-row-layout-wrap + .kb-row-layout-wrap {
	margin-top: 40px;
}
@media (max-width: 1199px) {
	.er-rutes-grid .kt-inside-inner-col > .kb-row-layout-wrap + .kb-row-layout-wrap {
		margin-top: 32px;
	}
}
@media (max-width: 767px) {
	.er-rutes-grid .kt-inside-inner-col > .kb-row-layout-wrap + .kb-row-layout-wrap {
		margin-top: 24px;
	}
}

/* ───── Card (Kadence COLUMN amb className "ruta-card") ─────
   Ara .ruta-card és el wp-block-kadence-column outer wrap. Dins
   d'aquest, .kt-inside-inner-col conté figure + body. La card ocupa
   100% de l'ample i alçada del slot que li dona la Kadence Row Layout
   4-col, així que respira tant a frontend com a editor. */
.ruta-card {
	background: #F5EFE3;
	overflow: hidden;
	border-radius: 4px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ruta-card > .kt-inside-inner-col {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: 0 !important;
}
.ruta-card .wp-block-image {
	margin: 0;
}
/* Cards buides — no estil de targeta, només mantenen el slot al grid. */
.ruta-card--empty {
	background: transparent;
}
.ruta-card--link {
	text-decoration: none;
	color: inherit;
}
.ruta-card--link:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 20px rgba(42, 37, 32, 0.08);
}

/* Media: figure (wp:image) o div (wp:group placeholder). Mateix tractament:
   aspect-ratio 16/10, sense margin, gradient verd si no hi ha imatge. */
.ruta-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: linear-gradient(155deg, #6B7E64 0%, #2E3A2A 100%);
	margin: 0;
	flex-shrink: 0;
}
.ruta-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
	display: block;
}
.ruta-card--link:hover .ruta-card__media img {
	transform: scale(1.03);
}

/* Body: padding equilibrat (16 top, 18 lat, 22 bottom — més aire a sota
   perquè el link respiri). Espaiats interns via margin explícit, NO gap,
   per controlar amb precisió cada salt. */
.ruta-card__body {
	padding: 18px 20px 22px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.ruta-card__body > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.ruta-card__kicker {
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #03693A;
	margin: 0;
}
.ruta-card__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 22px;
	font-weight: 600;
	color: #2A2520;
	line-height: 1.2;
	margin: 6px 0 0;
}
@media (min-width: 768px) and (max-width: 1199px) {
	.ruta-card__title { font-size: 20px; }
}
.ruta-card__lead {
	font-family: 'Jost', sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: rgba(42, 37, 32, 0.8);
	line-height: 1.5;
	margin: 10px 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ruta-card__link {
	margin: auto 0 0;
	padding-top: 14px;
	font-family: 'Jost', sans-serif;
	font-size: 14px;
	font-weight: 500;
}
.ruta-card__link a {
	color: #03693A;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	transition: color 0.2s ease;
}
.ruta-card__link a:hover {
	color: #3EA534;
}
.ruta-card__data {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
}
.ruta-card__data li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'Jost', sans-serif;
	font-size: 12px;
	font-weight: 500;
	color: rgba(42, 37, 32, 0.7);
	margin: 0;
}
.ruta-card__data svg {
	width: 16px;
	height: 16px;
	stroke: #03693A;
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}