/*
 * Pebble Pods Booking — frontend styles.
 * Brand: accent #BB927D, primary text #64554A, white surface.
 * Heading font: Warbler (custom Elementor font loaded by the site).
 */

:root {
	--ppb-accent:        #BB927D;
	--ppb-accent-dark:   #9E7763;
	--ppb-text:          #64554A;
	--ppb-text-soft:     #8A7A6F;
	--ppb-line:          #E8E2DC;
	--ppb-line-soft:     #F2EDE8;
	--ppb-bg:            #FFFFFF;
	--ppb-bg-warm:       #FBF8F5;
	--ppb-radius:        14px;
	--ppb-radius-sm:     10px;
	--ppb-shadow:        0 6px 24px rgba(100, 85, 74, .08), 0 1px 3px rgba(100, 85, 74, .06);
	--ppb-shadow-hover:  0 12px 36px rgba(100, 85, 74, .12), 0 2px 6px rgba(100, 85, 74, .08);
	--ppb-font-display:  "warbler", "Warbler", Georgia, serif;
	--ppb-font-body:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.ppb-page {
	background: var(--ppb-bg);
	color: var(--ppb-text);
	font-family: var(--ppb-font-body);
	font-size: 16px;
	line-height: 1.6;
	padding: 40px 0 80px;
}

.ppb-container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.ppb-container--wide { max-width: 1320px; }

/* ---------------- Header rows ---------------- */

.ppb-pod-header,
.ppb-archive-header { margin-bottom: 28px; }
.ppb-archive-header { text-align: center; margin-bottom: 48px; }

.ppb-eyebrow {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--ppb-text-soft);
	font-weight: 600;
	margin: 0 0 12px;
}

.ppb-pod-title,
.ppb-archive-title {
	font-family: var(--ppb-font-display);
	color: var(--ppb-text);
	font-weight: 500;
	letter-spacing: -.01em;
	margin: 0 0 8px;
}
.ppb-pod-title     { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.05; }
.ppb-archive-title { font-size: clamp(40px, 5vw, 64px);   line-height: 1.02; }

.ppb-accent { color: var(--ppb-accent); }

.ppb-pod-subtitle,
.ppb-archive-sub {
	color: var(--ppb-text-soft);
	font-size: 17px;
	margin: 0;
	max-width: 580px;
}
.ppb-archive-sub { margin: 0 auto; }

.ppb-pod-meta {
	margin: 12px 0 0;
	font-size: 15px;
	color: var(--ppb-text-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ppb-pod-meta > span:nth-child(even) { color: var(--ppb-line); }

/* ---------------- Gallery ---------------- */

.ppb-gallery {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 8px;
	border-radius: var(--ppb-radius);
	overflow: hidden;
	margin-bottom: 40px;
	aspect-ratio: 2.2 / 1;
	background: var(--ppb-line-soft);
}

.ppb-gallery-main,
.ppb-gallery-cell {
	background: var(--ppb-line-soft);
	overflow: hidden;
}

.ppb-gallery-main img,
.ppb-gallery-cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

.ppb-gallery-main:hover img,
.ppb-gallery-cell:hover img { transform: scale(1.03); }

.ppb-gallery-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 8px;
}

/* The mobile carousel is hidden on desktop. */
.ppb-carousel { display: none; }

/* ---------------- Mobile gallery carousel ---------------- */

@media (max-width: 720px) {
	/* Switch the gallery container from a grid into a plain block and let the
	   carousel fill it. Hide the desktop grid + big tile entirely. */
	.ppb-gallery {
		display: block;
		aspect-ratio: auto;
		border-radius: var(--ppb-radius);
		margin-bottom: 28px;
		background: transparent;
		overflow: visible;
	}

	.ppb-gallery-main,
	.ppb-gallery-grid { display: none; }

	.ppb-carousel {
		display: block;
		position: relative;
	}

	/* Horizontal scroll-snap track — native, smooth, swipeable, no JS needed to scroll. */
	.ppb-carousel-track {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		border-radius: var(--ppb-radius);
		/* hide scrollbar */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.ppb-carousel-track::-webkit-scrollbar { display: none; }

	.ppb-carousel-slide {
		flex: 0 0 100%;
		width: 100%;
		scroll-snap-align: center;
		aspect-ratio: 4 / 3;
		background: var(--ppb-line-soft);
	}

	.ppb-carousel-slide img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	/* "2 / 6" counter pill, top-right. */
	.ppb-carousel-counter {
		position: absolute;
		top: 12px;
		right: 12px;
		background: rgba(26, 22, 19, .68);
		color: #fff;
		font-size: 13px;
		font-weight: 600;
		line-height: 1;
		padding: 6px 10px;
		border-radius: 999px;
		pointer-events: none;
	}

	/* Dots under the image. */
	.ppb-carousel-dots {
		display: flex;
		justify-content: center;
		gap: 7px;
		margin-top: 12px;
	}

	.ppb-carousel-dot {
		width: 7px;
		height: 7px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--ppb-line);
		cursor: pointer;
		transition: background .2s ease, transform .2s ease;
	}

	.ppb-carousel-dot.is-active {
		background: var(--ppb-accent);
		transform: scale(1.35);
	}
}

/* ---------------- Two-column layout ---------------- */

.ppb-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

@media (max-width: 900px) {
	.ppb-layout { grid-template-columns: 1fr; gap: 32px; }
}

.ppb-pod-info { padding-top: 4px; }

.ppb-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 28px;
	padding: 20px 0;
	border-bottom: 1px solid var(--ppb-line);
	margin-bottom: 28px;
	color: var(--ppb-text);
	font-size: 15px;
}
.ppb-meta > span { display: inline-flex; align-items: center; gap: 8px; }

.ppb-i {
	display: inline-block;
	width: 18px; height: 18px;
	background: var(--ppb-accent);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	flex-shrink: 0;
}
.ppb-i-bed  { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 18v-6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v6'/><path d='M2 14h20'/><path d='M4 18v2'/><path d='M20 18v2'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 18v-6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v6'/><path d='M2 14h20'/><path d='M4 18v2'/><path d='M20 18v2'/></svg>"); }
.ppb-i-tub  { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11h18v6a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3z'/><path d='M5 11V6a2 2 0 0 1 2-2h2'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11h18v6a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3z'/><path d='M5 11V6a2 2 0 0 1 2-2h2'/></svg>"); }
.ppb-i-fire { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2c1 3 4 4 4 8a4 4 0 0 1-8 0c0-2 1-3 2-4'/><path d='M12 22a6 6 0 0 0 6-6c0-3-2-5-3-6'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2c1 3 4 4 4 8a4 4 0 0 1-8 0c0-2 1-3 2-4'/><path d='M12 22a6 6 0 0 0 6-6c0-3-2-5-3-6'/></svg>"); }
.ppb-i-wifi { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12a10 10 0 0 1 14 0'/><path d='M8.5 15.5a5 5 0 0 1 7 0'/><circle cx='12' cy='19' r='1'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12a10 10 0 0 1 14 0'/><path d='M8.5 15.5a5 5 0 0 1 7 0'/><circle cx='12' cy='19' r='1'/></svg>"); }

.ppb-description {
	font-size: 17px;
	color: var(--ppb-text);
	padding-bottom: 32px;
	border-bottom: 1px solid var(--ppb-line);
	margin-bottom: 32px;
	white-space: pre-line;
}

.ppb-scenery {
	margin: 0 0 32px;
	border-radius: var(--ppb-radius);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--ppb-line-soft);
}
.ppb-scenery img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ppb-amenities h2 {
	font-family: var(--ppb-font-display);
	font-size: 26px;
	font-weight: 500;
	color: var(--ppb-text);
	margin: 0 0 20px;
}

.ppb-amenities ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 24px;
}
.ppb-amenities li {
	position: relative;
	padding-left: 24px;
	font-size: 15px;
}
.ppb-amenities li::before {
	content: "";
	position: absolute;
	left: 0; top: 7px;
	width: 14px; height: 9px;
	border-left: 2px solid var(--ppb-accent);
	border-bottom: 2px solid var(--ppb-accent);
	transform: rotate(-45deg);
}

@media (max-width: 520px) { .ppb-amenities ul { grid-template-columns: 1fr; } }

/* ---------------- Book now card (sidebar) ---------------- */

.ppb-booking-card-wrap { position: sticky; top: 96px; }
@media (max-width: 900px) { .ppb-booking-card-wrap { position: static; } }

.ppb-booking-card {
	background: var(--ppb-bg);
	border: 1px solid var(--ppb-line);
	border-radius: var(--ppb-radius);
	padding: 28px 26px;
	box-shadow: var(--ppb-shadow);
	transition: box-shadow .2s ease;
}
.ppb-booking-card:hover { box-shadow: var(--ppb-shadow-hover); }

.ppb-card-heading {
	font-family: var(--ppb-font-display);
	font-weight: 500;
	font-size: 24px;
	line-height: 1.2;
	color: var(--ppb-text);
	margin: 0 0 8px;
}

.ppb-card-body {
	color: var(--ppb-text-soft);
	font-size: 15px;
	margin: 0 0 22px;
}

.ppb-card-foot {
	margin: 14px 0 0;
	text-align: center;
	color: var(--ppb-text-soft);
	font-size: 13px;
}

/* ---------------- Book now button (used in card, shortcodes, anywhere) ---------------- */

.ppb-book-btn {
	display: inline-block;
	background: var(--ppb-accent);
	color: #fff !important;
	text-decoration: none !important;
	font-family: var(--ppb-font-body);
	font-weight: 600;
	letter-spacing: .01em;
	border-radius: var(--ppb-radius-sm);
	border: 0;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease, box-shadow .2s ease;
	text-align: center;
	line-height: 1.2;
}
.ppb-book-btn:hover  { background: var(--ppb-accent-dark); color: #fff !important; box-shadow: 0 6px 16px rgba(100,85,74,.18); }
.ppb-book-btn:active { transform: scale(.98); }

.ppb-book-btn--small  { padding: 10px 18px; font-size: 14px; }
.ppb-book-btn--medium { padding: 13px 22px; font-size: 15px; }
.ppb-book-btn--large  { padding: 16px 24px; font-size: 16px; width: 100%; }

/* ---------------- Pod cards grid ---------------- */

.ppb-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 28px;
}

.ppb-card {
	display: block;
	background: var(--ppb-bg);
	border: 1px solid var(--ppb-line);
	border-radius: var(--ppb-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .25s ease, box-shadow .25s ease;
	box-shadow: var(--ppb-shadow);
}
.ppb-card:hover { transform: translateY(-4px); box-shadow: var(--ppb-shadow-hover); }

.ppb-card-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ppb-line-soft); }
.ppb-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.ppb-card:hover .ppb-card-media img { transform: scale(1.05); }

.ppb-card-body { padding: 20px 22px 22px; }

.ppb-card-title {
	font-family: var(--ppb-font-display);
	font-size: 22px;
	font-weight: 500;
	color: var(--ppb-text);
	margin: 0 0 6px;
}
.ppb-card-excerpt { color: var(--ppb-text-soft); font-size: 14px; margin: 0 0 14px; min-height: 2.8em; }
.ppb-card-cta     { margin: 0; color: var(--ppb-accent); font-weight: 600; font-size: 14px; }