/* HPHT — editorial.css: editorial-outdoor visual flair.
   Paper textures, topographic line SVG patterns, soft section dividers,
   scroll-fade-in utility, chips/badges. */

/* ───── paper texture utility ─────
   A subtle off-white grain. Use as a background on light sections. */
.paper-bg {
	background-color: var(--c-surface-2);
	background-image:
		radial-gradient(rgba(0,0,0,0.025) 1px, transparent 1px),
		radial-gradient(rgba(0,0,0,0.018) 1px, transparent 1px);
	background-size: 24px 24px, 13px 13px;
	background-position: 0 0, 12px 7px;
}

/* ───── topographic-line pattern ─────
   Inline SVG bg of concentric organic curves, evokes contour lines on a hike
   map. Tinted via currentColor → use `color: …` to tint when needed. */
.topo-bg {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400' preserveAspectRatio='none'><g fill='none' stroke='%231273b5' stroke-width='1' stroke-opacity='0.07'><path d='M-20,200 Q120,140 300,200 T700,200 T1020,200'/><path d='M-20,170 Q120,110 300,170 T700,170 T1020,170'/><path d='M-20,140 Q120,80 300,140 T700,140 T1020,140'/><path d='M-20,230 Q120,170 300,230 T700,230 T1020,230'/><path d='M-20,260 Q120,200 300,260 T700,260 T1020,260'/><path d='M-20,290 Q120,230 300,290 T700,290 T1020,290'/><path d='M-20,320 Q120,260 300,320 T700,320 T1020,320'/></g></svg>");
	background-size: 1200px auto;
	background-position: center;
	background-repeat: repeat;
}

/* SVG section divider — wavy edge */
.section-divider-wave {
	display: block;
	width: 100%;
	height: 48px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0,30 C240,0 480,60 720,30 C960,0 1200,60 1440,30 L1440,60 L0,60 Z' fill='%23ece9d4'/></svg>");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

/* ───── chips / badges ───── */
.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.25em 0.7em;
	border-radius: var(--radius-pill);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.4;
}
.chip--green { background: var(--c-secondary); color: #fff; }
.chip--blue  { background: var(--c-primary);   color: #fff; }
.chip--sand  { background: var(--c-accent);    color: var(--c-ink); }
.chip--terra { background: var(--c-terracotta); color: #fff; }

/* Difficulty chips (TEC event category mapping). */
.chip--difficulty-easy      { background: #4a7a2f; color: #fff; }
.chip--difficulty-moderate  { background: #c79a2a; color: #fff; }
.chip--difficulty-strenuous { background: #c75d35; color: #fff; }
.chip--difficulty-hike      { background: #1273b5; color: #fff; }

/* ───── scroll-fade utility (progressive enhancement) ─────
   Only hides initially when JS is available (html.js). Otherwise content is
   visible from the start so no-JS users see the full page. */
html.js .fade-up:not(.is-in) {
	opacity: 0;
	transform: translateY(16px);
}
.fade-up {
	transition: opacity var(--motion) var(--ease-out),
		transform var(--motion) var(--ease-out);
}
.fade-up.is-in { opacity: 1; transform: none; }

/* ───── month banner — magazine "tab" header ─────
   Bracketed serif label with thin double-rule underneath; sits as a
   centred kicker for the month section. Not a green pill anymore. */
.month-banner {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--ff-display);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.05rem);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-secondary);
	padding: 0.4em 0.2em;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.month-banner::before,
.month-banner::after {
	content: "";
	width: 20px;
	height: 1px;
	background: currentColor;
	opacity: 0.55;
}
.month-banner__wrap {
	text-align: center;
	padding-top: var(--space-10);
	position: relative;
}
.month-banner__wrap::after {
	content: "";
	display: block;
	width: 80%;
	max-width: 720px;
	height: 1px;
	margin: var(--space-3) auto 0;
	background: linear-gradient(90deg,
		transparent 0%,
		var(--c-border-2) 20%,
		var(--c-border-2) 80%,
		transparent 100%);
}

/* ───── animated arrow inside CTA links ───── */
.arrow-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.85rem;
}
.arrow-cta::after {
	content: "›";
	display: inline-block;
	transition: transform var(--motion) var(--ease-out);
}
.arrow-cta:hover::after,
.arrow-cta:focus-visible::after {
	transform: translateX(4px);
}