/*
Theme Name: GreoBG - Child Theme
Theme URI: greobg.com
Template: blocksy
Author: Art Spot Web Studio
Version: 2.1.74.1786724407
Updated: 2026-08-29 00:00:00
*/

/* Design-system tokens (subset actually used in this file) — values
   taken directly from GreoBG_design-system_specification.pdf. */
:root {
	--greobg-primary: #1C5474;
	--greobg-accent: #D07A45;
	--greobg-muted: #F3EDE4;
	--greobg-muted-foreground: #6F7683;
	--greobg-border: #E5DDD1;
	--greobg-shadow-card: 0 4px 24px -6px rgba(23, 80, 113, 0.12);
	--greobg-shadow-soft: 0 10px 30px -12px rgba(23, 80, 113, 0.18);
	--greobg-radius-card: 1.75rem; /* rounded-2xl per spec */
	--greobg-available: #E4E9DC;
	--greobg-busy: #F6D9D0;
	--font-display: 'Playfair Display', ui-serif, Georgia, serif;
	--font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* Typography — Playfair Display for headings, Inter for body, per spec
   (corrected from the spec doc's original Fraunces — no Cyrillic/Greek
   coverage). Applied broadly; scope narrowed later if anything
   theme-level clashes. */
body,
input,
button,
select,
textarea {
	font-family: var(--font-body);
}

h1, h2, h4, h5, h6,
.hp-page__title,
.hp-listing__title,
.hp-listing-category__name,
.greobg-region-teaser__name,
.greobg-price-value {
	font-family: var(--font-display);
	letter-spacing: -0.02em;
}

/* Old HivePress Images block — confirmed via debug query to silently
   drop a 6th photo despite max_files: 10 and all images being correctly
   attached. Hidden, replaced by .greobg-full-gallery (built via
   greobg_listing_gallery_script() in functions.php, sourced from a
   verified-correct raw attachment query). Kept in the DOM rather than
   removed, as a silent fallback if the replacement script fails to run. */
.greobg-gallery {
	display: none !important;
}

.greobg-full-gallery {
	margin-bottom: 24px;
}

/* --- Desktop: hero + thumbnails --- */
.greobg-full-gallery__desktop {
	display: grid;
	grid-template-columns: 2.2fr 1fr;
	gap: 12px;
}

.greobg-full-gallery__hero {
	border-radius: var(--greobg-radius-card);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.greobg-full-gallery__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.greobg-full-gallery__thumbs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	align-content: start;
}

.greobg-full-gallery__thumb {
	aspect-ratio: 4 / 3;
	padding: 0;
	border: none;
	border-radius: 1rem;
	overflow: hidden;
	cursor: pointer;
	background: none;
}

.greobg-full-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.greobg-full-gallery__thumb:hover img {
	transform: scale(1.05);
}

/* --- Mobile: swipeable carousel --- */
.greobg-full-gallery__mobile {
	display: none;
	position: relative;
	border-radius: var(--greobg-radius-card);
	overflow: hidden;
}

.greobg-full-gallery__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.greobg-full-gallery__track::-webkit-scrollbar {
	display: none;
}

.greobg-full-gallery__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.greobg-full-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.9);
	border: none;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--greobg-shadow-card);
	font-size: 1.3rem;
	line-height: 1;
	color: var(--greobg-primary);
}

.greobg-full-gallery__nav--prev {
	left: 10px;
}

.greobg-full-gallery__nav--next {
	right: 10px;
}

@media (max-width: 782px) {
	.greobg-full-gallery__desktop {
		display: none;
	}
	.greobg-full-gallery__mobile {
		display: block;
	}
}

.greobg-details-row {
	clear: both;
	margin-top: 24px;
	position: relative;
	z-index: 1;
}
@media (max-width: 782px) {
	.greobg-details-row {
		margin-top: 12px;
	}
}

.hp-listing__attribute--popular-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.greobg-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--greobg-muted);
	border-radius: 20px;
	font-size: 0.9rem;
	white-space: nowrap;
}
.greobg-pill .hp-icon {
	font-size: 0.85em;
	opacity: 0.7;
}

.greobg-type-pill {
	display: inline-block;
	padding: 4px 14px;
	background: var(--greobg-muted);
	border-radius: 20px;
	font-size: 0.85rem;
	font-weight: 500;
	margin-bottom: 8px;
}

.greobg-amenities-toggle {
	display: inline-block;
	margin-top: 8px;
	padding: 0;
	background: none;
	border: none;
	color: var(--greobg-primary);
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: underline;
	cursor: pointer;
}
.greobg-amenities-full {
	margin-top: 12px;
}

.hp-listing__attributes--primary .hp-listing__attribute--price,
.hp-listing__attributes--primary .hp-listing__attribute--price-max {
	display: none;
}
.hp-listing__attributes--primary {
	display: flex;
	flex-wrap: wrap;
	background: #fff;
	border-radius: var(--greobg-radius-card);
	padding: 16px 20px;
	box-shadow: var(--greobg-shadow-card);
}
.hp-listing__attributes--primary .hp-listing__attribute.greobg-stat {
	background: transparent !important;
}
.greobg-price-card {
	background: #fff;
	border-radius: var(--greobg-radius-card);
	box-shadow: var(--greobg-shadow-card);
	padding: 20px;
	margin-bottom: 16px;
}
.greobg-price-range {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 16px;
}
.greobg-price-value {
	font-size: 1.5rem;
	font-weight: 600;
}
.greobg-price-unit {
	font-size: 0.85rem;
	color: var(--greobg-muted-foreground);
}
.hp-listing__attributes--primary .greobg-stat {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 0 12px;
	border-right: 1px solid var(--greobg-border);
	text-align: center;
}
.hp-listing__attributes--primary .greobg-stat:last-child {
	border-right: none;
}
.hp-listing__attributes--primary .greobg-stat .hp-icon {
	display: block;
	width: 1.2em;
	height: 1.2em;
	line-height: 1.2em;
	margin: 0 auto;
	color: var(--greobg-accent);
	font-size: 1rem;
	text-align: center;
}
.hp-listing__attributes--primary .greobg-stat-label {
	font-size: 0.8rem;
	color: var(--greobg-muted-foreground);
}
.hp-listing__attributes--primary .greobg-stat-value {
	font-size: 1.1rem;
	font-weight: 600;
}

.hp-listing__map {
	border-radius: var(--greobg-radius-card);
	overflow: hidden;
}

.greobg-price-card button.greobg-contact-toggle {
	display: block !important;
	width: 100% !important;
	padding: 14px 16px !important;
	background: var(--greobg-primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease;
}
.greobg-price-card button.greobg-contact-toggle:hover {
	background: #164058 !important;
}
.greobg-contact-panel {
	margin-top: 16px;
	padding: 16px;
	background: var(--greobg-muted);
	border-radius: 1rem;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 0.9rem;
}
.greobg-contact-name {
	font-weight: 600;
}
.greobg-contact-row {
	display: flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}
.greobg-contact-row:hover {
	color: var(--greobg-primary);
}
.greobg-contact-row .hp-icon {
	width: 1em;
	color: var(--greobg-accent);
}
.greobg-contact-languages {
	font-size: 0.8rem;
	color: var(--greobg-muted-foreground);
	padding-top: 4px;
}
.greobg-contact-disclaimer {
	margin: 12px 0 0;
	font-size: 0.75rem;
	color: var(--greobg-muted-foreground);
	line-height: 1.4;
}

.hp-listing__title {
	margin-top: 12px !important;
	margin-bottom: 16px !important;
}
.greobg-type-pill {
	margin-top: 4px;
	margin-bottom: 16px;
}
.hp-listing__details {
	margin-bottom: 8px;
}
.hp-listing__location {
	margin-bottom: 4px;
}

.greobg-pill-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.greobg-card {
	background: #fff;
	border-radius: var(--greobg-radius-card);
	box-shadow: var(--greobg-shadow-card);
	padding: 20px;
	margin-bottom: 16px;
}

/* Header spacing — was overlapping page content below it. */
#header {
	margin-bottom: 30px;
}

.button.button--primary,
.hp-form__button {
	border-radius: 999px !important;
}

/* Archive/catalog cards — price shown is the minimum, so prefix "От " */
.hp-listing__attributes--secondary .hp-listing__attribute--price {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.hp-listing__attributes--secondary .hp-listing__attribute--price::before {
	content: "От ";
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 400;
	letter-spacing: normal;
	color: var(--greobg-muted-foreground);
}

/* Archive/catalog cards — stat row (guests, bedrooms, bathrooms, beach
   distance). Split into value/label spans by greobg_card_stats_script()
   in functions.php; styled here so the number + its icon are smaller
   and terracotta, separate from the label text. */
.hp-listing__attributes--primary .greobg-card-stat {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.hp-listing__attributes--primary .greobg-card-stat .hp-icon {
	color: var(--greobg-accent);
	font-size: 0.8rem;
}

.hp-listing__attributes--primary .greobg-card-stat-value {
	color: var(--greobg-accent);
	font-weight: 600;
	font-size: 0.8rem;
}

.hp-listing__attributes--primary .greobg-card-stat-label {
	font-size: 0.85rem;
	color: var(--greobg-accent);
}

/* Destination cards — image with overlay text. Aspect ratio corrected
   to 4/5 (portrait) per spec — was 4/3, a real mismatch. */
.hp-listing-category.hp-listing-category--view-block {
	position: relative;
	overflow: hidden;
	border-radius: var(--greobg-radius-card);
	aspect-ratio: 4 / 5;
	display: block;
	box-shadow: var(--greobg-shadow-card);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hp-listing-category.hp-listing-category--view-block:hover {
	transform: translateY(-2px);
	box-shadow: var(--greobg-shadow-soft);
}

.hp-listing-category__header,
.hp-listing-category__image,
.hp-listing-category__image a {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
}

.hp-listing-category__image {
	overflow: hidden; /* clips the zoomed image to the card's rounded corners */
}

.hp-listing-category__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.hp-listing-category.hp-listing-category--view-block:hover .hp-listing-category__image img {
	transform: scale(1.08);
}

.hp-listing-category__content {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: 20px;
	color: #fff;
	background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 60%, transparent 100%);
}

.hp-listing-category__name {
	color: #fff;
	margin: 0 0 4px 0;
	font-size: 1.25rem;
}

.hp-listing-category__details--primary {
	color: rgba(255,255,255,0.85);
	font-size: 0.85rem;
	margin-bottom: 6px;
}

/* Description hidden for now — see note below */
.hp-listing-category__description {
	display: none;
}

/* Individual region/category page — hero banner (title + tagline
   overlaid on the hero image, when set) and the plain content below it
   (about text, must-see list). Content/structure is built by
   greobg_region_content_script() (wp_footer JS).
   Aspect ratio corrected to 16/9 per spec's Hero image row — was 21/9. */
.greobg-region-hero {
	position: relative;
	overflow: hidden;
	border-radius: var(--greobg-radius-card);
	aspect-ratio: 16 / 9;
	margin-bottom: 24px;
	box-shadow: var(--greobg-shadow-card);
}

.greobg-region-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.greobg-region-hero__content {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: 32px;
	/* gradient-hero per spec: black 15%→55% top-to-bottom */
	background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
}

/* Title, once moved inside the hero, needs light text instead of its
   normal dark page-title color. */
.greobg-region-hero__content .hp-page__title {
	color: #fff;
	margin: 0 0 8px;
	text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}

.greobg-region-hero__tagline {
	color: rgba(255,255,255,0.92);
	font-size: 1.1rem;
	margin: 0;
	text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

@media (max-width: 782px) {
	.greobg-region-hero__content {
		padding: 20px;
	}
}

/* Plain (no hero image) fallback layout for tagline/about/must-see */
.hp-page__description {
	max-width: 680px;
}

.greobg-region-tagline {
	font-size: 1.1rem;
	color: var(--greobg-muted-foreground);
	margin: 0 0 24px;
}

.hp-page__description h4 {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 600;
	margin: 28px 0 10px;
}

.greobg-region-about {
	color: #3a3a3a;
	line-height: 1.6;
	margin: 0;
}

.greobg-region-mustsee {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.greobg-region-mustsee li {
	position: relative;
	padding-left: 24px;
	color: #3a3a3a;
}

.greobg-region-mustsee li::before {
	content: "📍";
	position: absolute;
	left: 0;
	top: -1px;
	font-size: 0.9em;
}

/* Individual listing card photos — rounded corners */
.hp-listing.hp-listing--view-block .hp-listing__image {
	border-radius: 1rem;
	overflow: hidden;
}

.hp-listing.hp-listing--view-block .hp-listing__image img {
	border-radius: 1rem;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Region teaser card — single listing page, under the map.
   Same visual language as the destination grid cards, scaled down to
   one card. Injected by greobg_region_teaser_script() (wp_footer JS).
   Not explicitly defined in the spec (this component predates the spec
   doc) — extending the same card radius/shadow pattern for consistency. */
.greobg-region-teaser {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--greobg-radius-card);
	aspect-ratio: 16 / 9;
	margin-top: 16px;
	text-decoration: none;
	box-shadow: var(--greobg-shadow-card);
}

.greobg-region-teaser__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.greobg-region-teaser:hover .greobg-region-teaser__img {
	transform: scale(1.08);
}

.greobg-region-teaser__content {
	position: absolute;
	inset: auto 0 0 0;
	padding: 16px;
	color: #fff;
	background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
}

.greobg-region-teaser__name {
	font-size: 1.05rem;
	font-weight: 600;
	margin-bottom: 4px;
}

.greobg-region-teaser__cta {
	font-size: 0.85rem;
	color: rgba(255,255,255,0.9);
}

/* Manual busy-dates picker — front-end Add/Edit Listing form.
   Replaces the plain manual_busy_dates textarea with a Flatpickr
   range-picker + "Добави период" button + removable chips showing
   already-added ranges. See greobg_manual_busy_dates_picker() in
   functions.php for how this is built and inserted. */
.greobg-busy-picker {
	margin-bottom: 12px;
}

.greobg-busy-picker__controls {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}

.greobg-busy-picker__input {
	flex: 1;
	padding: 10px 14px;
	border: 1px solid var(--greobg-border);
	border-radius: 0.5rem;
	font-family: var(--font-body);
	font-size: 0.95rem;
	background: #fff;
}

.greobg-busy-picker__add {
	padding: 10px 18px;
	background: var(--greobg-primary);
	color: #fff;
	border: none;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.greobg-busy-picker__add:hover {
	background: #164058;
}

.greobg-busy-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.greobg-busy-chip {
	background: var(--greobg-muted);
}

.greobg-busy-chip__remove {
	background: none;
	border: none;
	color: var(--greobg-muted-foreground);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 0 0 4px;
}

.greobg-busy-chip__remove:hover {
	color: var(--greobg-accent);
}

/* Flatpickr theme overrides — matches GreoBG palette instead of the
   library's default blue/grey theme. */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
	background: var(--greobg-primary);
	border-color: var(--greobg-primary);
}

.flatpickr-day.inRange {
	background: var(--greobg-muted);
	border-color: var(--greobg-muted);
	box-shadow: -5px 0 0 var(--greobg-muted), 5px 0 0 var(--greobg-muted);
}

.flatpickr-day:hover {
	background: var(--greobg-muted);
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekdays {
	font-family: var(--font-body);
}

/* Availability calendar — single listing page, under the amenities
   pills, before the map. Built by greobg_availability_calendar_script()
   (wp_footer JS) from the (currently manual-only) busy-dates data. */
.greobg-availability-card {
	margin-top: 8px;
	max-width: 420px;
}

.greobg-availability-card h4 {
	margin: 0 0 6px;
}

.greobg-availability-disclaimer {
	color: var(--greobg-muted-foreground);
	font-size: 0.85rem;
	margin: 0 0 20px;
}

.greobg-availability-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.greobg-availability-nav {
	background: none;
	border: none;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--greobg-primary);
	cursor: pointer;
	padding: 4px 10px;
	border-radius: 999px;
	transition: background-color 0.15s ease;
}

.greobg-availability-nav:hover {
	background: var(--greobg-muted);
}

.greobg-availability-month-label {
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 600;
}

.greobg-availability-weekdays,
.greobg-availability-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 8px;
}

.greobg-availability-weekdays {
	margin-bottom: 8px;
	text-align: center;
	color: var(--greobg-muted-foreground);
	font-size: 0.8rem;
	font-weight: 500;
}

.greobg-availability-day {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.75rem;
	font-size: 0.9rem;
}

.greobg-availability-day--blank {
	background: none;
}

.greobg-availability-day--available {
	background: var(--greobg-available);
	color: #3a3a3a;
}

.greobg-availability-day--busy {
	background: var(--greobg-busy);
	color: #8a5a4d;
	text-decoration: line-through;
}

.greobg-availability-legend {
	display: flex;
	gap: 20px;
	margin-top: 20px;
}

.greobg-availability-legend__item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	color: var(--greobg-muted-foreground);
}

.greobg-availability-legend__swatch {
	width: 14px;
	height: 14px;
	border-radius: 4px;
	display: inline-block;
}

.greobg-availability-legend__swatch--available {
	background: var(--greobg-available);
}

.greobg-availability-legend__swatch--busy {
	background: var(--greobg-busy);
}

@media (max-width: 480px) {
	.greobg-availability-day {
		font-size: 0.8rem;
	}
}