/* Giggle Town — post page styles (generated from the design; one block per section). */

/* post-hero --------------------------------------------------- */
.post-hero {
	position: relative;
	overflow: hidden;
	background: radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.14) 0px, rgba(255, 255, 255, 0) 42%), linear-gradient(135deg, rgb(12, 66, 154) 0%, rgb(10, 55, 132) 100%);
	padding: 56px 24px 200px;
	color: rgb(255, 255, 255);
	text-align: center;
}
.post-hero__star {
	position: absolute;
}
.post-hero__star--1 {
	left: 4%;
	top: 14%;
	opacity: 0.9;
}
.post-hero__star--2 {
	left: 92%;
	top: 18%;
	opacity: 0.85;
}
.post-hero__container {
	position: relative;
	max-width: 860px;
	margin: 0px auto;
}
.post-hero__text {
	margin: 0px;
	font-size: 15px;
	font-weight: 700;
	color: rgb(201, 216, 255);
}
.post-hero__link {
	color: rgb(255, 217, 59);
	text-decoration: none;
}
.post-hero__badge {
	display: inline-block;
	margin-top: 20px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgb(233, 247, 238);
	font-family: Fredoka, sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: rgb(16, 144, 74);
}
.post-hero__title {
	margin: 18px 0px 0px;
	font-family: Fredoka, sans-serif;
	font-weight: 700;
	font-size: clamp(36px, 4.8vw, 58px);
	line-height: 1.08;
	text-transform: uppercase;
}
.post-hero__highlight {
	color: rgb(255, 217, 59);
}
.post-hero__lead {
	margin: 18px 0px 0px;
	font-size: 16px;
	font-weight: 700;
	color: rgb(220, 230, 255);
}

/* post-body --------------------------------------------------- */
.post-body {
	background: rgb(255, 255, 255);
	padding: 0px 24px 88px;
}
.post-body__img {
	position: relative;
	display: block;
	width: 100%;
	max-width: 1000px;
	height: auto;
	aspect-ratio: 16 / 9;
	margin: -150px auto 0px;
	object-fit: cover;
	border: 6px solid rgb(255, 255, 255);
	border-radius: 28px;
	box-shadow: rgba(3, 18, 70, 0.25) 0px 24px 50px;
}
.post-body__card {
	max-width: 760px;
	margin: 48px auto 0px;
}
.post-body__card-text {
	color: rgb(10, 42, 110);
}
.post-body__intro {
	margin-top: 0px;
	font-size: 20px;
}
.post-body__tip-title {
	margin: 0px;
	font-family: Fredoka, sans-serif;
	font-weight: 700;
	font-size: 20px;
}
.post-body__card-body {
	margin-top: 40px;
	padding: 28px 30px;
	border-radius: 24px;
	background: rgb(255, 248, 214);
	border: 2px solid rgb(242, 201, 76);
}
.post-body__card-list {
	margin-top: 10px;
}
.post-body__card-actions {
	margin-top: 28px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}
.post-body__card-btn {
	background: rgb(255, 255, 255);
	color: rgb(10, 42, 110);
	border: 2px solid rgb(10, 42, 110);
	box-shadow: none;
}