/* ==========================================================
   HISTORIC DOWNTOWN POCATELLO
   Landing Page
   ========================================================== */

.hdp-landing {
	overflow: hidden;
}


/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */

.hdp-hero {
	position: relative;
	min-height: 520px;
	display: flex;
	align-items: flex-end;
}

.hdp-hero-content {
	width: 100%;
	padding-top: 8rem;
	padding-bottom: 3.5rem;
	position: relative;
	z-index: 2;
}

.hdp-hero h1 {
	margin-bottom: .75rem;
}

.hdp-hero p {
	max-width: 700px;
	font-size: clamp(1.1rem, 2vw, 1.35rem);
}


/* ----------------------------------------------------------
   INTRO
   ---------------------------------------------------------- */

.hdp-intro {
	padding-top: clamp(3rem, 7vw, 6rem);
	padding-bottom: clamp(3rem, 7vw, 6rem);
}

.hdp-intro h2 {
	margin-bottom: 1.5rem;
}

.hdp-intro p {
	max-width: 850px;
	margin-left: auto;
	margin-right: auto;
}


/* ----------------------------------------------------------
   EXPLORE
   ---------------------------------------------------------- */

.hdp-explore {
	padding-top: clamp(3rem, 6vw, 5rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.hdp-section-intro {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}


/* Turn the Gutenberg button collection into a clean grid */

.hdp-explore-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-top: 2rem;
}

.hdp-explore-grid .wp-block-button {
	width: 100%;
	margin: 0;
}

.hdp-explore-grid .wp-block-button__link {
	width: 100%;
	height: 100%;
	min-height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1.25rem;
	border-radius: 4px;
}


/* ----------------------------------------------------------
   ATTRACTIONS
   ---------------------------------------------------------- */

.hdp-attractions {
	padding-top: clamp(3rem, 7vw, 6rem);
	padding-bottom: clamp(3rem, 7vw, 6rem);
}

.hdp-attractions h2 {
	margin-bottom: 1rem;
}


/*
   When attraction cards are added, use:

   .hdp-attraction-grid
   .hdp-attraction-card
*/

.hdp-attraction-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 2.5rem;
}

.hdp-attraction-card {
	overflow: hidden;
}

.hdp-attraction-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}


/* ----------------------------------------------------------
   STAY / LODGING
   ---------------------------------------------------------- */

.hdp-stay-section {
	padding-top: clamp(3rem, 6vw, 5rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.hdp-stay-section .wp-block-columns {
	margin-bottom: 0;
}

.hdp-primary-button .wp-block-button__link {
	padding-left: 2rem;
	padding-right: 2rem;
}


/* ----------------------------------------------------------
   MAP
   ---------------------------------------------------------- */

.hdp-map {
	padding-top: clamp(3rem, 6vw, 5rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.hdp-map h2 {
	margin-bottom: .75rem;
}


/* ----------------------------------------------------------
   SOCIAL
   ---------------------------------------------------------- */

.hdp-social {
	padding-top: 3rem;
	padding-bottom: 4rem;
}

.hdp-social .wp-block-buttons {
	margin-top: 1.5rem;
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width: 900px) {

	.hdp-explore-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.hdp-attraction-grid {
		grid-template-columns: repeat(2, 1fr);
	}

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 600px) {

	.hdp-hero {
		min-height: 420px;
	}

	.hdp-hero-content {
		padding-top: 5rem;
		padding-bottom: 2rem;
	}

	.hdp-explore-grid {
		grid-template-columns: 1fr;
	}

	.hdp-explore-grid .wp-block-button__link {
		min-height: 70px;
	}

	.hdp-attraction-grid {
		grid-template-columns: 1fr;
	}

	.hdp-stay-section .wp-block-columns {
		gap: 2rem;
	}

	.hdp-social .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.hdp-social .wp-block-button,
	.hdp-social .wp-block-button__link {
		width: 100%;
	}

}