/*
Version: 1.18.4
Version date: 30-09-2026

Asty Booking — the property page (v1.8).

Loaded only where our own property template is rendering. Kept apart from
`front.css` because that file is on the search, results and listing pages too,
and none of them can match a single selector below.

⚠⚠ EVERY LIST HERE IS ALSO IN THE DOUBLED VILLAGIO RESET AT THE TOP OF
`front.css`. Villagio ships `ul li + li { margin-top: 0.6875em }` (0,0,3) and
`.widget ul li + li { margin-top: 1.5em }` (0,1,3); both skip the first item, so
the symptom of forgetting is "the first item sits higher", which reads as a bug
in the component. A single class loses to the second rule inside a widget while
winning in the content column — hence the doubled selector, and hence it living
in one place. ★ Adding a list here means adding it there.

⚠ NO COLOUR IS NAMED. `currentColor`, `color-mix()` against it, and the system
`Canvas` keyword are the whole palette — the icons are drawn the same way, so a
change of theme carries this page with it.
*/

.astyb-property {
	--astyb-radius: 12px;
	--astyb-hair: color-mix(in srgb, currentColor 16%, transparent);
	--astyb-mute: color-mix(in srgb, currentColor 62%, transparent);
}

/* ---------------------------------------------------------------------------
   The breadcrumb
   ------------------------------------------------------------------------ */

.astyb-crumbs {
	margin: 1rem 0 0.75rem;
	font-size: 0.875em;
}

.astyb-crumbs-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35em 0.55em;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ⚠ Drawn in CSS, not typed into the markup: a separator must not be copied
   with the trail and must not be read aloud. */
.astyb-crumbs-list > li + li::before {
	content: "\203A";
	margin-right: 0.55em;
	color: var(--astyb-mute);
}

.astyb-crumb > span {
	color: var(--astyb-mute);
}

/* ---------------------------------------------------------------------------
   The hero grid — one large photograph and four small ones
   ------------------------------------------------------------------------ */

.astyb-hero {
	position: relative;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 8px;
	aspect-ratio: 2 / 1;
	margin: 0 0 1.5rem;
	border-radius: var(--astyb-radius);
	overflow: hidden;
}

.astyb-hero-cell {
	margin: 0;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	background: var(--astyb-hair);
}

.astyb-hero-cell--0 {
	grid-row: 1 / span 2;
}

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

.astyb-hero-cell:hover .astyb-hero-img {
	transform: scale(1.03);
}

/* ⚠ Degrade by count, never by leaving holes. Six of the imported properties
   have fewer than ten photographs and one has six. */
.astyb-hero[data-count="1"] {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

.astyb-hero[data-count="2"],
.astyb-hero[data-count="3"],
.astyb-hero[data-count="4"] {
	grid-template-columns: 2fr 1fr;
}

.astyb-hero[data-count="2"] .astyb-hero-cell--1 {
	grid-row: 1 / span 2;
}

.astyb-hero-all {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.5em 0.9em;
	border: 1px solid currentColor;
	border-radius: 8px;
	background: Canvas;
	font-size: 0.875rem;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}

.astyb-hero-all:hover,
.astyb-hero-all:focus {
	background: color-mix(in srgb, Canvas 88%, currentColor);
}

/* ---------------------------------------------------------------------------
   Two columns; the call to action follows the reader down
   ------------------------------------------------------------------------ */

.astyb-property-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 2.5rem;
	align-items: start;
}

/* ★ 1.14.0 — no aside at all (every «can be booked online» switch off): the
   text takes the full width rather than leaving the 340px column blank. */
.astyb-property-body--full {
	grid-template-columns: minmax(0, 1fr);
}

/* ⚠ 1.18.4 — the text column is `<main id="main">` (the theme's skip link
   aims at it), and Avada's header opens a `<main id="main">` of its own. Its
   `#main` rule — the page's 84px × 30px padding and a white background — then
   landed on our column as well and pushed the text away from the photographs.
   Avada also has `html:not(.avada-has-site-width-percent) #main` (1,1,1) for
   the side padding, so this is (1,2,0). Not part of the classic look: it is a
   clash, corrected under any theme. */
.astyb-property #main.astyb-property-main {
	padding: 0;
	background: none;
}

.astyb-property-aside {
	position: sticky;
	top: 2rem;
}

.astyb-property-cta {
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--astyb-hair);
	border-radius: var(--astyb-radius);
}

/* ★ 1.14.0 — the online booking box: Hotel Booking's own form, above the
   enquiry form, framed the same way.

   ⚠ `mphb-divi` (active on live) paints every `.mphb-booking-form .button`
   transparent with `border: 2px solid` in an inherited WHITE — made for a Divi
   colour scheme, invisible on Villagio: the «Check Availability» and «Confirm
   Reservation» buttons were blank rectangles. Its rule is (0,2,0); this is
   (0,3,0). No colour named, per the house rule: outlined in the text colour. */
.astyb-property-book {
	margin-bottom: 1.25rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--astyb-hair);
	border-radius: var(--astyb-radius);
}

.astyb-property-book-title {
	margin: 0 0 0.5em;
}

.astyb-property-book .mphb-booking-form .button {
	padding: 0.7em 1.4em;
	border: 1px solid currentColor;
	border-radius: var(--astyb-radius);
	color: inherit;
	background: transparent;
}

.astyb-property-book .mphb-booking-form .button:hover,
.astyb-property-book .mphb-booking-form .button:focus-visible {
	background: var(--astyb-hair);
}

/* The host lays this form out as a horizontal bar — floated rows in a
   form capped at `max-width: 50%` — which in a 340px column left it 149px wide
   and cut «10/11/2026» to «10/11/20». Stacked, full width. */
.astyb-property-book .mphb_sc_booking_form-wrapper,
.astyb-property-book .mphb-booking-form,
.astyb-property-book .mphb-booking-form > p {
	float: none;
	width: auto;
	max-width: none;
}

.astyb-property-book .mphb-booking-form .mphb-datepick {
	width: 100%;
	box-sizing: border-box;
}

.astyb-property-book-charges {
	margin: 0.75em 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.85em;
	color: var(--astyb-mute);
}

/* ---------------------------------------------------------------------------
   Title, place, the row of facts
   ------------------------------------------------------------------------ */

.astyb-property-title {
	margin: 0 0 0.15em;
}

.astyb-property-place {
	margin: 0 0 0.9em;
	color: var(--astyb-mute);
}

.astyb-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.4em;
	margin: 1em 0 0;
	padding: 0;
	list-style: none;
}

.astyb-fact {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
}

.astyb-fact-icon,
.astyb-amenity-icon,
.astyb-feature-mark,
.astyb-feature-icon,
.astyb-feature-group-icon,
.astyb-hero-all-icon {
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   The description — clamped by JavaScript ONLY
   ------------------------------------------------------------------------ */

.astyb-description {
	position: relative;
	margin: 1.75rem 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--astyb-hair);
}

/* ⚠⚠ The clamp hangs off a class the SCRIPT adds, never off the element
   itself. With no JavaScript the description is simply whole — an enhancement
   that hides text can only ever fail towards showing more. This project has
   already shipped one expander that did nothing, because it was written the
   other way round and `[hidden]` lost to an author `display` rule. */
/* ⚠ The height is set by the SCRIPT, in pixels, from the line height it
   measured — not by `-webkit-line-clamp` here. Two reasons, both learned the
   hard way:

   1. `-webkit-line-clamp` needs `display: -webkit-box`, which turns `::after`
      into a box child. The fade then gets clamped along with the text and
      lands in the middle of the paragraph.
   2. A `max-height` in `em` guesses the theme's line height. The script does
      not have to guess — it already measures, to decide whether clamping is
      worth doing at all. */
.astyb-description.astyb-is-clamped .astyb-description-text {
	position: relative;
	overflow: hidden;
}

.astyb-description.astyb-is-clamped .astyb-description-text::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3.2em;
	background: linear-gradient(to bottom, transparent, Canvas);
	pointer-events: none;
}

/* ⚠ `text-transform` and `letter-spacing` are reset explicitly. This is a
   `<button>` — the only correct element for a control that changes the page
   without navigating — and Villagio styles every button as a call to action:
   uppercase and letter-spaced. That turned a quiet «Read more» into a shouted
   «READ MORE» sitting under a paragraph. `font: inherit` does not cover either
   property, which is exactly why it looked like it should have. */
.astyb-description-more {
	display: inline-block;
	margin-top: 0.6em;
	padding: 0;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-transform: none;
	letter-spacing: normal;
	line-height: inherit;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
   The guest's icon grid
   ------------------------------------------------------------------------ */

.astyb-featureset {
	margin: 1.75rem 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--astyb-hair);
}

.astyb-featureset-title {
	margin: 0 0 0.9em;
}

.astyb-amenity-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 0.7em 1.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.astyb-amenity-grid--plain {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.astyb-amenity {
	display: flex;
	align-items: center;
	gap: 0.6em;
}

/* ---------------------------------------------------------------------------
   The buyer's ticked / struck-through list
   ------------------------------------------------------------------------ */

.astyb-feature-groups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem 2rem;
}

/* Class doubled (1.18.4): a theme heading rule such as Avada's
   `.post-content h3` (0,1,1) out-weighed a single class. */
.astyb-feature-group-title.astyb-feature-group-title {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 0.6em;
	font-size: 1em;
}

.astyb-feature-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.astyb-feature {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.16em 0;
}

/* ⚠ Struck through AND faded, not one or the other. The strike alone is easy
   to miss at a glance; the fade alone reads as "still loading". Together they
   say "we checked, and it has not got one" — which is the only reason to print
   an absent feature at all. */
.astyb-feature.is-no {
	color: var(--astyb-mute);
}

.astyb-feature.is-no > span {
	text-decoration: line-through;
}

/* ---------------------------------------------------------------------------
   Detailed characteristics — energy class, heating, glazing.

   ⚠ Name and value, not a yes/no list, so it is a `<dl>`. Each row is a grid
   with the icon in its own track, which keeps every label on the same left edge
   whatever the icon's drawn width — a flex row would let a wide icon push one
   label out of line with the rest, and the misalignment reads as a broken glyph.

   ⚠ `<dd>` carries a browser default `margin-inline-start: 40px`. Unset, or the
   value sits far off to the right of its own label.
   ------------------------------------------------------------------------ */

.astyb-attributes {
	margin: 1.75rem 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--astyb-hair);
}

.astyb-attribute-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 0.7em 1.5em;
	margin: 0;
	padding: 0;
}

.astyb-attribute {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	column-gap: 0.55em;
}

.astyb-attribute-icon {
	grid-row: span 2;
	align-self: center;
}

/* ⚠ No `text-transform: uppercase` — tried on 17-08-2026 and dropped the same
   day. These labels are Greek and several are long («Ενεργειακή κλάση», «Τύποι
   Υαλοπινάκων»); capitalising them widens every one, breaks more of them onto a
   second line, and Greek accents are conventionally dropped in all-caps, which
   this does not do. It reads as shouting rather than as a caption. */
.astyb-attribute-label {
	margin: 0;
	font-size: 0.82em;
	letter-spacing: 0.02em;
	color: var(--astyb-mute);
}

.astyb-attribute-value {
	margin: 0;
	margin-inline-start: 0;
}

.astyb-featureset-full {
	margin-top: 1.5rem;
}

.astyb-featureset-full > .astyb-featureset {
	margin-top: 1rem;
	padding-top: 0;
	border-top: 0;
}

.astyb-featureset-more {
	display: inline-block;
	border-bottom: 1px solid currentColor;
	cursor: pointer;
}

/* ⚠ Staff only — the template gates it on `ASTYB_CAP`. Deliberately quiet: it
   is an editorial tool sitting on a public page, not a call to action. */
.astyb-profile-switch {
	margin: 2rem 0 0;
	font-size: 0.8125em;
	opacity: 0.7;
}

/* ---------------------------------------------------------------------------
   The headline price
   ------------------------------------------------------------------------ */

.astyb-headline-prices {
	margin: 0.35em 0 0;
}

.astyb-headline-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 0.5em;
	margin: 0 0 0.15em;
}

/* ★ The figure is the thing the visitor came for, so it is the biggest thing
   in this block and the only bold one. */
.astyb-headline-price__value {
	font-size: 1.75em;
	font-weight: 700;
	line-height: 1.2;
}

.astyb-headline-price__from,
.astyb-headline-price__period {
	font-size: 0.55em;
	font-weight: 400;
	color: var(--astyb-mute);
}

/* ⚠ A qualifier, not a heading. The plan's name is already a badge two lines
   above; at heading weight it read as the section title and said the same
   thing twice. */
.astyb-headline-price__label {
	font-size: 0.875em;
	font-weight: 400;
	color: var(--astyb-mute);
}

/* ---------------------------------------------------------------------------
   Every photograph — present for the viewer, for `noscript`, and for crawlers
   ------------------------------------------------------------------------ */

/* ⚠⚠ Hidden, NOT removed. The «show all photographs» control is a real anchor
   pointing at this section, the viewer reads its photographs and its `alt`
   text out of it, and a `<noscript>` rule in the template puts it back for a
   visitor with no JavaScript. See `templates/front/single-property.php`. */
.astyb-photos {
	display: none;
}

.astyb-photos-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 10px;
}

.astyb-photo {
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	overflow: hidden;
	background: var(--astyb-hair);
	cursor: pointer;
}

.astyb-photo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
   The contact sheet — step one of two
   ---------------------------------------------------------------------------
   «Show all photographs» opens this; a photograph in it opens the viewer, and
   closing the viewer comes back here. Two questions, two steps: *what is
   there*, then *let me look at that one*.
   ------------------------------------------------------------------------ */

.astyb-sheet {
	position: fixed;
	inset: 0;
	z-index: 99999;
	overflow-y: auto;
	background: Canvas;
	padding: 0 0 3rem;
}

.astyb-sheet-bar {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.9rem 1.5rem;
	background: Canvas;
	border-bottom: 1px solid var(--astyb-hair, rgba(128, 128, 128, 0.25));
}

.astyb-sheet-count {
	font-weight: 600;
}

.astyb-sheet-close {
	padding: 0.45em 1.1em;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: none;
	color: inherit;
	font: inherit;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.astyb-sheet-body {
	max-width: 1180px;
	margin: 0 auto;
	padding: 1.5rem;
}

/* ⚠ The grid inside the sheet is a **copy** of the hidden one, so it needs its
   `display` back — `.astyb-photos { display: none }` does not reach it, but a
   future selector written against `.astyb-photos-grid` easily could. */
.astyb-sheet .astyb-photos-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
}

.astyb-sheet .astyb-photo {
	cursor: zoom-in;
}

/* ---------------------------------------------------------------------------
   The photograph viewer — step two
   ------------------------------------------------------------------------ */

.astyb-hero-cell.astyb-is-clickable {
	cursor: zoom-in;
}

/* ⚠ The one place in this plugin that names a colour. A viewer is a dark room:
   the photograph has to be the only lit thing in it, and `Canvas` would be the
   theme's own white on nine sites out of ten. */
.astyb-viewer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	grid-template-columns: 5rem 1fr 5rem;
	grid-template-rows: 3.5rem 1fr;
	align-items: center;
	background: #0b0b0c;
	color: #fff;
}

.astyb-viewer-bar {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1rem;
}

.astyb-viewer-count {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
}

.astyb-viewer-close {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.45em 1em;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: inherit;
	font: inherit;
	font-size: 0.9375rem;
	cursor: pointer;
}

.astyb-viewer-close:hover,
.astyb-viewer-close:focus {
	background: rgba(255, 255, 255, 0.22);
}

.astyb-viewer-stage {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	min-width: 0;
	min-height: 0;
	height: 100%;
	padding-bottom: 2rem;
}

.astyb-viewer-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.astyb-viewer-nav {
	grid-row: 2;
	justify-self: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: inherit;
	cursor: pointer;
}

.astyb-viewer-nav:hover,
.astyb-viewer-nav:focus {
	background: rgba(255, 255, 255, 0.22);
}

.astyb-viewer-prev {
	grid-column: 1;
}

.astyb-viewer-next {
	grid-column: 3;
}

/* Chevrons drawn in CSS: two glyphs, no request, no icon to keep in step. */
.astyb-viewer-nav::before {
	content: "";
	display: block;
	width: 11px;
	height: 11px;
	margin: 0 auto;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.astyb-viewer-prev::before {
	transform: translateX(2px) rotate(-135deg);
}

.astyb-viewer-next::before {
	transform: translateX(-2px) rotate(45deg);
}

.astyb-no-scroll {
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Narrow screens
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
	.astyb-property-body {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.astyb-property-aside {
		position: static;
	}
}

@media (max-width: 640px) {
	/* ⚠ One photograph, not a shrunken five. Four thumbnails 60 pixels wide
	   show nothing and cost four requests; the button carries the count. */
	.astyb-hero {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		aspect-ratio: 4 / 3;
	}

	.astyb-hero .astyb-hero-cell {
		display: none;
	}

	.astyb-hero .astyb-hero-cell--0 {
		display: block;
		grid-row: 1;
	}
}

@media (max-width: 640px) {
	/* ⚠ The side arrows would each eat a fifth of a phone screen. They move
	   under the photograph, where a thumb reaches them. */
	.astyb-viewer {
		grid-template-columns: 1fr;
		grid-template-rows: 3.5rem 1fr 4.5rem;
	}

	.astyb-viewer-stage {
		grid-column: 1;
		padding-bottom: 0;
	}

	.astyb-viewer-nav {
		grid-row: 3;
		grid-column: 1;
	}

	.astyb-viewer-prev {
		justify-self: end;
		margin-right: 3.5rem;
	}

	.astyb-viewer-next {
		justify-self: start;
		margin-left: 3.5rem;
	}
}

/* ---------------------------------------------------------------------------
   The availability line
   ------------------------------------------------------------------------ */

.astyb-availability {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0.7em 0 0;
	padding: 0.25em 0.7em 0.25em 0.5em;
	border: 1px solid var(--astyb-hair);
	border-radius: 999px;
	font-size: 0.9375em;
}

/* ⚠ Not painted green or red. This file names no colour, and «not available»
   is a fact rather than an error — the icon and the border carry it. */
.astyb-availability.is-later {
	color: var(--astyb-mute);
}

.astyb-availability-icon {
	flex: 0 0 auto;
}


/* The two short texts of «Περιγραφή και πολυμέσα», when a layout shows them
   (1.18.1). Neutral — the theme owns the palette. */
.astyb-property-site-title {
	margin: 0 0 0.6em;
	font-size: 1.15em;
	font-weight: 500;
}

.astyb-property-summary {
	margin: 0 0 1em;
	font-size: 1.05em;
	line-height: 1.5;
}