/* =========================
	hero
========================= */
.hero{
	margin-bottom:40px;
	padding-top: 30px;
}

.hero-head{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:12px;
	margin-bottom:6px;
}

.hero-title{
	font-size:1.5rem;
	font-weight:650; 
}

.hero-date{
	display:flex;
	align-items:center;
	gap:6px;

	font-size:.92rem;
	font-weight:500;

	color:#777;
}

.status{
	display:flex;
	align-items:center;
}
 
.steps-wrap{
	display:flex;
	align-items:flex-end;
	gap:8px;
	flex-wrap:wrap;
}

.steps-count{
	font-size:3rem;
	font-weight:600; 
	line-height:1;
	color: var(--primary);
	letter-spacing:-0.04em;
}

.steps-target{
	font-size:1.2rem;
	font-weight: 500;
	color:#777; 
}
 
/* =========================
	card
========================= */
.card{
	background:#fff;
	border-radius:20px;
	padding:18px; 
}

/* =========================
	section
========================= */
 
.section{
	margin-bottom:40px;
}

.section-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-bottom:10px;
}

.section-title{
	font-size:1.5rem;
	font-weight:650; 
}

.section-desc{
	font-size:.92rem;
	color:#666;
	margin-top:4px;
}
 

/* =========================
	event banner
========================= */

.banner-grid{
	display:flex;
	flex-direction:column;
	gap:18px;
}

.story-banner{
	position:relative;
	overflow:hidden;
	border-radius:20px; 
	aspect-ratio:1.2;
}

.story-banner.small{
	aspect-ratio:1.8;
}

.story-banner img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.story-overlay{
	position:absolute;
	inset:0;
	background:
		linear-gradient(
			180deg,
			rgba(0,0,0,0.08) 0%,
			rgba(0,0,0,0.55) 100%
		);
}

.story-content{
	position:absolute;
	left:22px;
	right:22px;
	bottom:22px;
	z-index:2;
	color:#fff;
}

.story-content span{
	display:block;
	margin-bottom:5px;  
	opacity:.8; 
}

.story-content h3{
	font-size:30px;
	font-weight:650;
	line-height:1.2;
	word-break:keep-all;
}

.story-banner.small .story-content h3{
	font-size:24px;
}

.story-content p{
	margin-top:10px; 
	opacity:.85;
}


/* =========================
	walk banner
========================= */

.walk-banner-list{
	display:flex;
	flex-direction:column;
	gap:18px;
}

.walk-banner-card{   
}

.walk-banner-thumb{
	position:relative;
	aspect-ratio:1.8;
	border-radius:20px;
	overflow:hidden; 
}

.walk-banner-thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.walk-badge{
	position:absolute;
	top:16px;
	right:0;
	padding:8px 14px;
	line-height: 1;
	border-radius:999px;
	background:var(--primary);
	font-size:14px;
	font-weight:650;
	color:#fff;
}

.walk-banner-body{
	position:relative;
	padding:16px 0; 
}
.walk-banner-body:has(.walk-badge){
	padding-right: 70px;
}

.walk-banner-body h3{
	font-size:20px;
	font-weight:650;  
}

.walk-banner-body p{ 
	color:#666;
	word-break:keep-all;
}

.walk-banner-body .walk-dete{
	display:block;
	margin-top:5px;
	font-weight: 400;
	font-size:15px; 
	color:#999;
}