@charset "utf-8";
/* CSS Document */


/************ Custom Card Page List ************/

.customCardComponent {
	width:100%;
	margin:0;
	padding:0;
	position:relative;
	box-sizing:border-box;
	color:#363636;
	text-align:left;
}


/************ Header ************/

.customCardHeader {
	margin:0 0 24px 0;
	padding:0;
	font-family:'Walter Turncoat', cursive;
	font-size:clamp(1.5rem, 2.5vw, 2rem);
	font-weight:400;
	line-height:1.2;
	color:#173f7a;
	text-align:center;
}


/************ RSS ************/

.customCardRSS {
	width:100%;
	margin:0 0 10px 0;
	text-align:right;
}

.customCardRSS a {
	color:#173f7a;
	font-size:1.1rem;
	text-decoration:none;
}

.customCardRSS a:hover {
	color:#449b46;
}


/************ Card Grid ************/

.customCardWrapper {
	width:100%;
	margin:0;
	padding:0;
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:24px;
	align-items:stretch;
	box-sizing:border-box;
}


/************ Individual Card ************/

.customCardContainer {
	width:100%;
	min-width:0;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	background:#ffffff;
	border:1px solid #d5e1eb;
	border-radius:18px;
	overflow:hidden;
	box-sizing:border-box;
	box-shadow:0 7px 22px rgba(23,63,122,.12);
	color:#363636;
	text-align:left;

	transition:
		transform .3s ease,
		box-shadow .3s ease,
		border-color .3s ease;
}

.customCardContainer:hover {
	transform:translateY(-5px);
	border-color:#6f8fe9;
	box-shadow:0 14px 32px rgba(23,63,122,.18);
}


/************ Image ************/

.customCardImage {
	width:100%;
	display:block;
	position:relative;
	overflow:hidden;
	background:#e7f1f8;
	text-decoration:none;
}

.customCardImage img {
	width:100%;
	height:auto;
	aspect-ratio:16 / 9;
	display:block;
	object-fit:cover;
	border:0;
	border-radius:0;

	transition:transform .45s ease;
}

.customCardContainer:hover .customCardImage img {
	transform:scale(1.04);
}


/************ Content ************/

.customCardContent {
	flex:1;
	padding:22px 22px 24px;
	display:flex;
	flex-direction:column;
	box-sizing:border-box;
	background:#ffffff;
}


/************ Title ************/

.customCardTitle {
	margin:0 0 8px 0;
	padding:0;
	font-family:'Roboto', sans-serif;
	font-size:1.12rem;
	font-weight:600;
	line-height:1.35;
	color:#173f7a;
}

.customCardTitle a {
	color:#173f7a;
	text-decoration:none;
}

.customCardTitle a:hover,
.customCardTitle a:focus {
	color:#449b46;
}


/************ Date ************/

.customCardDate {
	margin:0 0 13px 0;
	padding:0 0 0 19px;
	position:relative;
	font-family:'Roboto', sans-serif;
	font-size:.82rem;
	font-weight:400;
	line-height:1.3;
	color:#687486;
}

.customCardDate::before {
	content:"";
	width:10px;
	height:10px;
	position:absolute;
	left:0;
	top:.15em;
	border:1.5px solid #6f8fe9;
	border-radius:50%;
	box-sizing:border-box;
}


/************ Description ************/

.customCardDescription {
	margin:0 0 18px 0;
	padding:0;
	font-family:'Roboto', sans-serif;
	font-size:.94rem;
	font-weight:400;
	line-height:1.55;
	color:#4d5665;
}


/************ Read More ************/

.customCardLink {
	margin-top:auto;
	padding-top:4px;
}

.customCardLink a {
	display:inline-flex;
	align-items:center;
	gap:7px;
	font-family:'Roboto', sans-serif;
	font-size:.9rem;
	font-weight:600;
	line-height:1.2;
	color:#449b46;
	text-decoration:none;
}

.customCardLink a::after {
	content:"→";
	font-size:1.1em;
	line-height:1;
	transition:transform .2s ease;
}

.customCardLink a:hover,
.customCardLink a:focus {
	color:#173f7a;
	text-decoration:underline;
}

.customCardLink a:hover::after,
.customCardLink a:focus::after {
	transform:translateX(4px);
}


/************ Pagination ************/

.customCardPagination {
	width:100%;
	margin:30px 0 0 0;
}


/************ Responsive ************/

@media screen and (max-width:1024px) {

	.customCardWrapper {
		grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:20px;
	}
}


@media screen and (max-width:640px) {

	.customCardWrapper {
		grid-template-columns:1fr;
		gap:18px;
	}

	.customCardContainer {
		border-radius:16px;
	}

	.customCardContent {
		padding:19px 18px 21px;
	}

	.customCardTitle {
		font-size:1.05rem;
	}
}