/*
==========================================
RESORT HERO
==========================================
*/

.pr-hero{

	padding:40px 0 20px;

}

.pr-hero-grid{

	display:grid;

	grid-template-columns:

		380px

		1fr

		320px;

	gap:40px;

	align-items:start;

}

/*
==========================================
IMAGE
==========================================
*/

.pr-hero__image{

	position:sticky;

	top:30px;

}

.pr-hero__image img{

	width:100%;

	display:block;

	border-radius:16px;

	box-shadow:var(--pr-shadow);

}

/*
==========================================
CONTENT
==========================================
*/

.pr-title{

	font-size:2.5rem;

	line-height:1.2;

	margin:0 0 10px;

}

.pr-tagline{

	font-size:1.15rem;

	color:var(--pr-text-light);

	margin-bottom:25px;

}

.pr-meta{

	display:flex;

	flex-wrap:wrap;

	gap:12px;

	margin-bottom:30px;

}

.pr-badge{

	display:inline-flex;

	align-items:center;

	padding:8px 16px;

	background:#f3f4f6;

	border-radius:100px;

	font-size:.95rem;

	font-weight:500;

}

/*
==========================================
PRICE
==========================================
*/

.pr-price{

	font-size:2rem;

	font-weight:700;

	color:var(--pr-primary);

	margin:25px 0;

}

.pr-price small{

	display:block;

	font-size:.95rem;

	font-weight:500;

	color:var(--pr-text-light);

	margin-top:6px;

}

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

.pr-booking-card{

	position:sticky;

	top:30px;

	padding:30px;

	border-radius:16px;

	background:#fff;

	border:1px solid var(--pr-border);

	box-shadow:var(--pr-shadow);

}

.pr-booking-card .pr-price{

	margin-top:0;

	text-align:center;

}

.pr-actions{

	display:flex;

	flex-direction:column;

	gap:14px;

	margin-top:30px;

}

.pr-actions .pr-btn{

	width:100%;

	justify-content:center;

}

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

.pr-highlights{

	display:grid;

	grid-template-columns:

	repeat(3,1fr);

	gap:18px;

	margin-top:50px;

}

.pr-highlight{

	padding:16px 20px;

	border-radius:12px;

	background:#f8fafc;

	border:1px solid var(--pr-border);

	font-weight:500;

}

/*
==========================================
TABLE OF CONTENTS
==========================================
*/

.pr-toc{

	margin:50px 0;

	padding:16px 0;

	border-top:1px solid var(--pr-border);

	border-bottom:1px solid var(--pr-border);

	background:#fff;

	position:sticky;

	top:0;

	z-index:50;

}

.pr-toc ul{

	margin:0;

	padding:0;

	list-style:none;

	display:flex;

	gap:25px;

	flex-wrap:wrap;

}

.pr-toc a{

	font-weight:600;

	color:var(--pr-text);

}

.pr-toc a:hover{

	color:var(--pr-primary);

}

/*
==========================================
SECTIONS
==========================================
*/

.pr-section{

	padding:80px 0;

}

.pr-section-header{

	margin-bottom:35px;

}

.pr-section-header h2{

	font-size:2rem;

	margin:0;

}

.pr-content{

	max-width:900px;

}

.pr-content p{

	margin-bottom:20px;

}

.pr-content ul{

	padding-left:22px;

}

.pr-content li{

	margin-bottom:10px;

}

/*
==========================================
AMENITIES
ACTIVITIES
==========================================
*/

.pr-term-grid{

	display:grid;

	grid-template-columns:

	repeat(auto-fill,minmax(220px,1fr));

	gap:18px;

}

.pr-term-card{

	display:flex;

	align-items:center;

	gap:12px;

	padding:18px;

	background:#fff;

	border:1px solid var(--pr-border);

	border-radius:12px;

	transition:.25s;

}

.pr-term-card:hover{

	transform:translateY(-3px);

	box-shadow:var(--pr-shadow);

}

.pr-term-icon{

	color:var(--pr-primary);

	font-weight:bold;

}

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

.pr-location-grid{

	display:grid;

	grid-template-columns:420px 1fr;

	gap:40px;

	align-items:start;

}

.pr-location-info{

	display:flex;

	flex-direction:column;

	gap:20px;

}

.pr-location-item{

	padding:20px;

	background:#fff;

	border:1px solid var(--pr-border);

	border-radius:12px;

}

.pr-location-item h3{

	margin:0 0 10px;

	font-size:1rem;

}

.pr-location-item p{

	margin:0;

	color:var(--pr-text-light);

}

.pr-location-action{

	margin-top:15px;

}

.pr-map-wrapper{

	border-radius:16px;

	overflow:hidden;

	box-shadow:var(--pr-shadow);

}

.pr-map-wrapper iframe{

	display:block;

	width:100%;

	border:0;

}

/*
==========================================
ROOM DETAILS
==========================================
*/

.pr-room-details .pr-content{

	max-width:none;

}

.pr-room-details h3{

	margin-top:35px;

	margin-bottom:15px;

	color:var(--pr-primary);

}

.pr-room-details ul{

	margin-bottom:30px;

}

.pr-stay-info{

	display:flex;

	gap:20px;

	margin-top:35px;

	flex-wrap:wrap;

}

.pr-stay-item{

	padding:16px 22px;

	border-radius:12px;

	background:#F8FAFC;

	border:1px solid var(--pr-border);

}

/*
==========================================
FAQ
==========================================
*/

.pr-faq .pr-content{

	max-width:900px;

}

.pr-faq h3{

	margin-top:30px;

	margin-bottom:10px;

	color:var(--pr-primary);

}

.pr-faq p{

	margin-bottom:20px;

}

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

.pr-related-grid{

	display:grid;

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

	gap:30px;

}

.pr-card{

	background:#fff;

	border-radius:16px;

	overflow:hidden;

	border:1px solid var(--pr-border);

	box-shadow:var(--pr-shadow);

	transition:.25s;

}

.pr-card:hover{

	transform:translateY(-6px);

}

.pr-card__image img{

	width:100%;

	height:240px;

	object-fit:cover;

}

.pr-card__body{

	padding:24px;

}

.pr-card__title{

	margin:0 0 10px;

	font-size:1.25rem;

}

.pr-card__tagline{

	color:var(--pr-text-light);

	margin-bottom:18px;

}

.pr-card__meta{

	display:flex;

	flex-direction:column;

	gap:8px;

	margin-bottom:18px;

	font-size:.95rem;

}

.pr-card__price{

	font-size:1.3rem;

	font-weight:700;

	color:var(--pr-primary);

	margin-bottom:22px;

}

.pr-card__price small{

	display:block;

	font-size:.9rem;

	font-weight:400;

	color:var(--pr-text-light);

}

/*
==========================================
CONTENT
==========================================
*/

.pr-content h2{

	margin-top:40px;

}

.pr-content h3{

	margin-top:30px;

}

.pr-content table{

	width:100%;

	border-collapse:collapse;

	margin:30px 0;

}

.pr-content table th,

.pr-content table td{

	padding:14px;

	border:1px solid var(--pr-border);

	text-align:left;

}

.pr-content blockquote{

	margin:30px 0;

	padding:20px;

	border-left:4px solid var(--pr-primary);

	background:#F8FAFC;

	font-style:italic;

}

/*
==========================================
ARCHIVE PAGE
==========================================
*/

.pr-archive-header{

	text-align:center;

	margin:60px 0 40px;

}

.pr-archive-header h1{

	font-size:2.5rem;

	margin-bottom:10px;

}

.pr-archive-header p{

	color:var(--pr-text-light);

	font-size:1.1rem;

}

.pr-archive-grid{

	display:grid;

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

	gap:30px;

	margin-bottom:50px;

}

.pr-pagination{

	display:flex;

	justify-content:center;

	gap:10px;

	margin:40px 0;

}

.pr-pagination a,
.pr-pagination span{

	padding:10px 15px;

	border:1px solid var(--pr-border);

	border-radius:8px;

}

.pr-pagination .current{

	background:var(--pr-primary);

	color:#fff;

	border-color:var(--pr-primary);

}

.pr-filters{

	display:flex;

	gap:15px;

	flex-wrap:wrap;

	margin:40px 0;

	padding:20px;

	background:#fff;

	border:1px solid var(--pr-border);

	border-radius:12px;

}

.pr-filters select{

	padding:10px 14px;

	border:1px solid var(--pr-border);

	border-radius:8px;

	background:#fff;

	font-size:14px;

}

.pr-filters button{

	cursor:pointer;

}