/* ==========================================================================
   A.D. Club — Blog: category archives + single post
   --------------------------------------------------------------------------
   Scope: body.woodmart-archive-blog (/category/bloh/, /category/keysy/) and
   body.single-post. Kept in its own file for the same reason as
   css/club-wpbakery.css: this reskins markup Woodmart generates and we do not
   control, while style.css owns the templates whose markup is ours.

   CSS only, on purpose. Nothing here changes a Theme Settings option or a
   template. That is also why the archive grid is built by overriding the
   masonry design in CSS rather than by picking a different blog design:
   Woodmart forces the layout to full-width and drops the sidebar markup *only*
   for masonry (inc/classes/class-layout.php), so changing the design would put
   a sidebar back on both archives.

   Tokens (colours, radii, fluid gaps) come from :root in style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page shell — both archives and the single post ran on a white body
   -------------------------------------------------------------------------- */

body.woodmart-archive-blog,
body.woodmart-archive-blog .wd-page-wrapper,
body.woodmart-archive-blog .wd-page-content,
body.woodmart-archive-blog .wd-content-layout,
body.single-post,
body.single-post .wd-page-wrapper,
body.single-post .wd-page-content,
body.single-post .wd-content-layout {
	background: var(--ad-bg);
	color: var(--ad-text);
}

/* Woodmart's global "Site width" option is 1222px, but every page redesigned
   so far (catalog, product, home) overrides the same variable to the 1440px of
   the Figma frames. Without it here the footer and the header — which are
   shared with those pages — visibly narrow when you open the blog. */
body.woodmart-archive-blog,
body.single-post {
	--wd-container-w: 1440px;
}

/* ---- Title bar ----
   Same treatment as the text pages in css/club-wpbakery.css (there it is
   scoped with body:has(.club-doc), which cannot match here) — #0a0a0a plus a
   leftover 2019 demo photo from the theme's demo import. */
body.woodmart-archive-blog .wd-page-title,
body.single-post .wd-page-title {
	background-color: var(--ad-bg);
	background-image: none;
	padding-top: var(--ad-gap-inside-block);
	padding-bottom: 0;
	border: none;
}

body.woodmart-archive-blog .wd-page-title .entry-title,
body.single-post .wd-page-title .entry-title {
	font-family: "Golos Text", sans-serif;
	font-weight: 700;
	font-size: clamp(24px, calc(24px + (40 - 24) * ((100vw - 375px) / (1440 - 375))), 40px);
	line-height: 1.15;
	letter-spacing: -0.4px;
	text-transform: none;
	color: var(--ad-text);
	margin: 0;
}

/* !important on the colour only: Theme Settings → Custom CSS paints the last
   crumb with `.wd-last {color: white !important}`. */
body.woodmart-archive-blog .wd-breadcrumbs,
body.woodmart-archive-blog .wd-breadcrumbs a,
body.woodmart-archive-blog .wd-breadcrumbs .wd-last,
body.single-post .wd-breadcrumbs,
body.single-post .wd-breadcrumbs a,
body.single-post .wd-breadcrumbs .wd-last {
	font-family: "Golos Text", sans-serif;
	font-size: 13px;
	color: var(--ad-text-muted) !important;
}

body.woodmart-archive-blog .wd-breadcrumbs a:hover,
body.single-post .wd-breadcrumbs a:hover {
	color: var(--ad-accent) !important;
}

/* --------------------------------------------------------------------------
   Archive — post cards
   -------------------------------------------------------------------------- */

body.woodmart-archive-blog .wd-blog-element {
	padding-top: var(--ad-gap-inside-block);
}

/* ---- A real grid instead of the masonry ----
   The "Masonry grid" blog design lays the posts out in JS: it writes
   position:absolute plus left/top on every .wd-post and a fixed pixel height
   on the holder, which is why the cards were different heights and the columns
   never lined up. Overriding those inline styles is what the !important flags
   below are for — the alternative, switching the design in Theme Settings,
   also brings the sidebar back, because Woodmart drops the sidebar markup
   only for masonry (inc/classes/class-layout.php).

   Grid items stretch to their row by default, so every card in a row ends up
   the same height with no JS involved. */
body.woodmart-archive-blog .wd-blog-holder {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* 1fr rather than auto: every row gets the height of the tallest card on the
	   page, so the cards line up down the whole archive and not just inside
	   their own row. */
	grid-auto-rows: 1fr;
	gap: var(--ad-gap-inside-block);
	height: auto !important;
}

@media (max-width: 1024.98px) {
	body.woodmart-archive-blog .wd-blog-holder {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575.98px) {
	body.woodmart-archive-blog .wd-blog-holder {
		grid-template-columns: 1fr;
	}
}

/* .wd-col carries Woodmart's padding-based gutters, which the grid's own gap
   replaces. */
body.woodmart-archive-blog .wd-post {
	position: static !important;
	width: auto !important;
	/* `.wd-grid-f-col > .wd-col` also caps the column at
	   `max-width: calc(100% / var(--wd-col))`, which on a grid item is a cap on
	   the cell, not the row — the cards came out a third of their column wide. */
	max-width: none !important;
	margin-bottom: 0 !important;
	padding: 0 !important;
}

body.woodmart-archive-blog .wd-post .article-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--ad-bg-2);
	border-radius: var(--ad-radius-card);
	/* .wd-add-shadow paints a light-page drop shadow that reads as a grey halo
	   on a dark background. */
	box-shadow: none;
	/* so the thumbnail's square corners are clipped by the card's radius */
	overflow: hidden;
}

/* The thumbnails are whatever aspect ratio the post was published with — from
   2:1 banners to portrait screenshots. One ratio, cropped. */
body.woodmart-archive-blog .entry-thumbnail img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0;
	display: block;
}

/* Was a white panel of its own inside the card: `.wd-post.blog-style-bg
   .article-body-container {background-color: var(--bgcolor-white)}`, hence the
   .wd-post in the selector — without it the rule loses on specificity. Flex
   column so the card can push "Читати далі" to its bottom edge and the links
   line up across the row. */
body.woodmart-archive-blog .wd-post .article-body-container {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	background: transparent;
	padding: var(--ad-gap-inside-block);
}

/* ---- Category chip ----
   Woodmart hangs it over the boundary between thumbnail and body
   (.meta-categories-wrapp is absolutely positioned at top:-13px) and paints
   the *wrapper* gold, leaving the <a> transparent — which is why recolouring
   the link alone changed nothing. In the flow instead, so it cannot sit half
   on a photo. */
body.woodmart-archive-blog .meta-categories-wrapp {
	position: static;
	text-align: left;
	margin-bottom: var(--ad-gap-small);
}

body.woodmart-archive-blog .wd-post-cat.wd-style-with-bg,
body.single-post .wd-post-cat.wd-style-with-bg {
	background-color: var(--ad-accent);
	border-radius: var(--ad-radius-tags);
	padding: 3px 8px;
}

/* !important on the colour: Theme Settings → Custom CSS has
   `.post-single-page a {color: #b58352 !important}`, which is our accent — so
   on the single post the label was accent text on an accent pill. */
body.woodmart-archive-blog .wd-post-cat.wd-style-with-bg a,
body.single-post .wd-post-cat.wd-style-with-bg a {
	background: none;
	padding: 0;
	font-family: "Golos Text", sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--ad-text) !important;
}

body.woodmart-archive-blog .wd-post .post-title {
	font-family: "Golos Text", sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: -0.2px;
	text-align: left;
	text-transform: none;
	margin: 0 0 var(--ad-gap-small);
}

body.woodmart-archive-blog .wd-post .post-title a {
	color: var(--ad-text);
	transition: color 0.2s ease;
}

body.woodmart-archive-blog .wd-post .post-title a:hover {
	color: var(--ad-accent);
}

body.woodmart-archive-blog .wd-post-desc {
	font-family: "Golos Text", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	text-align: left;
	color: var(--ad-text-2);
}

body.woodmart-archive-blog .read-more-section {
	text-align: left;
	/* auto: the excerpts are different lengths, so without it the links sat at
	   a different height in every card of the row. */
	margin: auto 0 0;
	padding-top: var(--ad-gap-small);
}

body.woodmart-archive-blog .btn-read-more {
	font-family: "Rubik", sans-serif;
	font-weight: 500;
	font-size: 15px;
	letter-spacing: -0.15px;
	text-transform: none;
	color: var(--ad-accent);
	transition: color 0.2s ease;
}

body.woodmart-archive-blog .btn-read-more:hover {
	color: #5252b5;
}

/* ---- Pagination ---- */

body.woodmart-archive-blog .wd-pagination {
	padding-top: var(--ad-gap-inside-block);
}

body.woodmart-archive-blog .wd-pagination .page-numbers {
	font-family: "Golos Text", sans-serif;
	font-size: 15px;
	color: var(--ad-text-2);
	border-radius: var(--ad-radius-tags);
	border-color: var(--ad-bg-2);
}

body.woodmart-archive-blog .wd-pagination .page-numbers:hover,
body.woodmart-archive-blog .wd-pagination .page-numbers.current {
	color: var(--ad-text);
	background-color: var(--ad-accent);
	border-color: var(--ad-accent);
}

/* --------------------------------------------------------------------------
   Single post — header
   -------------------------------------------------------------------------- */

body.single-post .wd-single-post-header {
	max-width: 900px;
	margin-inline: auto;
}

body.single-post .wd-single-post-header .wd-entities-title {
	font-family: "Golos Text", sans-serif;
	font-weight: 700;
	font-size: clamp(22px, calc(22px + (32 - 22) * ((100vw - 375px) / (1440 - 375))), 32px);
	line-height: 1.2;
	letter-spacing: -0.4px;
	text-transform: none;
	color: var(--ad-text);
}

/* The featured images are full-size uploads — 1192×795 on a 1440 viewport, so
   the copy started a screen and a half below the title. `contain` rather than
   the `cover` used for the archive thumbnails: half of these are posters with
   the headline at the top edge, and cropping them cuts the headline off. */
body.single-post .wd-single-post-img img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	border-radius: var(--ad-radius-card);
	display: block;
}

/* --------------------------------------------------------------------------
   Single post — body copy
   Same measure and typography as .club-doc on the text pages.

   Every selector here goes through .post-single-page on purpose: the site
   footer's own wrapper is `.container.main-footer.wd-entry-content`, so a rule
   written against .wd-entry-content alone capped the whole footer at 900px and
   stacked its menu one letter per line.
   -------------------------------------------------------------------------- */

body.single-post .post-single-page .wd-entry-content {
	max-width: 900px;
	margin-inline: auto;
	font-family: "Golos Text", sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: var(--ad-text-2);
}

body.single-post .post-single-page .wd-entry-content p {
	margin: 0 0 var(--ad-gap-inside-block);
}

body.single-post .post-single-page .wd-entry-content h2,
body.single-post .post-single-page .wd-entry-content h3,
body.single-post .post-single-page .wd-entry-content h4 {
	font-family: "Golos Text", sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.25;
	letter-spacing: -0.2px;
	text-transform: none;
	color: var(--ad-text);
	margin: calc(var(--ad-gap-inside-block) * 1.5) 0 var(--ad-gap-small);
}

body.single-post .post-single-page .wd-entry-content strong,
body.single-post .post-single-page .wd-entry-content b {
	font-weight: 700;
	color: var(--ad-text);
}

body.single-post .post-single-page .wd-entry-content a {
	color: var(--ad-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
	transition: color 0.2s ease;
}

body.single-post .post-single-page .wd-entry-content a:hover {
	color: #5252b5;
}

/* The Telegram-imported posts embed their images as a bare <img> inside a
   paragraph, at whatever size the channel served. */
body.single-post .post-single-page .wd-entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--ad-radius-inputs);
}

body.single-post .post-single-page .wd-entry-content ul,
body.single-post .post-single-page .wd-entry-content ol {
	margin: 0 0 var(--ad-gap-inside-block);
	padding-left: 22px;
}

body.single-post .post-single-page .wd-entry-content li {
	margin-bottom: var(--ad-gap-small);
}

body.single-post .post-single-page .wd-entry-content li::marker {
	color: var(--ad-accent);
}

/* --------------------------------------------------------------------------
   Single post — the WPBakery timeline the "Кейси" posts are built with
   -------------------------------------------------------------------------- */

/* Every colour in this element was set in the builder, so Woodmart compiled it
   into an inline rule keyed by the item's ID (#wd-67b0a81332bdb …). An ID beats
   any number of classes, so these need !important — which is enough, because
   the ID rules themselves are not !important.

   The one exception is the connecting line: its rule IS
   `#wd-… .woodmart-timeline-line {border-color: #191514 !important}`, i.e. an
   ID *and* !important, which no class-based selector can outrank. #191514 on
   #252525 still reads as a line, so it is left as it is rather than fought
   with JS. */
body.single-post .woodmart-timeline-dot {
	background-color: var(--ad-accent) !important;
	border-color: var(--ad-bg);
}

/* The small caps at each end of the line. */
body.single-post .dot-start,
body.single-post .dot-end {
	background-color: var(--ad-bg-2) !important;
}

/* The item wrapper is the full-width row that holds both columns; the builder
   painted it white too, which turned the whole row into one slab and hid the
   two cards inside it. Only the columns are cards. */
body.single-post .wd-timeline-item {
	background-color: transparent !important;
}

body.single-post .timeline-col-primary,
body.single-post .timeline-col-secondary {
	background-color: var(--ad-bg-2) !important;
}

body.single-post .timeline-col-primary,
body.single-post .timeline-col-secondary {
	border-radius: var(--ad-radius-card);
	box-shadow: none;
	padding: var(--ad-gap-inside-block);
}

/* The little pointer between a card and the line: a CSS triangle drawn from
   `color`, so it has to follow the card's background. */
body.single-post .timeline-arrow {
	color: var(--ad-bg-2) !important;
}

/* Woodmart right-aligns whichever column sits left of the line, which is why
   every other card's copy was ragged-left. Ragged-right throughout instead. */
body.single-post .wd-timeline-item .timeline-col-primary,
body.single-post .wd-timeline-item .timeline-col-secondary,
body.single-post .wd-timeline-item .wd-timeline-title,
body.single-post .wd-timeline-item .wd-timeline-content {
	text-align: left;
}

body.single-post .wd-timeline-title {
	font-family: "Golos Text", sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: -0.2px;
	text-transform: none;
	color: var(--ad-text);
}

body.single-post .wd-timeline-content {
	font-family: "Golos Text", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ad-text-2);
}

body.single-post .wd-timeline-image img {
	border-radius: var(--ad-radius-inputs);
}

body.single-post .wd-timeline-breakpoint {
	font-family: "Golos Text", sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--ad-text);
}

body.single-post .woodmart-timeline-breakpoint-title {
	background-color: var(--ad-accent) !important;
	border-radius: var(--ad-radius-tags);
	color: var(--ad-text);
}

/* --------------------------------------------------------------------------
   Single post — share, prev/next, comments
   -------------------------------------------------------------------------- */

body.single-post .wd-single-footer,
body.single-post .wd-page-nav,
body.single-post .comments-area {
	max-width: 900px;
	margin-inline: auto;
}

body.single-post .wd-page-nav {
	border-top-color: var(--ad-bg-2);
}

body.single-post .wd-page-nav-btn a {
	font-family: "Golos Text", sans-serif;
	color: var(--ad-text-2);
	transition: color 0.2s ease;
}

/* "Новіші" / "Старше" — the theme only recolours this label inside its own
   mobile media query, so on desktop it kept the light-page grey. */
body.single-post .wd-page-nav-btn .wd-label {
	color: var(--color-gray-300);
}

/* The post title next to it was #333 on #252525, i.e. invisible. */
body.single-post .wd-page-nav-btn .wd-entities-title {
	font-family: "Golos Text", sans-serif;
	font-size: 14px;
	color: var(--ad-text-2);
}

body.single-post .wd-page-nav-btn a:hover .wd-entities-title,
body.single-post .wd-page-nav-btn a:hover {
	color: var(--ad-accent);
}

body.single-post .comment-reply-title,
body.single-post .comments-area .comments-title {
	font-family: "Golos Text", sans-serif;
	font-weight: 700;
	font-size: 20px;
	letter-spacing: -0.2px;
	text-transform: none;
	color: var(--ad-text);
}

body.single-post .comments-area,
body.single-post .comment-notes,
body.single-post .comment-form label {
	font-family: "Golos Text", sans-serif;
	font-size: 15px;
	color: var(--ad-text-2);
}

/* The form fields were transparent with white text and a yellow border, i.e.
   invisible on the old white page and mismatched on the new dark one. */
body.single-post .comment-form input[type="text"],
body.single-post .comment-form input[type="email"],
body.single-post .comment-form input[type="url"],
body.single-post .comment-form textarea {
	background-color: var(--ad-bg-2);
	/* !important: Theme Settings → Custom CSS has
	   `.comment-form-comment textarea, .comment-form-email input,
	   .comment-form-author input {border: .5px solid #fbbc34 !important;
	   border-radius: 5px !important}` — a yellow outline on three of the four
	   fields and not the fourth. */
	border: 1px solid var(--ad-bg-2) !important;
	border-radius: var(--ad-radius-inputs) !important;
	font-family: "Golos Text", sans-serif;
	font-size: 15px;
	color: var(--ad-text);
}

body.single-post .comment-form input[type="text"]:focus,
body.single-post .comment-form input[type="email"]:focus,
body.single-post .comment-form input[type="url"]:focus,
body.single-post .comment-form textarea:focus {
	border-color: var(--ad-accent) !important;
	outline: none;
}

body.single-post .comment-form ::placeholder {
	color: var(--ad-text-muted);
}

body.single-post .form-submit input[type="submit"] {
	background-color: var(--ad-accent);
	border-radius: var(--ad-radius-button);
	font-family: "Rubik", sans-serif;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: -0.16px;
	text-transform: none;
	color: var(--ad-text);
	transition: background-color 0.2s ease;
}

body.single-post .form-submit input[type="submit"]:hover {
	background-color: #5252b5;
}


.comments-area .comment-respond {
    margin-top: 30px;
    margin-bottom: 30px;
}