/* ═══════════════════════════════════════════════════════
   TETON TROUTFITTERS — ABOUT PAGE CSS
   Scoped with .tt- prefix. No global overrides.
   Loaded conditionally on the About page only.
   ═══════════════════════════════════════════════════════ */


/* ── Hero Overlay ─────────────────────────────────────── */

.tt-about-hero {
	position: relative;
}

.tt-about-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(7, 15, 26, 0.92) 0%,
		rgba(7, 15, 26, 0.40) 55%,
		rgba(7, 15, 26, 0.15) 100%
	);
	pointer-events: none;
	z-index: 1;
}

.tt-about-hero .elementor-column {
	z-index: 2;
}


/* ── Hero Stat Separators ─────────────────────────────── */

.tt-hero-stat + .tt-hero-stat {
	border-left: 0.03125rem solid rgba(255, 255, 255, 0.12);
	padding-left: 2rem;
}


/* ── Section Label with Line ──────────────────────────── */

.tt-sec-label {
	font-family: var(--tt-font-body);
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tt-teal-accent);
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-bottom: 0.75rem;
}

.tt-sec-label::after {
	content: '';
	flex: 1;
	height: 0.03125rem;
	background: var(--tt-cream-dark);
}

.tt-sec-label--light::after {
	background: rgba(255, 255, 255, 0.08);
}


/* ── Milestone Timeline ───────────────────────────────── */

.tt-timeline-col {
	padding: 1.25rem 1.5rem;
	border-right: 0.03125rem solid var(--tt-cream-dark);
	position: relative;
}

.tt-timeline-col:last-child {
	border-right: none;
}

.tt-timeline-col::before {
	content: '';
	position: absolute;
	top: 0;
	left: 1.5rem;
	width: 0.5rem;
	height: 0.1875rem;
	background: var(--tt-gold);
}


/* ── Permitted Water Cards ────────────────────────────── */

.tt-water-card {
	border-top: 0.1875rem solid var(--tt-teal-accent);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.tt-water-card--featured {
	border-top-color: var(--tt-gold);
}


/* ── Guide Team Cards ─────────────────────────────────── */

.tt-guide-card__img {
	position: relative;
	overflow: hidden;
	background: var(--tt-navy-mid);
	height: 12rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tt-guide-avatar {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--tt-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--tt-font-body);
	font-weight: 700;
	font-size: 1rem;
	color: var(--tt-cream);
}

.tt-guide-avatar--owner {
	border: 0.125rem solid var(--tt-gold);
}

.tt-guide-avatar--head {
	border: 0.125rem solid var(--tt-teal-accent);
}

.tt-guide-avatar--default {
	border: 0.125rem solid rgba(255, 255, 255, 0.2);
}

.tt-guide-badge {
	position: absolute;
	bottom: 0.5rem;
	left: 0.5rem;
	font-family: var(--tt-font-body);
	font-weight: 700;
	font-size: 0.5rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.125rem 0.375rem;
	border-radius: 0.125rem;
}

.tt-guide-badge--owner {
	background: var(--tt-gold);
	color: var(--tt-navy-dark);
}

.tt-guide-badge--head {
	background: var(--tt-teal-accent);
	color: var(--tt-cream);
}

.tt-guide-avatar--lead {
	border: 0.125rem solid var(--tt-teal-accent);
}

.tt-guide-badge--lead {
	background: var(--tt-teal-accent);
	color: var(--tt-cream);
}


/* ── Guide Grid: 5-up desktop, 3-up tablet, 1-up mobile ─ */

.tt-guide-grid > .elementor-element {
	flex: 0 0 calc(20% - 0.8rem);
	max-width: calc(20% - 0.8rem);
}

@media (max-width: 64rem) {
	.tt-guide-grid > .elementor-element {
		flex: 0 0 calc(33.333% - 0.667rem);
		max-width: calc(33.333% - 0.667rem);
	}
}

@media (max-width: 48rem) {
	.tt-guide-grid > .elementor-element {
		flex: 0 0 100%;
		max-width: 100%;
	}
}


/* ── Guide Grid (shortcode renderer — live from CPT) ──── */

.tt-guide-grid--shortcode {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1rem;
	width: 100%;
}

@media (max-width: 64rem) {
	.tt-guide-grid--shortcode {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 48rem) {
	.tt-guide-grid--shortcode {
		grid-template-columns: 1fr;
	}
}

.tt-guide-card {
	background: #FFFFFF;
	border: 0.0625rem solid var(--tt-cream-dark);
	border-radius: 0.5rem;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.tt-guide-card .tt-guide-card__img {
	background-size: cover;
	background-position: center;
}

.tt-guide-card__body {
	padding: 0.875rem;
	display: flex;
	flex-direction: column;
}

.tt-guide-card__name {
	font-family: var(--tt-font-body);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--tt-navy);
	margin-bottom: 0.125rem;
}

.tt-guide-card__role {
	font-family: var(--tt-font-body);
	font-weight: 400;
	font-size: 0.5625rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tt-teal-accent);
	margin-bottom: 0.5rem;
}

.tt-guide-card__bio {
	font-family: 'Lora', Georgia, serif;
	font-weight: 400;
	font-size: 0.6875rem;
	line-height: 1.6;
	color: #7a7265;
}


/* ── Conservation Principle Cards ─────────────────────── */

.tt-principle {
	background: rgba(255, 255, 255, 0.04);
	border: 0.03125rem solid rgba(255, 255, 255, 0.08);
	border-radius: 0.375rem;
	padding: 0.875rem;
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
}

.tt-principle__num {
	font-family: Lora, Georgia, serif;
	font-size: 1.125rem;
	color: var(--tt-gold);
	flex-shrink: 0;
	width: 1.5rem;
	text-align: right;
}


/* ── Riverbend Project Stat Cards ─────────────────────── */

.tt-rb-stat {
	background: rgba(255, 255, 255, 0.12);
	border-radius: 0.375rem;
	padding: 1.25rem;
}


/* ── Responsive ───────────────────────────────────────── */

@media (max-width: 48rem) {
	.tt-about-hero__stats { gap: 0.5rem 1.5rem; }
	.tt-hero-stat + .tt-hero-stat { border-left: none; padding-left: 0; }
}


/* ── Clickable guide card (drawer trigger) ─────────────── */

.tt-guide-card[role="button"] {
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.tt-guide-card[role="button"]:hover {
	transform: translateY(-0.1875rem);
	box-shadow: 0 0.625rem 1.25rem rgba(11, 26, 44, 0.12);
	border-color: var(--tt-gold);
}

.tt-guide-card[role="button"]:focus-visible {
	outline: 0.125rem solid var(--tt-gold);
	outline-offset: 0.1875rem;
}


/* ── Drawer + Backdrop ────────────────────────────────── */
/* Moved to tt-guides/guide-drawer.css (enqueued globally). */


/* ═══════════════════════════════════════════════════════
   ABOUT — SECTION LAYOUT (native template, post-Elementor)
   Added Phase 3. Uses navy design tokens.
   ═══════════════════════════════════════════════════════ */

.tt-about { display: block; }
.tt-about__section { padding: clamp(2.75rem, 6vw, 4.75rem) 1.5rem; }
.tt-about__section--tight { padding-top: 0; }
.tt-about__section--cream      { background: var(--tt-page-bg); color: var(--tt-text); }
.tt-about__section--section-bg { background: var(--tt-section-bg); color: var(--tt-text); }
.tt-about__section--dark       { background: var(--tt-navy); color: var(--tt-cream); }

.tt-about__inner { max-width: 1180px; margin: 0 auto; }

/* Typography */
.tt-about__section p {
	font-family: var(--tt-font-body);
	font-size: 0.9375rem;
	line-height: 1.75;
	margin: 0 0 1rem;
}
.tt-about__section--dark p { color: rgba(242, 237, 226, 0.82); }
.tt-about__h2 {
	font-family: var(--tt-font-heading);
	font-weight: 600;
	font-size: clamp(1.6rem, 3.5vw, 2.25rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 1rem;
	color: var(--tt-navy);
	text-wrap: balance;
}
.tt-about__section--dark .tt-about__h2 { color: var(--tt-cream); }
.tt-about__intro { max-width: 60ch; font-size: 1.0625rem; color: var(--tt-text-muted); margin-bottom: 2rem; }
.tt-about__section--dark .tt-about__intro { color: rgba(242, 237, 226, 0.7); }

/* Hero */
.tt-about-hero {
	background-size: cover;
	background-position: center;
	color: var(--tt-cream);
	padding-top: clamp(4rem, 12vw, 8rem);
	padding-bottom: clamp(2.75rem, 6vw, 4.5rem);
}
.tt-about-hero__inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; }
.tt-about-hero__title {
	font-family: var(--tt-font-display);
	font-weight: 400;
	font-size: clamp(2.1rem, 6vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: #fff;
	margin: 0.5rem 0 1rem;
	max-width: 18ch;
	text-wrap: balance;
}
.tt-about-hero__lede { max-width: 52ch; font-size: 1.0625rem; color: rgba(242, 237, 226, 0.9); margin-bottom: 2.25rem; }
.tt-about-hero__stats { display: flex; flex-wrap: wrap; gap: 0; }
.tt-hero-stat { display: flex; flex-direction: column; padding-right: 2rem; }
.tt-hero-stat__num {
	font-family: var(--tt-font-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--tt-gold);
	line-height: 1;
}
.tt-hero-stat__label {
	font-family: var(--tt-font-body);
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(242, 237, 226, 0.6);
	margin-top: 0.4rem;
}

/* Split text + media */
.tt-about__split { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.tt-about__split--reverse .tt-about__split-media { order: -1; }
.tt-about__split-text p:last-child { margin-bottom: 0; }
.tt-about__split-media img { width: 100%; height: 100%; max-height: 30rem; object-fit: cover; border-radius: 0.5rem; display: block; }

/* Pull quote */
.tt-about__quote {
	margin: 1.75rem 0 0;
	padding: 1rem 0 0 1.25rem;
	border-left: 0.1875rem solid var(--tt-gold);
	font-family: var(--tt-font-display);
	font-size: 1.25rem;
	line-height: 1.5;
	color: var(--tt-navy);
}
.tt-about__quote cite {
	display: block;
	margin-top: 0.75rem;
	font-family: var(--tt-font-body);
	font-style: normal;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tt-text-muted);
}

/* Timeline */
.tt-about__timeline { display: grid; grid-template-columns: repeat(5, 1fr); }
.tt-timeline-col__year { display: block; font-family: var(--tt-font-display); font-size: 1.5rem; color: var(--tt-navy); margin-bottom: 0.15rem; }
.tt-timeline-col__title { display: block; font-family: var(--tt-font-body); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tt-teal-accent); margin-bottom: 0.5rem; }
.tt-timeline-col p { font-size: 0.8125rem; line-height: 1.6; color: var(--tt-text-muted); margin: 0; }

/* Water cards */
.tt-about__waters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.tt-water-card { position: relative; background: #fff; border: 0.0625rem solid var(--tt-cream-dark); border-radius: 0.5rem; padding: 1.125rem; display: flex; flex-direction: column; }
.tt-water-card__badge { align-self: flex-start; font-family: var(--tt-font-body); font-weight: 700; font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.125rem 0.375rem; border-radius: 0.125rem; margin-bottom: 0.6rem; }
.tt-water-card__badge--gold { color: var(--tt-navy-dark); background: var(--tt-gold); }
.tt-water-card__badge--teal { color: var(--tt-cream); background: var(--tt-teal-accent); }
.tt-water-card__region { font-family: var(--tt-font-body); font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tt-teal-accent); margin-bottom: 0.3rem; }
.tt-water-card__name { font-family: var(--tt-font-heading); font-weight: 600; font-size: 1rem; color: var(--tt-navy); margin: 0 0 0.5rem; }
.tt-water-card p { font-size: 0.75rem; line-height: 1.55; color: var(--tt-text-muted); margin: 0; }

/* Conservation principles */
.tt-about__principles { display: grid; gap: 0.75rem; }
.tt-principle__title { font-family: var(--tt-font-body); font-weight: 600; font-size: 0.75rem; color: var(--tt-cream); margin-bottom: 0.25rem; }
.tt-principle__desc { font-family: var(--tt-font-body); font-size: 0.6875rem; line-height: 1.6; color: rgba(242, 237, 226, 0.55); }

/* Riverbend stat cards */
.tt-about__rb-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-top: 1.75rem; }
.tt-rb-stat__num { display: block; font-family: var(--tt-font-display); font-size: 1.5rem; color: var(--tt-gold); line-height: 1; }
.tt-rb-stat__label { display: block; font-family: var(--tt-font-body); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tt-cream); margin: 0.35rem 0 0.4rem; }
.tt-rb-stat p { font-size: 0.6875rem; line-height: 1.55; color: rgba(242, 237, 226, 0.6); margin: 0; }

/* Safety cards */
.tt-about__safety { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.tt-safety-card { background: #fff; border: 0.0625rem solid var(--tt-cream-dark); border-radius: 0.5rem; padding: 1.5rem; }
.tt-safety__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--tt-section-bg); border: 1px solid var(--tt-cream-dark); color: var(--tt-teal-accent); margin-bottom: 0.875rem; }
.tt-safety-card__title { font-family: var(--tt-font-heading); font-weight: 600; font-size: 1rem; color: var(--tt-navy); margin: 0 0 0.5rem; }
.tt-safety-card p { font-size: 0.8125rem; line-height: 1.6; color: var(--tt-text-muted); margin: 0; }

/* Buttons: canonical .tt-btn / --primary / --secondary — see tt-design-system/buttons.css */
.tt-about__quote + .tt-btn, .tt-about__split-text > .tt-btn { margin-top: 1.25rem; }

/* CTA */
.tt-about__cta { text-align: center; }
.tt-about__cta .tt-sec-label { justify-content: center; }
.tt-about__cta .tt-sec-label::after { display: none; }
.tt-about__cta-title { max-width: none; }
.tt-about__cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }

/* Responsive */
@media (max-width: 64rem) {
	.tt-about__timeline { grid-template-columns: repeat(3, 1fr); gap: 1.5rem 1.25rem; }
	.tt-about__waters { grid-template-columns: repeat(2, 1fr); }
	.tt-about__safety { grid-template-columns: 1fr; }
	/* Stacked timeline: vertical rules become horizontal dividers */
	.tt-timeline-col { border-right: none; border-bottom: 0.03125rem solid var(--tt-cream-dark); padding: 1.25rem 0 1.25rem 1.5rem; }
	.tt-timeline-col:last-child { border-bottom: none; }
}
@media (max-width: 48rem) {
	.tt-about__split, .tt-about__split--reverse .tt-about__split-media { grid-template-columns: 1fr; order: 0; }
	.tt-about__split { grid-template-columns: 1fr; }
	.tt-about__timeline, .tt-about__waters, .tt-about__rb-stats { grid-template-columns: 1fr; }
}