/* ==========================================================================
   Jetour — About page (page-templates/about.php), view key "about".
   Ported 1:1 from Jetour Core modules/about/assets/css/about-page.css: the
   approved layout, type and motion of page #289 — parallax hero, staggered
   reveals, hover-reveal feature rows (image fades in while the text column
   turns teal), "Born for Travel", a momentum news carousel.
   Fonts/colours/easings come from base.css tokens; reveal + parallax CSS/JS
   are global (app.js) — only the timing is tuned here to the approved values.
   Breakpoints: mobile ≤767 · tablet 768–1024 · desktop ≥1025.
   Every selector is scoped to .jc-about (the <main> of the page).
   ========================================================================== */

/* ------------------------------------------------------------------ *
 * Tokens + resets (page aliases of the theme tokens; the JS reads --jc-peek / --jc-gap)
 * ------------------------------------------------------------------ */
.jc-about {
	--jc-teal: var(--jt-teal);
	--jc-line: var(--jt-line);
	--jc-ink: var(--jt-black);
	--jc-ease: var(--jt-ease);
	--jc-ease-out: var(--jt-ease-out);
	--jc-peek: 25%;
	--jc-gap: 20px;

	display: block;
	width: 100%;
	overflow-x: clip;
	background: var(--jt-bg);
	color: var(--jc-ink);
	font-family: var(--jt-font-sans);
}
.jc-about img { display: block; max-width: 100%; height: auto; border: 0; }
.jc-about h1, .jc-about h2, .jc-about h3, .jc-about p { margin: 0; padding: 0; }
.jc-about a, .jc-about a:hover, .jc-about a:focus, .jc-about a:active, .jc-about a:visited { text-decoration: none; color: inherit; }
.jc-about .jc-ab-prose p { margin: 0 0 0.9em; }
.jc-about .jc-ab-prose p:last-child { margin-bottom: 0; }

/* Reveals: global [data-reveal] (base.css / app.js) with the approved distance and timing */
.jc-about [data-reveal] { transition-duration: 0.9s, 1s; transition-timing-function: var(--jc-ease-out); }
.jc-about [data-reveal="up"] { transform: translate3d(0, 34px, 0); }
.jc-about [data-reveal].is-in { opacity: 1; transform: none; }
.no-js .jc-about [data-reveal] { opacity: 1; transform: none; }

/* Photo layers (hero, travel): an <img> filling the parallax box */
.jc-about .jc-ab-hero__img, .jc-about .jc-ab-travel__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
}

/* ------------------------------------------------------------------ *
 * 1. Hero — full-bleed photograph, centred statement
 * ------------------------------------------------------------------ *
 * Composition follows jetourglobal.com/about at the client's request: the picture carries the
 * whole section, the title is centred and large, and the supporting line is a real paragraph
 * at reading size rather than a caption. The typefaces stay ours (Normalidad for display,
 * Noto Sans Georgian for text) — only the proportions and the air are borrowed.
 *
 * The old version set `font: 900 50px/42px`, a line-height SMALLER than the font size, which
 * made multi-line Georgian headlines collide. Everything here is fluid and leading-safe.
 */
.jc-about .jc-ab-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	margin-top: calc(var(--jt-header-h) * -1);
	/* top padding clears the overlaying header; the rest is deliberately generous */
	padding: calc(clamp(120px, 14vh, 190px) + var(--jt-header-h)) clamp(20px, 6vw, 96px) clamp(96px, 13vh, 170px);
	overflow: hidden;
	color: #fff;
	text-align: center;
	background: var(--jt-dark);
	isolation: isolate;
}
.jc-about .jc-ab-hero__bg {
	position: absolute;
	inset: -12% 0;
	z-index: 0;
	overflow: hidden;
	transform: translate3d(0, 0, 0) scale(1.06);
	will-change: transform;
}
/* A graded scrim instead of a flat 39% wash: dark enough at the top for the white header to
   read, lightest across the middle so the photograph is actually visible, and weighted again
   at the bottom so the copy never sits on a bright patch of sky or sand. */
.jc-about .jc-ab-hero__overlay {
	position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .18) 32%, rgba(0, 0, 0, .20) 60%, rgba(0, 0, 0, .48) 100%);
}
.jc-about .jc-ab-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(20px, 2.6vw, 34px);
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
}
.jc-about .jc-ab-hero__title {
	margin: 0;
	font-family: var(--jt-font-display);
	font-weight: 900;
	font-size: clamp(34px, 5.4vw, 78px);
	line-height: 1.06;
	letter-spacing: -.015em;
	color: #fff;
	text-wrap: balance;
	overflow-wrap: break-word;   /* Georgian does not hyphenate */
	text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.jc-about .jc-ab-hero__text {
	margin: 0;
	max-width: 62ch;
	font-family: var(--jt-font-sans);
	font-weight: 400;
	font-size: clamp(16px, 1.35vw, 21px);
	line-height: 1.62;
	color: rgba(255, 255, 255, .92);
	text-wrap: pretty;
	text-shadow: 0 1px 14px rgba(0, 0, 0, .3);
}

/* ------------------------------------------------------------------ *
 * 2. Intro row + feature rows
 * ------------------------------------------------------------------ */
.jc-about .jc-ab-story { border-bottom: var(--jt-border-w) solid var(--jc-line); }
.jc-about .jc-ab-intro { display: flex; align-items: stretch; border-bottom: var(--jt-border-w) solid var(--jc-line); }
.jc-about .jc-ab-intro__left {
	flex: 0 0 50%; min-width: 0;
	display: flex; flex-direction: column; justify-content: center;
	padding: clamp(48px, 7vw, 104px) clamp(24px, 5vw, 80px);
}
.jc-about .jc-ab-intro__title {
	margin: 0;
	font-family: var(--jt-font-display);
	font-weight: 900;
	/* was a fixed 32px/42px: fluid, and with leading that survives a long Georgian line */
	font-size: clamp(26px, 3.1vw, 46px);
	line-height: 1.12;
	letter-spacing: -.01em;
	color: var(--jc-ink);
	text-wrap: balance;
	overflow-wrap: break-word;
}
.jc-about .jc-ab-intro__right {
	flex: 0 0 50%; min-width: 0;
	display: flex; flex-direction: column; justify-content: center;
	gap: 1em;
	padding: clamp(40px, 6vw, 88px) clamp(24px, 4.5vw, 72px);
	border-left: var(--jt-border-w) solid var(--jc-line);
	/* reading size, not caption size */
	font-family: var(--jt-font-sans);
	font-size: clamp(15px, 1.15vw, 18px);
	line-height: 1.72;
	color: var(--jt-soft);
}

.jc-about .jc-ab-rows__scroller { display: block; }
.jc-about .jc-ab-rows { display: grid; grid-template-columns: 1fr; }
.jc-about .jc-ab-row { position: relative; display: flex; min-height: clamp(340px, 38vw, 480px); border-bottom: var(--jt-border-w) solid var(--jc-line); outline-offset: -3px; }
.jc-about .jc-ab-row:last-child { border-bottom: 0; }
.jc-about .jc-ab-row__media { flex: 0 0 50%; min-width: 0; overflow: hidden; background: var(--jt-bg); }
.jc-about .jc-ab-row__img {
	width: 100%;
	height: 100%;
	min-height: clamp(340px, 38vw, 480px);
	object-fit: cover;
	object-position: center;
	opacity: 0;
	transform: scale(1.05);
	transition: opacity 0.6s var(--jc-ease), transform 1.2s var(--jc-ease-out);
}
.jc-about .jc-ab-row__body {
	flex: 0 0 50%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	padding: clamp(32px, 4vw, 56px) clamp(24px, 4.5vw, 72px);
	border-left: var(--jt-border-w) solid var(--jc-line);
	background-color: transparent;
	transition: background-color 0.45s var(--jc-ease);
}
.jc-about .jc-ab-row__title {
	margin: 0;
	font-family: var(--jt-font-display); font-weight: 900;
	font-size: clamp(20px, 2vw, 30px); line-height: 1.2; letter-spacing: -.01em;
	color: var(--jc-ink); overflow-wrap: break-word;
	transition: color 0.4s var(--jc-ease);
}
.jc-about .jc-ab-row__text {
	margin: 0;
	font-family: var(--jt-font-sans); font-weight: 400;
	font-size: clamp(15px, 1.1vw, 17px); line-height: 1.7;
	color: var(--jt-soft);
	transition: color 0.4s var(--jc-ease);
}
@media (hover: hover) and (min-width: 768px) {
	.jc-about .jc-ab-row:hover .jc-ab-row__img, .jc-about .jc-ab-row:focus-within .jc-ab-row__img { opacity: 1; transform: none; }
	.jc-about .jc-ab-row:hover .jc-ab-row__body, .jc-about .jc-ab-row:focus-within .jc-ab-row__body { background-color: var(--jc-teal); }
	.jc-about .jc-ab-row:hover .jc-ab-row__title, .jc-about .jc-ab-row:focus-within .jc-ab-row__title,
	.jc-about .jc-ab-row:hover .jc-ab-row__text, .jc-about .jc-ab-row:focus-within .jc-ab-row__text { color: #fff; }
}
@media (hover: none), (max-width: 767px) {
	.jc-about .jc-ab-row__img { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ *
 * 3. Born for Travel
 * ------------------------------------------------------------------ */
.jc-about .jc-ab-travel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: clamp(48px, 7vh, 96px);
	min-height: 100vh;
	padding: clamp(88px, 12vh, 150px) 0 clamp(72px, 10vh, 128px);
	overflow: hidden;
	color: #fff;
	background: var(--jt-dark);
	isolation: isolate;
	text-align: center;
}
/* Same graded scrim as the hero: readable copy without flattening the photograph. The bg
   layer below is the picture; this sits between it and the content. */
.jc-about .jc-ab-travel::before {
	content: "";
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, .50) 0%, rgba(0, 0, 0, .22) 30%, rgba(0, 0, 0, .26) 64%, rgba(0, 0, 0, .52) 100%);
}
/* The photo layer is out of flow; the three content blocks sit above it.
   (Named selectors on purpose: a `.jc-ab-travel > *` rule after the layer rule
   has the same specificity and would turn the layer `position: relative` with
   zero height — the photo would vanish.) */
.jc-about .jc-ab-travel__bg { position: absolute; inset: -8% 0; z-index: 0; overflow: hidden; transform: translate3d(0, 0, 0) scale(1.06); will-change: transform; }
.jc-about .jc-ab-travel__head, .jc-about .jc-ab-travel__groups, .jc-about .jc-ab-travel__footer { position: relative; z-index: 1; }
/* Typeface note: this block used --jt-font-abel throughout. Abel carries no Georgian glyphs,
   so every Georgian string here was already falling back to a different face mid-section. It
   now uses the site's own pair, which is both consistent and what the client asked for. */
.jc-about .jc-ab-travel__head {
	display: flex; flex-direction: column; align-items: center;
	gap: clamp(18px, 2.4vw, 32px);
	width: 100%; max-width: 1000px; margin: 0 auto;
}
.jc-about .jc-ab-travel__title {
	margin: 0;
	font-family: var(--jt-font-display); font-weight: 900;
	font-size: clamp(30px, 4.4vw, 62px); line-height: 1.08; letter-spacing: -.015em;
	color: #fff; text-wrap: balance; overflow-wrap: break-word;
	text-shadow: 0 2px 22px rgba(0, 0, 0, .32);
}
.jc-about .jc-ab-travel__sub {
	margin: 0; width: 100%; max-width: 60ch;
	font-family: var(--jt-font-sans); font-weight: 400;
	font-size: clamp(16px, 1.3vw, 20px); line-height: 1.62;
	color: rgba(255, 255, 255, .92); text-wrap: pretty;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .3);
}
.jc-about .jc-ab-travel__groups {
	display: flex; justify-content: center; align-items: flex-start;
	gap: clamp(36px, 6vw, 110px);
	width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px);
}
.jc-about .jc-ab-group {
	flex: 0 1 auto; min-width: 0;
	display: flex; flex-direction: column; align-items: center;
	gap: clamp(18px, 2vw, 30px);
}
.jc-about .jc-ab-group__title {
	margin: 0;
	font-family: var(--jt-font-sans); font-weight: 500;
	font-size: clamp(19px, 1.8vw, 27px); line-height: 1.25; letter-spacing: .005em;
	color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .3);
}
.jc-about .jc-ab-group__grid { display: grid; grid-template-columns: repeat(4, auto); width: fit-content; }
.jc-about .jc-ab-cell {
	display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
	gap: 7px;
	padding: 4px clamp(14px, 1.6vw, 26px);
	/* hairline rules, like the reference — they separate, they do not box */
	border-right: var(--jt-border-w) solid rgba(255, 255, 255, .34);
	text-align: center;
	transition: transform 0.4s var(--jc-ease-out);
}
.jc-about .jc-ab-cell:last-child { border-right: 0; }
.jc-about .jc-ab-cell:hover { transform: translateY(-3px); }
.jc-about .jc-ab-cell__label {
	font-family: var(--jt-font-sans); font-weight: 600;
	font-size: clamp(16px, 1.5vw, 23px); line-height: 1.2;
	color: #fff; white-space: nowrap;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .3);
}
.jc-about .jc-ab-cell__sub {
	font-family: var(--jt-font-sans); font-weight: 400;
	font-size: clamp(11px, .95vw, 14px); line-height: 1.35;
	color: rgba(255, 255, 255, .78);
}
.jc-about .jc-ab-travel__footer {
	margin: 0 auto; width: 100%; max-width: 64ch;
	font-family: var(--jt-font-sans); font-weight: 400;
	font-size: clamp(16px, 1.3vw, 20px); line-height: 1.62;
	color: rgba(255, 255, 255, .92); text-wrap: pretty;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .3);
}

/* ------------------------------------------------------------------ *
 * 4. News carousel (centre mode, two-up with peeks)
 * ------------------------------------------------------------------ */
.jc-about .jc-ab-news { padding: 50px 40px; }
.jc-about .jc-carousel { position: relative; }
.jc-about .jc-carousel__viewport { overflow: hidden; cursor: grab; }
.jc-about .jc-carousel__viewport.is-dragging { cursor: grabbing; }
.jc-about .jc-carousel__track { display: flex; align-items: flex-start; touch-action: pan-y; will-change: transform; }
.jc-about .jc-carousel__item { flex: 0 0 auto; width: var(--jc-item-w, 50%); margin-right: var(--jc-gap); user-select: none; -webkit-user-drag: none; }
.jc-about .jc-ab-card { display: block; padding-top: 16px; }
.jc-about .jc-ab-card__media { overflow: hidden; background: var(--jt-bg-muted); }
.jc-about .jc-ab-card__media img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; transform: scale(1); transition: transform 1s var(--jc-ease-out), filter 0.5s var(--jc-ease); }
.jc-about .jc-carousel__item:not(.is-current) .jc-ab-card__media img { filter: brightness(0.96); }
.jc-about .jc-ab-card:hover .jc-ab-card__media img { transform: scale(1.04); }
.jc-about .jc-ab-card__title { font: 600 24px/32px var(--jt-font-sans); color: var(--jc-ink); margin-top: 20px; transition: color 0.3s var(--jc-ease); }
.jc-about .jc-ab-card:hover .jc-ab-card__title { color: var(--jc-teal); }
/* Position only — the circle, blur and thin chevron come from .jt-arrow (components.css). */
.jc-about .jc-carousel__arrow { position: absolute; top: 160px; z-index: 2; --arrow-size: 56px; --arrow-ink: var(--jc-ink); }
.jc-about .jc-carousel__arrow--prev { left: 20px; }
.jc-about .jc-carousel__arrow--next { right: 20px; }
.jc-about .jc-carousel__arrow:active { transform: scale(0.95); }

/* ------------------------------------------------------------------ *
 * 5. Tablet
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {

	.jc-about .jc-ab-travel__groups { flex-direction: column; align-items: center; gap: 50px; }
}

/* ------------------------------------------------------------------ *
 * 6. Mobile
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.jc-about { --jc-peek: 0%; --jc-gap: 0px; }
	/* Phones: keep the centred composition, just tighten the frame. The sizes themselves are
	   already fluid, so only the rhythm needs adjusting. */
	.jc-about .jc-ab-hero { min-height: 88vh; padding: calc(96px + var(--jt-header-h)) 20px 72px; }
	.jc-about .jc-ab-hero__inner { gap: 18px; }
	.jc-about .jc-ab-hero__title { font-size: clamp(28px, 8.4vw, 40px); }
	.jc-about .jc-ab-hero__text { font-size: 16px; line-height: 1.6; max-width: none; }

	.jc-about .jc-ab-intro { flex-direction: column; border-bottom: 0; }
	.jc-about .jc-ab-intro__left { flex-basis: auto; padding: 24px 24px 8px; }
	.jc-about .jc-ab-intro__title { font-size: 20px; line-height: 1.3; }
	.jc-about .jc-ab-intro__right { flex-basis: auto; padding: 0 24px 24px; border-left: 0; font-size: 12px; line-height: 1.4; letter-spacing: 0.3px; }

	.jc-about .jc-ab-rows__scroller { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding-inline: 20px; }
	.jc-about .jc-ab-rows__scroller::-webkit-scrollbar { display: none; }
	/* One column per repeater row (--jc-rows is set inline by the template); 3 rows = the approved 250% strip. */
	.jc-about .jc-ab-rows { grid-template-columns: repeat(var(--jc-rows, 3), 1fr); width: calc(var(--jc-rows, 3) * 83.3333%); gap: 20px; padding: 0 20px; }
	.jc-about .jc-ab-row { flex-direction: column; min-height: 0; border-bottom: 0; scroll-snap-align: start; }
	.jc-about .jc-ab-row__media { flex-basis: auto; }
	.jc-about .jc-ab-row__img { height: 280px; aspect-ratio: 1 / 1; }
	.jc-about .jc-ab-row__body { flex-basis: auto; min-height: 330px; justify-content: flex-start; gap: 12px; padding: 20px 0 0; border-left: 0; background: transparent; }
	.jc-about .jc-ab-row__title { font-size: 20px; }
	.jc-about .jc-ab-row__text { font-size: 12px; line-height: 1.4; letter-spacing: 0.3px; }

	/* Phones: the sizes are already fluid, so only the rhythm and the grid need changing.
	   Four cells across a 375px screen is unreadable, so they go two by two. */
	.jc-about .jc-ab-travel { min-height: auto; padding: 72px 20px 64px; gap: 44px; }
	.jc-about .jc-ab-travel__head { gap: 16px; }
	.jc-about .jc-ab-travel__groups { flex-direction: column; align-items: center; gap: 44px; padding: 0; }
	.jc-about .jc-ab-group { align-items: center; width: 100%; gap: 18px; }
	.jc-about .jc-ab-group__grid { grid-template-columns: repeat(2, 1fr); width: 100%; gap: 22px 0; }
	.jc-about .jc-ab-cell { padding: 4px 10px; }
	/* with two columns the right-hand rule of each row would dangle */
	.jc-about .jc-ab-cell:nth-child(2n) { border-right: 0; }
	.jc-about .jc-ab-cell__label { white-space: normal; }
	.jc-about .jc-ab-travel__footer { font-size: 15px; line-height: 1.4; width: 94%; max-width: 94%; }

	.jc-about .jc-ab-news { padding: 10px 10px 20px; }
	.jc-about .jc-ab-card__title { font-size: 16px; line-height: 24px; }
	.jc-about .jc-carousel__arrow { top: 50px; --arrow-size: 40px; }
	.jc-about .jc-carousel__arrow--prev { left: 0; }
	.jc-about .jc-carousel__arrow--next { right: 0; }
}

/* ------------------------------------------------------------------ *
 * 7. Reduced motion
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.jc-about *, .jc-about *::before, .jc-about *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
	.jc-about [data-reveal] { opacity: 1; transform: none; transition: none; }
	.jc-about .jc-ab-hero__bg, .jc-about .jc-ab-travel__bg { transform: none !important; }
	.jc-about .jc-carousel__track { transition: none !important; }
}