/* ═══════════════════════════════════════════
   ROYSEN · Блог: список статей + стаття
   ═══════════════════════════════════════════ */

.blog{ padding:24px 0 100px; }

.blog-head{ display:flex; flex-direction:column; gap:10px; margin-bottom:40px; }
.blog-head .label-caps{ text-decoration:none; }
a.label-caps:hover{ opacity:1; }
.blog-title{
	font-size:clamp(72px, 6.6vw, 96px);
	font-weight:500; line-height:1.05; text-transform:uppercase;
}
.blog-title sup{
	font-size:.38em; font-weight:400; letter-spacing:.08em;
	color:var(--muted); margin-left:6px;
}

/* ─── Сітка карток ─── */
.blog-grid{
	display:grid;
	grid-template-columns:repeat(3, minmax(0,1fr));
	gap:56px 24px;
}

.blog-card{ display:flex; flex-direction:column; }
.blog-card__media{
	display:block; aspect-ratio:3/2; overflow:hidden;
	background:var(--beige-50);
}
.blog-card__media img{
	width:100%; height:100%; object-fit:cover; display:block;
	transition:transform .5s ease;
}
.blog-card:hover .blog-card__media img{ transform:scale(1.03); }
.blog-card__info{ padding-top:16px; display:flex; flex-direction:column; gap:10px; }
.blog-card__meta{ display:flex; align-items:center; gap:8px; }
.blog-card__meta a{ color:inherit; text-decoration:none; }
.blog-card__meta a:hover{ text-decoration:underline; text-underline-offset:3px; }
.blog-card__meta i{ font-style:normal; opacity:.5; }
.blog-card__title{
	font-size:18px; font-weight:500; line-height:1.35; text-transform:uppercase;
	color:var(--ink); text-decoration:none;
}
.blog-card__title:hover{ text-decoration:underline; text-underline-offset:4px; }
.blog-card__excerpt{ font-size:14px; line-height:1.55; color:var(--muted); }

/* ─── Пагінація ─── */
.blog .navigation.pagination{ margin-top:64px; }
.blog .nav-links{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; }
.blog .page-numbers{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:44px; height:44px; padding:0 14px;
	font-size:14px; font-weight:500;
	color:var(--ink); text-decoration:none;
	border:1px solid var(--ink); opacity:.6;
	transition:opacity .2s, background .2s, border-color .2s;
}
.blog .page-numbers:hover{ opacity:1; }
.blog .page-numbers.current{ background:var(--yellow); border-color:var(--yellow); opacity:1; }
.blog .page-numbers.dots{ border:none; opacity:.5; }

/* ─── Порожній стан ─── */
.blog-empty{ padding:48px 0 24px; display:flex; flex-direction:column; gap:24px; align-items:flex-start; }
.blog-empty p{ font-size:16px; color:var(--muted); max-width:480px; }

/* ═══════ Стаття ═══════ */
.blog-single{ padding:24px 0 100px; }

.post-hero__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:16px; }
.post-hero__meta a{ color:inherit; text-decoration:none; }
.post-hero__meta a:hover{ text-decoration:underline; text-underline-offset:3px; }
.post-hero__meta i{ font-style:normal; opacity:.5; }
.post-hero__title{
	font-size:clamp(40px, 3.9vw, 56px);
	font-weight:500; line-height:1.15; text-transform:uppercase;
	max-width:980px; margin-bottom:40px;
}

.post-hero__media{
	margin:0 0 56px; aspect-ratio:1392/560; overflow:hidden;
	background:var(--beige-50);
}
.post-hero__media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ─── Типографіка статті ─── */
.post-body{ max-width:800px; margin:0 auto; }
.prose{ font-size:16px; line-height:1.7; color:var(--ink); }
.prose > * + *{ margin-top:20px; }
.prose h2{
	font-size:26px; font-weight:500; line-height:1.3; text-transform:uppercase;
	margin-top:48px;
}
.prose h3{ font-size:19px; font-weight:600; line-height:1.35; margin-top:36px; }
.prose a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.prose a:hover{ text-decoration-thickness:2px; }
.prose ul, .prose ol{ padding-left:22px; display:flex; flex-direction:column; gap:8px; }
.prose ul li::marker{ color:var(--yellow); content:"▪  "; }
.prose ol li::marker{ font-weight:600; }
.prose blockquote{
	margin:40px 0; padding:4px 0 4px 24px;
	border-left:3px solid var(--yellow);
	font-size:20px; font-weight:500; line-height:1.45;
}
.prose blockquote p{ margin:0; }
.prose img{ max-width:100%; height:auto; display:block; }
.prose figure{ margin:40px 0; }
.prose figcaption{ margin-top:10px; font-size:13px; color:var(--muted); }
.prose hr{ border:0; border-top:1px solid var(--line); margin:48px 0; }
.prose strong{ font-weight:600; }
.prose table{ width:100%; border-collapse:collapse; font-size:14px; }
.prose th, .prose td{ padding:10px 14px; border:1px solid var(--line); text-align:left; }
.prose th{ font-weight:600; text-transform:uppercase; font-size:12px; letter-spacing:.06em; }

/* ─── Читайте також ─── */
.post-related{ margin-top:100px; }
.post-related .section-head{ margin-bottom:32px; }