/**
 * About Us page styles
 * Enqueued only on is_page('about'). All selectors prefixed `.about-*`.
 * See docs/PLAN-ABOUT.md for the per-section design spec.
 */

/* =========================================================================
   Shared
   ========================================================================= */

.page-about .container {
	max-width: var(--container-inner);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.page-about .section-title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--text-h2);
	line-height: 1.12;
	color: var(--color-text-dark);
	letter-spacing: var(--ls-heading);
}

/* =========================================================================
   1. HERO  (Figma desktop 312:2311  ·  tablet 312:2304  ·  mobile 312:2305)
   ----------------------------------------------------------------------
   Client divergence: title is a SINGLE left-aligned H2 block (not the
   full-width H1 overlap), photo top-aligned with text. See
   feedback_about_hero_layout.md.
   ========================================================================= */

.about-hero { padding: 100px 0 80px; }

/* DESKTOP — per client divergence: title sits in the right column (single
   block), photo on the left top-aligned with the title, intro + remaining
   bio blocks stack below the title in the same right column. */
.about-hero__grid {
	display: grid;
	gap: 24px 60px;
	align-items: start;
	max-width: var(--container-inner);
	margin-inline: auto;
	padding-inline: var(--gutter);
	grid-template-columns: 502px 1fr;
	grid-template-areas:
		"photo title"
		"photo intro"
		"photo blocks";
}

.about-hero__title      { grid-area: title;  }
.about-hero__photo-wrap { grid-area: photo;  }
.about-hero__intro      { grid-area: intro;  }
.about-hero__blocks     { grid-area: blocks; }

.about-hero__photo-wrap {
	width: 100%;
	aspect-ratio: 502 / 916;
	border-radius: var(--radius-md);
	overflow: hidden;
	display: block;
}

.about-hero__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

.about-hero__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--text-h2);
	line-height: 1.12;
	color: var(--color-text-dark);
	letter-spacing: var(--ls-heading);
	max-width: 1100px;
	/* Long Russian words (e.g. "достопримечательности") overflow narrow
	   viewports. `hyphens: auto` lets the browser break at syllable
	   boundaries when needed (requires html lang="ru"); the overflow-wrap
	   fallback covers browsers without a Russian hyphenation dictionary. */
	overflow-wrap: break-word;
	hyphens: auto;
	-webkit-hyphens: auto;
}

.about-hero__intro,
.about-hero__blocks {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.about-hero__blocks {
	gap: 32px;
	margin-top: 8px;
}

.about-hero__block-title {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-h5);
	line-height: var(--lh-h5);
	letter-spacing: 0.26px;
	color: var(--color-text-dark);
	margin: 0 0 12px;
}

.about-hero__block-text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--text-body-m);
	line-height: var(--lh-body);
	letter-spacing: 0.19px;
	text-align: justify;
	color: var(--color-text);
	margin: 0;
}

.about-hero__block-text p { margin: 0 0 12px; }
.about-hero__block-text p:last-child { margin-bottom: 0; }

@media (max-width: 1280px) {
	.about-hero__grid { grid-template-columns: 380px 1fr; gap: 24px 48px; }
}

/* TABLET — title FULL-WIDTH first, then 2-col row (photo + intro),
   then remaining blocks full-width. Figma 312:2304. */
@media (max-width: 1024px) {
	.about-hero { padding: 80px 0 60px; }
	.about-hero__grid {
		grid-template-columns: 274px 1fr;
		gap: 32px 24px;
		grid-template-areas:
			"title  title"
			"photo  intro"
			"blocks blocks";
	}
	.about-hero__photo-wrap { aspect-ratio: 274 / 559; }
	.about-hero__title { max-width: none; text-align: left; }
}

/* MOBILE — title, photo, intro, blocks all stack full-width.
   Photo aspect: 335:399 per Figma 419:3735. */
@media (max-width: 768px) {
	.about-hero { padding: 40px 0 40px; }
	.about-hero__grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"title"
			"photo"
			"intro"
			"blocks";
		gap: 24px;
	}
	.about-hero__photo-wrap { aspect-ratio: 335 / 399; }
	.about-hero__title { text-align: center; }
	/* Figma 419:3735 crops the source from the top — visible window starts
	   at ~10% down into the image, hiding the upper sliver and centering the
	   face. With object-fit:cover on a 335×399 box over a portrait source the
	   default centers too low, leaving only the head visible. Biasing the
	   crop toward the top (25%) puts the face back at visual centre. */
	.about-hero__photo { object-position: center 25%; }
}

/* =========================================================================
   2. PRINCIPES  (Figma desktop 401:1917  ·  tablet 418:3331  ·  mobile 419:3737)
   ----------------------------------------------------------------------
   Layout: ONE full-section background image with 3 small cream cards
   overlaid in a staggered mosaic (Figma desktop). On tablet/mobile the
   cards stack vertically and the bg image scales to fit.
   ========================================================================= */

.about-principles {
	position: relative;
	background: var(--color-primary);
	color: var(--color-white);
	overflow: hidden;
	isolation: isolate;
	padding: 80px 0 100px;
	min-height: 900px;
}

.about-principles__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

.about-principles.has-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.15) 70%, rgba(0,0,0,0.45) 100%);
	z-index: -1;
}

.about-principles__inner {
	max-width: var(--container-inner);
	margin-inline: auto;
	padding-inline: var(--gutter);
	position: relative;
}

.about-principles__heading {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--text-h2);
	line-height: 1.12;
	color: var(--color-white);
	margin: 0 0 64px;
	max-width: 880px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* Desktop: 3×2 grid with empty cells.
   Figma 391:1756 — flex-wrap, 8px gap, cards 595×450, positions:
     row 1: [card-1] [empty]  [card-2]
     row 2: [empty]  [card-3] [empty]
   We use display: grid + grid-area for the same effect (cleaner than flex-wrap). */
.about-principles__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 450px);
	gap: 8px;
}

.about-principles__card {
	background: var(--color-bg-light);   /* #F5F5F0 — secondary very light green */
	border-radius: var(--radius-md);
	padding: 30px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	transition: background var(--transition-base);
}

/* Hover state per Figma 391:1758 — color inversion to olive green. */
.about-principles__card:hover {
	background: var(--color-primary);
}
.about-principles__card:hover .about-principles__card-title,
.about-principles__card:hover .about-principles__card-text,
.about-principles__card:hover .about-principles__card-number {
	color: var(--color-white);
}

.about-principles__card--1 { grid-column: 1; grid-row: 1; }
.about-principles__card--2 { grid-column: 3; grid-row: 1; }
.about-principles__card--3 { grid-column: 2; grid-row: 2; }

.about-principles__card-number {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 54px;                     /* Figma H3 */
	line-height: 1.15;
	color: var(--color-primary);         /* #6D7250 — Figma uses green */
	text-align: right;
	margin: 0 0 16px;
}

.about-principles__card-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.about-principles__card-title {
	font-family: var(--font-body);
	font-weight: 700;                    /* Figma Lato Bold */
	font-size: var(--text-h4);           /* 33px */
	line-height: var(--lh-h4);           /* 1.24 */
	letter-spacing: 0.33px;
	color: var(--color-text-dark);
	margin: 0;
}

.about-principles__card-text {
	font-family: var(--font-body);
	font-size: var(--text-body-m);       /* 19px */
	line-height: var(--lh-body);         /* 1.48 */
	color: var(--color-text);
	margin: 0;
}

/* DESKTOP: number-on-top per Figma. We render number AFTER body in the HTML
   so that on tablet/mobile (Figma puts number at bottom) the default flex
   order already matches; desktop reverses it. */
.about-principles__card {
	flex-direction: column-reverse;
}

@media (max-width: 1280px) {
	.about-principles__grid { grid-template-rows: repeat(2, auto); }
	.about-principles__card { padding: 24px; }
}

/* TABLET/MOBILE: horizontal peek-slider per Figma 418:3331 / 419:3737.
   Number sits at the bottom-right (default HTML order, no flex-reverse). */
@media (max-width: 1024px) {
	.about-principles { padding: 64px 0 80px; min-height: 0; }
	.about-principles__grid {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		/* Edge-bleed: extend past container padding so the peek shows */
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
		scroll-padding-inline: var(--gutter);
		gap: 8px;
		scrollbar-width: none;
	}
	.about-principles__grid::-webkit-scrollbar { display: none; }

	.about-principles__card,
	.about-principles__card--1,
	.about-principles__card--2,
	.about-principles__card--3 {
		flex: 0 0 595px;
		max-width: 595px;
		min-height: 400px;
		grid-column: auto;
		grid-row: auto;
		flex-direction: column;            /* number at bottom per Figma */
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
	.about-principles__card-number {
		font-size: 40px;                    /* Tablet H3 */
		text-align: right;
		margin: 16px 0 0;
	}
}

@media (max-width: 768px) {
	.about-principles { padding: 48px 0 60px; }
	.about-principles__heading { margin-bottom: 32px; }
	.about-principles__card { padding: 20px 18px; }
	.about-principles__card-title { font-size: 22px; }
}

@media (max-width: 480px) {
	.about-principles__card,
	.about-principles__card--1,
	.about-principles__card--2,
	.about-principles__card--3 {
		flex: 0 0 335px;
		max-width: 335px;
	}
}

/* Dots — show on mobile only (matches trip-slider convention). */
.about-principles__dots {
	display: none;
	margin-top: 24px;
	justify-content: center;
}
@media (max-width: 480px) {
	.about-principles__dots { display: flex; }
}

/* Make the dot pip white-friendly on the dark bg section. */
.about-principles__dots .trip-slider__dot {
	border-color: var(--color-white);
}
.about-principles__dots .trip-slider__dot.is-active {
	background: var(--color-white);
}

/* =========================================================================
   3. TRIP FORMATS / ACCORDION
   (Figma desktop 395:1813  ·  tablet 418:3354  ·  mobile 419:3786)
   ========================================================================= */

.about-formats {
	background: var(--color-bg-warm);
	padding: 100px 0;
}

.about-formats__inner {
	max-width: var(--container-inner);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: grid;
	grid-template-columns: 673px 1fr;
	gap: 220px;
	align-items: start;
}

.about-formats__heading {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--text-h2);
	line-height: 1.12;
	color: var(--color-text-dark);
	margin: 0 0 32px;
}

.about-formats__intro {
	font-family: var(--font-body);
	font-style: italic;                  /* Figma: Lato Medium Italic */
	font-weight: 500;
	font-size: var(--text-body-l);       /* 24px */
	line-height: var(--lh-btn);          /* 1.42 */
	letter-spacing: 0.24px;
	color: var(--color-text);
	margin: 0;
}

.about-formats__intro p { margin: 0 0 12px; }
.about-formats__intro p:last-child { margin-bottom: 0; }

.about-formats__list {
	display: flex;
	flex-direction: column;
}

.about-formats__row {
	border-bottom: 1px solid var(--color-border-light);
}

.about-formats__row-header {
	all: unset;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 22px 0;
	gap: 16px;
	cursor: pointer;
	color: var(--color-text-dark);
}

.about-formats__row-header:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.about-formats__row-title {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--text-h4);
	line-height: var(--lh-h4);
	margin: 0;
}

/* Figma UI kit (395:1846 collapsed / 395:1879 expanded): the chevron sits
   inside a 50×50 circle with a 1px green border. Collapsed → chevron points
   right (–90°); expanded → chevron points down (default). */
.about-formats__row-icon {
	flex: 0 0 50px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 1px solid var(--color-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
}

.about-formats__row-icon svg {
	width: 24px;
	height: 24px;
	transition: transform var(--transition-base);
	transform: rotate(-90deg);
}

.about-formats__row.is-open .about-formats__row-icon svg {
	transform: rotate(0deg);
}

.about-formats__row-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--transition-slow);
}

.about-formats__row.is-open .about-formats__row-body {
	max-height: 800px;
}

.about-formats__row-body-inner {
	padding: 0 0 24px;
	font-family: var(--font-body);
	font-size: var(--text-body-m);
	line-height: var(--lh-body);
	color: var(--color-text);
}

.about-formats__row-body-inner p { margin: 0 0 12px; }
.about-formats__row-body-inner p:last-child { margin-bottom: 0; }

.about-formats__license {
	margin-top: 0;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 22px;
	background: var(--color-primary);
	color: var(--color-white);
	border-radius: var(--radius-md);
}

.about-formats__license-icon {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	color: var(--color-white);
}

.about-formats__license-icon svg {
	width: 100%;
	height: 100%;
}

.about-formats__license-text {
	font-family: var(--font-body);
	font-weight: 600;                    /* Figma SemiBold */
	font-size: var(--text-h5);           /* 26px */
	line-height: var(--lh-h5);           /* 1.36 */
	letter-spacing: 0.26px;
	color: var(--color-white);
	margin: 0;
}

@media (max-width: 1280px) {
	.about-formats__inner { grid-template-columns: 1fr 1fr; gap: 80px; }
}

@media (max-width: 1024px) {
	.about-formats { padding: 80px 0; }
	.about-formats__inner { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
	.about-formats { padding: 60px 0; }
}

/* =========================================================================
   4. GUIDES  (Figma desktop 371:1489  ·  tablet 418:3384  ·  mobile 419:3816)
   ========================================================================= */

.about-guides {
	padding: 80px 0;
}

.about-guides__inner {
	max-width: var(--container-inner);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.about-guides__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 48px;
}

.about-guides__heading {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--text-h2);
	line-height: 1.12;
	color: var(--color-text-dark);
	margin: 0;
}

.about-guides__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.about-guides__card {
	position: relative;
	border-radius: var(--radius-md);
	overflow: hidden;
	aspect-ratio: 595 / 550;
	background: var(--color-bg-light);
	display: block;
	color: inherit;
	text-decoration: none;
}

.about-guides__card-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Default state (Figma 371:1440): flat 10% black overlay, name only visible.
   Hover state (Figma 371:1442): bottom-aligned dark gradient scrim with the
   role text revealed below the name, and a circle-arrow CTA in the bottom-
   right corner.
   On tablet/mobile (≤1024px) the hover state is "pinned" so the design reads
   the same without a hover affordance — matches trip-gallery caption pattern. */

.about-guides__card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.1);
	border-radius: inherit;
	pointer-events: none;
	transition: background var(--transition-base);
}

.about-guides__card:hover::after,
.about-guides__card:focus-visible::after {
	background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.65) 100%);
}

.about-guides__card-caption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 30px;
	color: var(--color-white);
	z-index: 1;
}

.about-guides__card-name {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--text-h4);          /* Figma Desktop H4: 33px */
	line-height: var(--lh-h4);          /* 1.24 */
	letter-spacing: 0.33px;
	margin: 0;
}

.about-guides__card-role {
	font-family: var(--font-body);
	font-size: var(--text-body-m);
	line-height: var(--lh-body);
	color: var(--color-white);
	margin: 12px 0 0;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height var(--transition-slow), opacity var(--transition-base), margin var(--transition-base);
}

.about-guides__card:hover .about-guides__card-role,
.about-guides__card:focus-visible .about-guides__card-role {
	max-height: 200px;
	opacity: 1;
	margin-top: 12px;
}

.about-guides__card-arrow {
	position: absolute;
	right: 30px;
	bottom: 30px;
	z-index: 1;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 1px solid var(--color-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
	background: transparent;
	opacity: 0;
	transform: translateX(8px);
	transition: opacity var(--transition-base), transform var(--transition-base);
	pointer-events: none;
}

.about-guides__card-arrow svg {
	width: 18px;
	height: 18px;
}

.about-guides__card:hover .about-guides__card-arrow,
.about-guides__card:focus-visible .about-guides__card-arrow {
	opacity: 1;
	transform: translateX(0);
}

/* Touch viewports: pin the hover state (no real hover affordance there). */
@media (max-width: 1024px) {
	.about-guides__card::after {
		background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.65) 100%);
	}
	.about-guides__card-role {
		max-height: 200px;
		opacity: 1;
		margin-top: 12px;
	}
	.about-guides__card-arrow {
		opacity: 1;
		transform: translateX(0);
	}
}

@media (max-width: 1024px) {
	.about-guides__grid {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
		scroll-padding-inline: var(--gutter);
		gap: 8px;
		scrollbar-width: none;
	}
	.about-guides__grid::-webkit-scrollbar { display: none; }
	.about-guides__card {
		flex: 0 0 567px;
		max-width: 567px;
		aspect-ratio: 567 / 550;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
}

/* Figma mobile (375): square cards 335×335 per node 419:3823.
   Use ≤480 (not ≤768) so tablet viewport 744 still gets the 567×550 cards. */
@media (max-width: 480px) {
	.about-guides__card { flex: 0 0 335px; max-width: 335px; aspect-ratio: 1 / 1; }
}