/*
==========================================
RESPONSIVE DESIGN
==========================================
*/

/* =========================
   TABLET (<= 1199px)
========================= */

@media (max-width: 1199px) {

	.pr-hero-grid {

		grid-template-columns: 1fr 1fr;

		gap: 30px;

	}

	/* Hide sticky behavior on image */
	.pr-hero__image {

		position: static;

	}

	/* Booking card moves below content */
	.pr-location-grid {

		grid-template-columns: 1fr;

	}

	.pr-related-grid {

		grid-template-columns: repeat(2, 1fr);

	}

	.pr-highlights {

		grid-template-columns: repeat(2, 1fr);

	}

	.pr-toc ul {

		gap: 15px;

	}

}

@media (max-width: 768px) {

	/* =========================
	   HERO STACK
	========================= */

	.pr-hero-grid {

		grid-template-columns: 1fr;

	}

	.pr-title {

		font-size: 1.8rem;

	}

	.pr-tagline {

		font-size: 1rem;

	}

	.pr-meta {

		gap: 8px;

	}

	.pr-badge {

		font-size: 0.85rem;

		padding: 6px 12px;

	}

	/* =========================
	   BOOKING CARD FIX
	========================= */

	.pr-booking-card {

		position: static;

		margin-top: 20px;

	}

	.pr-actions .pr-btn {

		font-size: 0.95rem;

		padding: 12px 18px;

	}

	/* =========================
	   HIGHLIGHTS
	========================= */

	.pr-highlights {

		grid-template-columns: 1fr;

	}

	/* =========================
	   TOC (HORIZONTAL SCROLL)
	========================= */

	.pr-toc {

		position: static;

		overflow-x: auto;

	}

	.pr-toc ul {

		flex-wrap: nowrap;

		white-space: nowrap;

	}

	.pr-toc a {

		display: inline-block;

		padding: 8px 12px;

		background: #f8fafc;

		border-radius: 20px;

	}

	/* =========================
	   RELATED RESORTS
	========================= */

	.pr-related-grid {

		grid-template-columns: 1fr;

	}

	/* =========================
	   LOCATION STACK
	========================= */

	.pr-location-grid {

		grid-template-columns: 1fr;

	}

}

@media (max-width: 1024px) {

	.pr-archive-grid {

		grid-template-columns: repeat(2, 1fr);

	}

}

@media (max-width: 768px) {

	.pr-archive-grid {

		grid-template-columns: 1fr;

	}

}