.articles-page,
.article-single {
	background: #fbf8f3;
	color: var(--ink);
}

.articles-hero,
.article-single__header {
	position: relative;
	overflow: hidden;
	padding: clamp(100px, 12vw, 175px) 0 clamp(68px, 8vw, 112px);
	background: linear-gradient(135deg, #f8f3eb 0%, #f4eee6 64%, rgba(115, 177, 172, 0.16) 100%);
}

.articles-hero::after,
.article-single__header::after {
	position: absolute;
	right: -8vw;
	bottom: -15vw;
	width: 34vw;
	height: 34vw;
	border-radius: 50%;
	background: rgba(255, 165, 143, 0.22);
	content: "";
	pointer-events: none;
}

.articles-hero__inner,
.article-single__header-inner {
	position: relative;
	z-index: 1;
	max-width: 1050px;
}

.articles-hero h1,
.article-single h1 {
	max-width: 980px;
	margin: 12px 0 24px;
	color: #183f3b;
	font-family: var(--font-display);
	font-size: clamp(3.1rem, 7vw, 7.4rem);
	font-weight: 600;
	letter-spacing: -0.055em;
	line-height: 0.96;
}

.articles-hero__description,
.article-single__excerpt {
	max-width: 760px;
	color: rgba(41, 36, 42, 0.7);
	font-size: clamp(1rem, 1.5vw, 1.22rem);
	line-height: 1.75;
}

.articles-hero__description > *:first-child,
.articles-hero__description > *:last-child {
	margin-top: 0;
	margin-bottom: 0;
}

.articles-content {
	padding-top: clamp(62px, 8vw, 112px);
	padding-bottom: clamp(82px, 10vw, 145px);
}

.article-featured {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
	overflow: hidden;
	margin-bottom: clamp(58px, 7vw, 96px);
	border: 1px solid rgba(35, 111, 106, 0.14);
	border-radius: 34px;
	background: #fff;
	box-shadow: 0 24px 70px rgba(24, 63, 59, 0.09);
}

.article-featured__image {
	display: block;
	min-height: 460px;
	overflow: hidden;
}

.article-featured__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}

.article-featured__image:hover img { transform: scale(1.025); }

.article-featured__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(34px, 5vw, 72px);
}

.article-featured__label {
	align-self: flex-start;
	margin-bottom: 20px;
	padding: 8px 13px;
	border-radius: 999px;
	background: #ffa58f;
	color: #57383a;
	font-size: 0.7rem;
	font-weight: 850;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.article-featured h2,
.article-card h2,
.article-related h2 {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -0.035em;
}

.article-featured h2 {
	margin: 17px 0;
	font-size: clamp(2rem, 3.4vw, 3.7rem);
	line-height: 1.03;
}

.article-featured h2 a,
.article-card h2 a { color: #183f3b; text-decoration: none; }

.article-featured__body > p {
	margin: 0 0 28px;
	color: rgba(41, 36, 42, 0.68);
	line-height: 1.7;
}

.article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	color: #3c7772;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.045em;
	text-transform: uppercase;
}

.article-meta > * + *::before {
	margin-inline-end: 18px;
	color: #f08a72;
	content: "•";
}

.article-meta a { color: inherit; text-decoration: none; }

.articles-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.article-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(41, 36, 42, 0.09);
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 16px 45px rgba(24, 63, 59, 0.055);
	transition: transform 260ms ease, box-shadow 260ms ease;
}

.article-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 24px 60px rgba(24, 63, 59, 0.1);
}

.article-card__image {
	display: block;
	overflow: hidden;
	aspect-ratio: 1.42;
}

.article-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 450ms ease;
}

.article-card:hover .article-card__image img { transform: scale(1.035); }

.article-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 27px;
}

.article-card h2 {
	margin: 18px 0 12px;
	font-size: clamp(1.55rem, 2.2vw, 2.15rem);
	line-height: 1.08;
}

.article-card__body > p {
	margin: 0 0 24px;
	color: rgba(41, 36, 42, 0.67);
	line-height: 1.65;
}

.article-read {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	color: #236f6a;
	font-size: 0.8rem;
	font-weight: 850;
	text-decoration: none;
}

.article-read span { color: #f08a72; transition: transform 180ms ease; }
.article-read:hover span { transform: translateX(4px); }

.articles-pagination { margin-top: 56px; }
.articles-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.articles-pagination a,
.articles-pagination span { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 8px 13px; border: 1px solid var(--border); border-radius: 50%; background: #fff; color: #183f3b; text-decoration: none; }
.articles-pagination .current { border-color: #236f6a; background: #236f6a; color: #fff; }
.articles-empty { padding: clamp(42px, 7vw, 82px); border: 1px dashed rgba(35, 111, 106, 0.32); border-radius: 24px; background: #fff; text-align: center; }

.article-single__header-inner { text-align: center; }
.article-single__header-inner h1 { margin-inline: auto; }
.article-single__header .article-meta { justify-content: center; }
.article-single__excerpt { margin: 28px auto 0; }
.article-single__layout { max-width: 1040px; padding-top: clamp(58px, 8vw, 105px); padding-bottom: clamp(72px, 10vw, 135px); }
.article-single__featured { overflow: hidden; margin: 0 0 clamp(45px, 7vw, 82px); border-radius: 30px; }
.article-single__featured img { display: block; width: 100%; height: auto; }
.article-single__content { max-width: 790px; margin-inline: auto; font-size: clamp(1.04rem, 1.3vw, 1.17rem); line-height: 1.85; }
.article-single__content h2,
.article-single__content h3 { margin-top: 1.7em; color: #183f3b; font-family: var(--font-display); line-height: 1.12; }
.article-single__content h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.article-single__content h3 { font-size: clamp(1.55rem, 3vw, 2.25rem); }
.article-single__content a { color: #236f6a; }
.article-single__content img { border-radius: 18px; }
.article-single__content .wp-block-gallery { margin-block: 42px; }
.article-single__content blockquote { margin: 42px 0; padding: 24px 30px; border-inline-start: 4px solid #f08a72; background: rgba(255, 165, 143, 0.1); color: #57383a; font-family: var(--font-display); font-size: 1.35em; }
.article-back { display: inline-flex; align-items: center; gap: 12px; margin-top: 52px; color: #236f6a; font-weight: 850; text-decoration: none; }
.article-related { padding: clamp(72px, 9vw, 125px) 0; background: #f2ece4; }
.article-related > .cs57-container > h2 { margin: 0 0 38px; color: #183f3b; font-size: clamp(2.3rem, 4vw, 4.3rem); }

[dir="rtl"] .articles-page,
[dir="rtl"] .article-single { text-align: right; }
[dir="rtl"] .article-read span { transform: scaleX(-1); }
[dir="rtl"] .article-read:hover span { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .article-back span { transform: scaleX(-1); }

@media (max-width: 1020px) {
	.article-featured { grid-template-columns: 1fr; }
	.article-featured__image { min-height: 0; aspect-ratio: 1.65; }
	.articles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 660px) {
	.articles-hero,
	.article-single__header { padding-top: 86px; }
	.articles-hero h1,
	.article-single h1 { font-size: clamp(2.65rem, 13vw, 4.2rem); }
	.article-featured { border-radius: 24px; }
	.article-featured__body { padding: 30px 24px 34px; }
	.articles-grid { grid-template-columns: 1fr; }
	.article-card__body { padding: 24px; }
	.article-meta { gap: 7px 12px; }
	.article-meta > * + *::before { margin-inline-end: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.article-card,
	.article-card__image img,
	.article-featured__image img,
	.article-read span { transition: none; }
}