/* Outside Adventures - Umbrella discoverability styles.
   v7 (22 May 2026): Author byline portrait + About-page author bio block
   for the E-E-A-T uplift. Adds .post-byline .av-photo (circular image avatar
   that replaces the initial-bubble) and .author-bio (portrait + bio side-by-
   side on desktop, stacked on mobile). Existing v6 styles preserved as-is.
   Versioned via filename; bump v7 -> v8 on each meaningful change. */

/* ============ Region page — "Activity guides for this region" ============ */

.region-umbrellas {
	background: var(--cream);
	padding: 56px 0;
	border-top: 1px solid rgba(19,19,19,.06);
}

.region-umbrellas .ru-eyebrow {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--muted);
	text-transform: uppercase;
	margin-bottom: 12px;
}

.region-umbrellas .ru-heading {
	font-family: 'Bricolage Grotesque', 'Manrope', serif;
	font-size: 32px;
	line-height: 1.15;
	font-weight: 600;
	margin: 0 0 28px;
	color: var(--ink);
}

.region-umbrellas .ru-heading em {
	font-style: italic;
	color: var(--yellow);
	font-weight: 600;
}

@media (max-width: 540px) {
	.region-umbrellas { padding: 40px 0; }
	.region-umbrellas .ru-heading { font-size: 24px; }
}

.region-umbrellas .ru-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
}

.region-umbrellas .ru-card {
	background: var(--paper);
	border-radius: 10px;
	padding: 18px 20px;
	text-decoration: none;
	color: var(--ink);
	display: block;
	position: relative;
	transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
	border: 1px solid rgba(19,19,19,.06);
}

.region-umbrellas .ru-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px -10px rgba(19,19,19,.18);
	background: #fff;
}

.region-umbrellas .ru-card-activity {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.08em;
	color: var(--muted);
	text-transform: uppercase;
	margin-bottom: 8px;
}

.region-umbrellas .ru-card-title {
	font-family: 'Bricolage Grotesque', 'Manrope', serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
	color: var(--ink);
	padding-right: 24px;
}

.region-umbrellas .ru-card-arrow {
	position: absolute;
	right: 16px;
	bottom: 16px;
	color: var(--blue);
	font-size: 18px;
	transition: transform 0.15s;
}

.region-umbrellas .ru-card:hover .ru-card-arrow {
	transform: translateX(4px);
}

/* ============ Spot page — "Part of:" back-link ============ */

.page-head .ph-part-of {
	margin-top: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.page-head .ph-part-of-label {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.08em;
	color: rgba(255,255,255,.7);
	text-transform: uppercase;
}

.page-head .ph-part-of-link {
	font-family: 'Manrope', sans-serif;
	font-size: 13px;
	color: var(--cream);
	text-decoration: none;
	padding: 5px 10px;
	border: 1px solid rgba(255,255,255,.25);
	border-radius: 999px;
	transition: background 0.15s, border-color 0.15s;
}

.page-head .ph-part-of-link:hover {
	background: rgba(255,255,255,.08);
	border-color: rgba(255,255,255,.45);
}

.page-head .ph-part-of-sep {
	color: rgba(255,255,255,.4);
	font-size: 10px;
}

/* ============ Footer — 5-column grid override ============ */
footer.site .foot-grid.foot-grid-5 {
	grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
}
@media (max-width: 1024px) {
	footer.site .foot-grid.foot-grid-5 {
		grid-template-columns: 1fr 1fr 1fr;
	}
	footer.site .foot-grid.foot-grid-5 .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 880px) {
	footer.site .foot-grid.foot-grid-5 {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 540px) {
	footer.site .foot-grid.foot-grid-5 {
		grid-template-columns: 1fr;
	}
}

/* ============ Single post — single-column override ============ */
.article-layout.single-col {
	display: block;
	max-width: 760px;
	margin: 0 auto;
	padding: 0 28px;
}
@media (max-width: 820px) {
	.article-layout.single-col { padding: 0 18px; }
}

/* ============ Em colour belt-and-braces ============ */
.blog-hero h1 em,
.post-hero h1 em,
.contact-intro h1 em,
.not-found h1 em,
.cat-faq-heading em,
.cat-empty h2 em,
.umbrella-spots-heading em {
	color: var(--yellow) !important;
}

/* ============ Umbrella FAQ — visible rendering ============ */
.umbrella-faq {
	background: var(--paper);
	padding: 80px 0;
	border-top: 1px solid rgba(19,19,19,.06);
}
@media (max-width: 720px) {
	.umbrella-faq { padding: 56px 0; }
}

.umbrella-faq .uf-eyebrow {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	color: var(--muted);
	text-transform: uppercase;
	margin-bottom: 14px;
}

.umbrella-faq .uf-eyebrow .dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--yellow);
	margin-right: 10px;
	vertical-align: 2px;
}

.umbrella-faq .uf-heading {
	font-family: 'Bricolage Grotesque', 'Manrope', serif;
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 40px;
	color: var(--ink);
	max-width: 22ch;
}

.umbrella-faq .uf-heading em {
	font-style: italic;
	font-weight: 500;
	color: var(--yellow);
}

.umbrella-faq .uf-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px 56px;
}
@media (max-width: 820px) {
	.umbrella-faq .uf-list { grid-template-columns: 1fr; gap: 32px; }
}

.umbrella-faq .uf-row h3 {
	font-family: 'Bricolage Grotesque', 'Manrope', serif;
	font-size: 20px;
	line-height: 1.25;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 12px;
}

.umbrella-faq .uf-row p {
	font-family: 'Manrope', sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0;
}

/* ============================================================
   CTA BUTTON SYSTEM — refinements (v6)
   ============================================================
   The brand-v6.css base styles for .btn / .btn.alt / .btn.ghost /
   .btn.ghost.on-dark are kept exactly as-is so existing markup keeps
   rendering. This block tightens the system into two intentional tiers:
     PRIMARY  → .btn (ink), .btn.alt (yellow)
     SECONDARY → .btn.ghost (light), .btn.ghost.on-dark (dark)
   plus a small label-style modifier for mono-caps button text.
   ============================================================ */

/* Tier 1 — primary CTA: slightly more presence than v5 base */
.btn {
	padding: 15px 24px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.005em;
	line-height: 1.2;
	gap: 10px;
	transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease,
	            box-shadow 0.2s ease, border-color 0.2s ease;
}
.btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -16px rgba(8,15,25,.45);
}
.btn:focus-visible {
	outline: 2px solid var(--yellow);
	outline-offset: 3px;
}

/* .btn.alt = yellow primary; same weight as .btn so they read as siblings */
.btn.alt:hover {
	background: var(--ink);
	color: var(--yellow);
}

/* Tier 2 — secondary CTA: outlined, lighter weight than primary */
.btn.ghost {
	padding: 14px 22px;
	font-weight: 600;
	border-width: 1.5px;
}
.btn.ghost:focus-visible {
	outline: 2px solid var(--yellow);
	outline-offset: 3px;
}
.btn.ghost.on-dark {
	border-color: rgba(255,255,255,.55);
	color: #fff;
}
.btn.ghost.on-dark:hover {
	background: #fff;
	color: var(--ink);
	border-color: #fff;
}

/* Optional modifier — mono-caps button label for "system" actions
   (Submit a trip report, etc.). Apply as <a class="btn label-mono"> */
.btn.label-mono {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
}

/* .arrow-btn — circular icon; same hover lift as primary CTAs for consistency */
.arrow-btn {
	transition: background 0.2s ease, transform 0.2s ease;
}
.arrow-btn:hover {
	transform: translate(2px,-3px);
	box-shadow: 0 10px 20px -12px rgba(8,15,25,.45);
}

/* Mobile — secondary CTAs in stacked rows shouldn't grow their padding */
@media (max-width: 540px) {
	.btn, .btn.ghost {
		padding: 14px 22px;
		font-size: 14.5px;
	}
}

/* ============================================================
   AUTHOR PORTRAIT — journal byline (v7)
   ============================================================
   Replaces the initial-bubble in .post-byline with a circular portrait
   when OA_AUTHOR_PORTRAIT_URL is defined. theme-v12.css ships the base
   .post-byline + .av styles; this block extends .av with image support.
   ============================================================ */

.post-byline .av.av-photo {
	background: transparent;
	padding: 0;
	overflow: hidden;
	display: block;
}
.post-byline .av.av-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Keep Tom's face (positioned right-of-centre in the source photo) and
	   the mountain backdrop both in the frame for small circular crops. */
	object-position: 65% 40%;
	display: block;
	border-radius: 50%;
}

.post-byline .when a.byline-about-link {
	color: var(--muted);
	text-decoration: none;
	border-bottom: 1px dotted var(--muted);
	transition: color 0.15s, border-color 0.15s;
}
.post-byline .when a.byline-about-link:hover {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

/* ============================================================
   ABOUT PAGE — author bio block (v7)
   ============================================================
   Portrait + multi-paragraph bio. Side-by-side on desktop (portrait
   left, bio right), stacked on mobile. The portrait shows the full
   frame at 16:9 so the Kilimanjaro backdrop reads as the
   visual credibility anchor — small circular crop on byline is the
   utility size; this is the credibility size.
   ============================================================ */

.author-bio {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 40px;
	align-items: start;
}
@media (max-width: 820px) {
	.author-bio { grid-template-columns: 1fr; gap: 24px; }
}

.author-bio-portrait {
	border-radius: 14px;
	overflow: hidden;
	background: var(--paper);
	border: 1px solid rgba(19,19,19,.08);
}
.author-bio-portrait img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	object-position: 65% 40%;
}
@media (max-width: 820px) {
	.author-bio-portrait { max-width: 360px; margin: 0 auto 8px; }
}

.author-bio-name {
	font-family: 'Bricolage Grotesque', 'Manrope', serif;
	font-size: 22px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 18px;
	line-height: 1.2;
}
.author-bio-name .author-bio-role {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 500;
	margin-left: 6px;
}

.author-bio-body p {
	font-family: 'Manrope', sans-serif;
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink-2);
	margin: 0 0 14px;
}
.author-bio-body p:last-child { margin-bottom: 0; }