/*
Theme Name: Olga
Theme URI: https://blonde.travel/
Author: blonde.travel
Author URI: https://blonde.travel/
Description: A lightweight, photo-led block theme created for blonde.travel.
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 7.4
Version: 0.3.9
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: olga
Tags: blog, full-site-editing, block-patterns, wide-blocks
*/

/*
 * Olga intentionally keeps all non-JSON presentation in one small file.
 * WordPress supplies layout, navigation, responsive images, and lazy loading.
 */

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img,
svg,
video,
iframe {
	max-width: 100%;
}

img {
	height: auto;
}

a {
	text-underline-offset: 0.16em;
}

.wp-block-site-title a,
.wp-block-navigation a {
	color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.wp-site-blocks {
	min-height: 100vh;
}

.wp-block-template-part:first-child {
	position: relative;
	z-index: 20;
}

.wp-block-template-part:first-child > .wp-block-group {
	border-bottom: 1px solid var(--wp--preset--color--surface);
}

.wp-block-site-title {
	white-space: nowrap;
}

.wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 0.35rem;
}

.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.45em;
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40);
}

/*
 * A quiet editorial vignette identifies the homepage without competing with
 * the photographs. It is decorative CSS rather than content, and disappears
 * on small screens where the illustration would crowd the story heading.
 */
.olga-story-journal {
	isolation: isolate;
	position: relative;
}

.olga-story-journal::before {
	position: absolute;
	z-index: 0;
	top: clamp(-3.25rem, -3vw, -1.75rem);
	right: 0;
	width: clamp(21rem, 33vw, 32rem);
	aspect-ratio: 900 / 844;
	background: url("assets/illustrations/map-reader-blonde.webp") center top / contain no-repeat;
	content: "";
	opacity: 0.25;
	pointer-events: none;
}

.olga-story-journal > * {
	position: relative;
	z-index: 1;
}

.olga-story-journal > .wp-block-heading {
	display: flex;
	align-items: flex-end;
	min-height: clamp(7rem, 11vw, 10rem);
	opacity: 0.58;
}

/*
 * The footer cat is a decorative companion on every template. Extra space
 * keeps it clear of page content; its paws sit directly on the footer rule.
 */
.wp-site-blocks > .wp-block-template-part:last-child {
	position: relative;
	margin-top: clamp(7.5rem, 14vw, 11rem);
}

.wp-site-blocks > .wp-block-template-part:last-child::before {
	position: absolute;
	z-index: 1;
	bottom: calc(100% - 1px);
	left: max(var(--wp--preset--spacing--40), calc((100vw - 1200px) / 2));
	width: clamp(7.5rem, 14vw, 11rem);
	aspect-ratio: 480 / 472;
	background: url("assets/illustrations/footer-cat.webp") left bottom / contain no-repeat;
	content: "";
	opacity: 0.78;
	pointer-events: none;
}

/* Native Query block as the modern replacement for Gabriela's JS Masonry. */
.wp-block-query .wp-block-post-template.is-layout-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.wp-block-query .wp-block-post-template > li {
	min-width: 0;
}

.wp-block-query .wp-block-post-template > li > .wp-block-group {
	height: 100%;
}

.wp-block-query .wp-block-post-featured-image {
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.wp-block-query .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 280ms ease;
}

.wp-block-query .wp-block-post-featured-image a:focus-visible img,
.wp-block-query .wp-block-post-featured-image a:hover img {
	transform: scale(1.015);
}

.wp-block-query .wp-block-post-title {
	margin-top: 0;
}

.wp-block-query .wp-block-post-title a,
.wp-block-post-navigation-link a {
	text-decoration: none;
}

.wp-block-query .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
}

.wp-block-query .wp-block-post-title a:hover,
.wp-block-post-navigation-link a:hover {
	color: var(--wp--preset--color--link);
}

.wp-block-query .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.wp-block-query-pagination {
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--surface);
}

/* CSS Overflow 5 carousel: native snap scrolling with browser-owned controls. */
.olga-story-carousel {
	position: relative;
	isolation: isolate;
}

.olga-story-carousel__track {
	display: flex;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	scroll-behavior: smooth;
	scroll-snap-type: inline mandatory;
	scrollbar-color: var(--wp--preset--color--accent) var(--wp--preset--color--surface);
	scrollbar-width: thin;
}

.olga-story-carousel__slide {
	display: block;
	flex: 0 0 100%;
	min-width: 100%;
	height: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.olga-story-carousel__image {
	display: block;
	height: 100%;
}

@supports selector(.olga-story-carousel__track::scroll-button(left)) {
	.olga-story-carousel__track {
		anchor-name: --olga-story-carousel;
		scrollbar-width: none;
	}

	.olga-story-carousel__track::-webkit-scrollbar {
		display: none;
	}

	.olga-story-carousel__track::scroll-button(*) {
		position: absolute;
		position-anchor: --olga-story-carousel;
		top: anchor(center);
		width: 3rem;
		height: 3rem;
		padding: 0;
		border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 65%, transparent);
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.88);
		background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
		backdrop-filter: blur(10px);
		box-shadow: 0 0.35rem 1.4rem rgba(32, 30, 27, 0.18);
		color: var(--wp--preset--color--contrast);
		font-family: var(--wp--preset--font-family--ui);
		font-size: 2rem;
		font-weight: 400;
		line-height: 1;
		transform: translateY(-50%);
		z-index: 2;
	}

	.olga-story-carousel__track::scroll-button(left) {
		left: calc(anchor(left) + 1rem);
		content: "‹" / "Previous photograph";
	}

	.olga-story-carousel__track::scroll-button(right) {
		left: calc(anchor(right) - 4rem);
		content: "›" / "Next photograph";
	}

	.olga-story-carousel__track::scroll-button(*):hover {
		background: var(--wp--preset--color--base);
	}

	.olga-story-carousel__track::scroll-button(*):focus-visible {
		outline: 2px solid var(--wp--preset--color--accent);
		outline-offset: 3px;
	}

	.olga-story-carousel__track::scroll-button(*):disabled {
		opacity: 0.28;
	}
}

/*
 * The homepage reads as a travel journal rather than a uniform card index.
 * The inherited Query block stays native; modern grid creates the composition.
 */
.olga-story-journal .wp-block-post-template.is-layout-grid {
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(1.5rem, 4vw, 4.5rem);
	row-gap: clamp(3.5rem, 8vw, 8rem);
	align-items: start;
}

.olga-story-journal .wp-block-post-template > li:first-child {
	grid-column: 1 / -1;
}

.olga-story-journal .wp-block-post-template > li:not(:first-child):nth-child(4n + 1),
.olga-story-journal .wp-block-post-template > li:not(:first-child):nth-child(4n + 2) {
	grid-column: span 7;
}

.olga-story-journal .wp-block-post-template > li:nth-child(4n),
.olga-story-journal .wp-block-post-template > li:nth-child(4n + 3) {
	grid-column: span 5;
}

.olga-story-journal .wp-block-post-template > li:nth-child(4n + 3) {
	margin-top: clamp(2.5rem, 7vw, 7rem);
}

.olga-story-journal .wp-block-post-template > li:first-child > .wp-block-group {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr);
	align-items: stretch;
	padding: 0 !important;
}

.olga-story-journal .wp-block-post-template > li:first-child .wp-block-post-featured-image {
	height: 100%;
	margin: 0;
}

.olga-story-journal .wp-block-post-template > li:first-child .wp-block-post-featured-image img {
	height: 100%;
	min-height: clamp(28rem, 44vw, 40rem);
	aspect-ratio: 16 / 11;
}

.olga-story-journal .wp-block-post-template > li:first-child > .wp-block-group > .wp-block-group {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2rem, 5vw, 5rem) !important;
	border-left: 1px solid var(--wp--preset--color--surface);
}

.olga-story-journal .wp-block-post-template > li:first-child .wp-block-post-title {
	font-size: clamp(2.25rem, 4.5vw, 4.75rem) !important;
	line-height: 1.02;
}

.olga-story-journal .wp-block-post-template > li:first-child .wp-block-post-excerpt {
	max-width: 34rem;
}

.olga-story-journal .wp-block-post-template > li:not(:first-child) > .wp-block-group {
	padding-bottom: 0 !important;
	background: transparent !important;
}

.olga-story-journal .wp-block-post-template > li:not(:first-child) > .wp-block-group > .wp-block-group {
	padding: var(--wp--preset--spacing--30) 0 0 !important;
}

.olga-story-journal .wp-block-post-template > li:not(:first-child):nth-child(4n + 1) .wp-block-post-featured-image img,
.olga-story-journal .wp-block-post-template > li:not(:first-child):nth-child(4n + 2) .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
}

.olga-story-journal .wp-block-post-template > li:nth-child(4n) .wp-block-post-featured-image img,
.olga-story-journal .wp-block-post-template > li:nth-child(4n + 3) .wp-block-post-featured-image img {
	aspect-ratio: 4 / 5;
}

/*
 * Secondary photographs use two quiet editorial silhouettes. The lead story
 * remains rectangular so its native carousel controls keep a predictable hit
 * area. The SVG data is embedded so protected staging cannot turn a failed
 * mask request into a fully transparent image. Browsers without CSS masking
 * retain the unclipped image as a fallback.
 */
@supports (mask-image: linear-gradient(#fff, #fff)) or (-webkit-mask-image: linear-gradient(#fff, #fff)) {
	.olga-story-journal .wp-block-post-template > li:not(:first-child):nth-child(4n + 1) .wp-block-post-featured-image,
	.olga-story-journal .wp-block-post-template > li:not(:first-child):nth-child(4n + 2) .wp-block-post-featured-image {
		-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAwIDYyNSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+Cgk8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwaDg2OGMxNyA3MCAxNyAxMzggMiAyMDQgODIgMzYgMTMwIDExMyAxMzAgMjA3IDAgMTE5LTk3IDIxNC0yMjQgMjE0SDIzOGMtNzggMC0xMzItMzQtMTY1LTg2LTIzLTM2LTQ3LTUzLTczLTUzVjBaIi8+Cjwvc3ZnPgo=");
		mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAwIDYyNSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+Cgk8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwaDg2OGMxNyA3MCAxNyAxMzggMiAyMDQgODIgMzYgMTMwIDExMyAxMzAgMjA3IDAgMTE5LTk3IDIxNC0yMjQgMjE0SDIzOGMtNzggMC0xMzItMzQtMTY1LTg2LTIzLTM2LTQ3LTUzLTczLTUzVjBaIi8+Cjwvc3ZnPgo=");
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}

	.olga-story-journal .wp-block-post-template > li:nth-child(4n) .wp-block-post-featured-image,
	.olga-story-journal .wp-block-post-template > li:nth-child(4n + 3) .wp-block-post-featured-image {
		-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MDAgMTAwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+Cgk8cGF0aCBmaWxsPSIjZmZmIiBkPSJNODYgMGg3MTR2ODU4Yy02MyA3LTEwOCAzNC0xMzkgODAtMjggNDAtNzcgNjItMTQ1IDYySDBWMTY2YzU0LTE0IDg2LTU0IDg2LTExMVYwWiIvPgo8L3N2Zz4K");
		mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MDAgMTAwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+Cgk8cGF0aCBmaWxsPSIjZmZmIiBkPSJNODYgMGg3MTR2ODU4Yy02MyA3LTEwOCAzNC0xMzkgODAtMjggNDAtNzcgNjItMTQ1IDYySDBWMTY2YzU0LTE0IDg2LTU0IDg2LTExMVYwWiIvPgo8L3N2Zz4K");
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}
}

.olga-story-journal .wp-block-post-template > li:not(:first-child) .wp-block-post-excerpt {
	max-width: 42rem;
	font-size: 0.98em;
}

.olga-story-journal .wp-block-post-terms {
	padding-bottom: clamp(0.4rem, 0.8vw, 0.7rem);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.olga-story-journal .wp-block-post-title {
	text-wrap: balance;
}

/* Long-form reading and legacy pre-block content. */
.wp-block-post-content {
	font-size: var(--wp--preset--font-size--medium);
}

.wp-block-post-content > * + * {
	margin-block-start: 1.45em;
}

.wp-block-post-content :where(p, li) {
	overflow-wrap: anywhere;
}

.wp-block-post-content :where(h2, h3, h4) {
	margin-block-start: 1.8em;
}

.wp-block-post-content :where(figure, .wp-caption, .gallery) {
	margin-block: var(--wp--preset--spacing--50);
}

.wp-block-post-content :where(.wp-caption, .gallery, img) {
	max-width: 100%;
}

.wp-block-post-content .wp-caption-text,
.wp-block-post-content figcaption {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.wp-block-post-content .gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.wp-block-post-content .gallery-item {
	float: none;
	width: auto !important;
	margin: 0;
}

.wp-block-post-content .gallery-item img {
	width: 100%;
}

.wp-block-post-content iframe {
	display: block;
	width: 100%;
}

.wp-block-comments textarea,
.wp-block-comments input:not([type="submit"]) {
	width: 100%;
}

.wp-block-comments .comment-form-cookies-consent input {
	width: auto;
}

/* Keep the custom photo-led hubs full-width inside the new page template. */
.bt-hotels-hub-page .wp-block-post-content,
.bt-destinations-hub-page .wp-block-post-content {
	max-width: none;
}

@media (max-width: 720px) {
	.olga-story-journal::before {
		display: none;
	}

	.olga-story-journal > .wp-block-heading {
		display: block;
		min-height: 0;
	}

	.wp-block-query .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60);
	}

	.olga-story-journal .wp-block-post-template.is-layout-grid {
		row-gap: var(--wp--preset--spacing--60);
	}

	.olga-story-journal .wp-block-post-template > li {
		grid-column: 1 / -1 !important;
		margin-top: 0 !important;
	}

	.olga-story-journal .wp-block-post-template > li:first-child > .wp-block-group {
		grid-template-columns: minmax(0, 1fr);
	}

	.olga-story-journal .wp-block-post-template > li:first-child .wp-block-post-featured-image img,
	.olga-story-journal .wp-block-post-template > li:not(:first-child) .wp-block-post-featured-image img {
		min-height: 0;
		aspect-ratio: 5 / 4;
	}

	.olga-story-journal .wp-block-post-template > li:first-child > .wp-block-group > .wp-block-group {
		margin: -2.25rem var(--wp--preset--spacing--30) 0;
		padding: var(--wp--preset--spacing--40) !important;
		border-top: 1px solid var(--wp--preset--color--surface);
		border-left: 0;
		background: var(--wp--preset--color--base);
		z-index: 1;
	}

	.olga-story-journal .wp-block-post-template > li:first-child .wp-block-post-title {
		font-size: clamp(2rem, 11vw, 3.2rem) !important;
	}

	.wp-block-query .wp-block-post-featured-image img {
		aspect-ratio: 5 / 4;
	}

	.wp-block-post-content .gallery {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 721px) and (max-width: 960px) {
	.olga-story-journal .wp-block-post-template > li:first-child > .wp-block-group {
		grid-template-columns: minmax(0, 1fr);
	}

	.olga-story-journal .wp-block-post-template > li:first-child .wp-block-post-featured-image img {
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	.olga-story-journal .wp-block-post-template > li:first-child > .wp-block-group > .wp-block-group {
		border-top: 1px solid var(--wp--preset--color--surface);
		border-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.wp-block-query .wp-block-post-featured-image img {
		transition: none;
	}

	.olga-story-carousel__track {
		scroll-behavior: auto;
	}
}