/* ==========================================================================
   Pojedynczy wpis. Wartości 1:1 z „Agencja GEO - Post.dc.html". Bez sidebaru.
   ========================================================================== */

/* --------------------------------------------------------- nagłówek ------- */

.sg-head {
	background: var(--ag-ink);
	padding: 64px var(--ag-gutter) 72px;
	position: relative;
	overflow: hidden;
}
.sg-head__inner { max-width: 860px; margin: 0 auto; position: relative; }

.sg-back { font-size: 14px; font-weight: 600; color: var(--ag-mint); }
.sg-back:hover { color: var(--ag-cream); }

.sg-meta { display: flex; align-items: center; gap: 12px; margin: 26px 0 20px; flex-wrap: wrap; }
.sg-meta__cat {
	background: var(--ag-mint);
	color: var(--ag-ink);
	font-size: 12px;
	font-weight: 700;
	padding: 5px 13px;
	border-radius: var(--ag-r-pill);
	text-transform: uppercase;
}
.sg-meta__cat:hover { background: #2FDC9E; color: var(--ag-ink); }
.sg-meta__date { font-size: 13.5px; font-weight: 600; color: var(--ag-footer-muted); }

.sg-title { font-size: 46px; line-height: 1.12; color: var(--ag-cream); letter-spacing: -.025em; }
.sg-lead { font-size: 19px; line-height: 1.6; font-weight: 500; color: var(--ag-on-dark); margin-top: 22px; }

.sg-author { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.sg-author__img { width: 42px; height: 42px; }
.sg-author__name { font-size: 14.5px; font-weight: 700; color: var(--ag-cream); }
.sg-author__role { font-size: 13px; font-weight: 500; color: var(--ag-footer-muted); }

/* --------------------------------------------------------- grafika -------- */

/* Ujemny margines: grafika nachodzi na ciemny nagłówek (jak w makiecie). */
.sg-hero { padding: 0 var(--ag-gutter); margin-top: -36px; position: relative; }
.sg-hero__img {
	width: 100%;
	display: block;
	border-radius: var(--ag-r-media);
	box-shadow: var(--ag-sh-media);
	aspect-ratio: 1328 / 460;
	object-fit: cover;
}

/* --------------------------------------------------------- treść ---------- */

.sg-body { max-width: 760px; margin: 0 auto; padding: 64px 24px 48px; }

.sg-tldr {
	background: var(--ag-card);
	border: 1.5px solid var(--ag-ink);
	border-radius: var(--ag-r-card);
	padding: 28px 32px;
	margin-bottom: 44px;
}
.sg-tldr__head {
	font-family: var(--ag-display);
	font-weight: 800;
	font-size: 13px;
	color: var(--ag-green);
	letter-spacing: .12em;
	margin-bottom: 14px;
}
.sg-tldr__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sg-tldr__list li { display: flex; gap: 10px; font-size: 16px; line-height: 1.55; font-weight: 500; }
.sg-tldr__list span { color: var(--ag-green); font-weight: 800; flex: none; }

/* Treść wpisu: .ag-prose żyje w base.css (potrzebują jej też strony). Tu tylko skala artykułu. */
.sg-body .ag-prose { font-size: 17.5px; line-height: 1.75; }
.sg-body .ag-prose h2 { font-size: 30px; margin: 44px 0 18px; }

/* --------------------------------------------------------- tagi ----------- */

.sg-tags { display: flex; gap: 10px; flex-wrap: wrap; margin: 40px 0 0; list-style: none; padding: 0; }
.sg-tag {
	background: var(--ag-card);
	border: 1px solid var(--ag-line);
	font-size: 13px;
	font-weight: 600;
	padding: 7px 16px;
	border-radius: var(--ag-r-pill);
	color: var(--ag-ink);
	display: inline-block;
}
.sg-tag:hover { border-color: var(--ag-green); }

/* --------------------------------------------------------- box autora ----- */

.sg-authorbox {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	background: var(--ag-card);
	border: 1px solid var(--ag-line);
	border-radius: var(--ag-r-card);
	padding: 28px 30px;
	margin-top: 44px;
}
.sg-authorbox__img {
	width: 88px;
	height: 88px;
	border-radius: 16px;
	object-fit: cover;
	object-position: 50% 20%;
	font-size: 30px;
	flex: none;
}
.sg-authorbox__role {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ag-green);
	margin-bottom: 6px;
}
.sg-authorbox__name { font-size: 19px; font-weight: 700; color: var(--ag-ink); }
.sg-authorbox__name a { color: var(--ag-ink); }
.sg-authorbox__name a:hover { color: var(--ag-green); }
.sg-authorbox__bio { font-size: 14.5px; line-height: 1.55; font-weight: 500; color: var(--ag-on-light); margin-top: 6px; }

.sg-authorbox__profiles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sg-authorbox__profile {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--ag-line);
	border-radius: var(--ag-r-pill);
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ag-ink);
	transition: border-color .15s ease, color .15s ease;
}
.sg-authorbox__profile:hover { border-color: var(--ag-green); color: var(--ag-green); }

/* --------------------------------------------------------- powiązane ------ */

.sg-related { padding: 24px var(--ag-gutter) 88px; }
.sg-related__title {
	font-size: 32px;
	letter-spacing: -.02em;
	margin: 0 auto 28px;
	max-width: 760px;
}
.sg-related__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 960px; margin: 0 auto; }
.sg-related .ag-card__body { padding: 26px 28px; }
.sg-related .ag-card__title { font-size: 20px; margin-bottom: 0; }

.ag-cta--tight { padding: 64px; }

/* ==========================================================================
   RWD
   ========================================================================== */

@media (max-width: 1024px) {
	.sg-title { font-size: 36px; }
	.ag-cta--tight { padding: 48px 36px; }
}

@media (max-width: 700px) {
	.sg-head { padding-top: 40px; padding-bottom: 56px; }
	.sg-title { font-size: 29px; line-height: 1.12; }
	.sg-lead { font-size: 15.5px; }

	.sg-hero { margin-top: -24px; }
	.sg-hero__img { border-radius: var(--ag-r-card); aspect-ratio: 16 / 10; }

	.sg-body { padding: 40px 0 32px; }
	.sg-tldr { padding: 22px 20px; border-radius: var(--ag-r-card); }
	.sg-tldr__list li { font-size: 14.5px; }

	.ag-prose { font-size: 16px; line-height: 1.7; }
	.ag-prose h2 { font-size: 24px; margin: 32px 0 14px; }
	.ag-prose h3 { font-size: 19px; }
	.ag-prose blockquote { padding: 20px 22px; font-size: 17px; }

	.sg-authorbox { flex-direction: column; align-items: flex-start; padding: 22px; }

	.sg-related { padding-bottom: 56px; }
	.sg-related__title { font-size: 24px; }
	.sg-related__grid { grid-template-columns: 1fr; }

	.ag-cta--tight { padding: 44px 26px; }
}