/**
 * Advanced Post Grid Widget – Base Structural Styles
 *
 * Layout-only rules. All visual properties (colours, typography, spacing,
 * shadows, borders) are controlled via the Elementor panel controls.
 */

/* ── Grid container ──────────────────────────────────────────────── */
/* display:grid lives here (not in generated CSS) so the layout never
   collapses to block flow if Elementor's per-element CSS is stale.
   The column count is driven by the --acpg-columns variable, set by the
   responsive "Columns" control (defaults: 3 / tablet 2 / mobile 1). */
.acpg-grid-container {
	display: grid;
	grid-template-columns: repeat(var(--acpg-columns, 3), 1fr);
}

/* ── Card item ───────────────────────────────────────────────────── */
.acpg-grid-item,
.apg-card {
	display: flex;
	flex-direction: column;
	overflow: hidden; /* clips thumbnail to card's border-radius */
	background-color: transparent; /* default — override via Card Style control */
}

/* ── Card layouts (image/content direction) ──────────────────────── */
.apg-layout-vertical {
	flex-direction: column;
}

.apg-layout-horizontal {
	flex-direction: row;
	align-items: stretch;
}

.apg-layout-horizontal-reverse {
	flex-direction: row-reverse;
	align-items: stretch;
}

/* In horizontal modes the image becomes a side column; the content
   takes the remaining width. Image width is set via the Elementor
   "Image Width (Horizontal)" control (default 40%). */
.apg-layout-horizontal > .apg-image-container,
.apg-layout-horizontal-reverse > .apg-image-container {
	width: 40%;
	flex: 0 0 40%;
	align-self: stretch;
}

.apg-layout-horizontal > .apg-image-container a,
.apg-layout-horizontal-reverse > .apg-image-container a,
.apg-layout-horizontal > .apg-image-container .apg-card-image,
.apg-layout-horizontal-reverse > .apg-image-container .apg-card-image,
.apg-layout-horizontal > .apg-image-container .apg-image-placeholder,
.apg-layout-horizontal-reverse > .apg-image-container .apg-image-placeholder {
	height: 100%;
}

.apg-layout-horizontal > .apg-content-container,
.apg-layout-horizontal-reverse > .apg-content-container {
	flex: 1 1 auto;
	min-width: 0; /* allow text to wrap instead of overflowing */
}

/* Horizontal cards stack vertically on small screens for readability. */
@media (max-width: 767px) {
	.apg-layout-horizontal,
	.apg-layout-horizontal-reverse {
		flex-direction: column;
	}

	.apg-layout-horizontal > .apg-image-container,
	.apg-layout-horizontal-reverse > .apg-image-container {
		width: 100%;
		flex: 0 0 auto;
	}
}

/* ── Image container ─────────────────────────────────────────────── */
.apg-image-container,
.acpg-grid-thumbnail {
	position: relative; /* needed for ::after overlay */
	flex-shrink: 0;
}

.apg-image-container a,
.acpg-grid-thumbnail a {
	display: block;
	overflow: hidden;
	height: 100%; /* lets the image fill a container that has a defined height */
}

.apg-card-image,
.acpg-thumbnail-img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	/* Default box so object-fit / Image Fit is meaningful out of the box.
	   Overridden by the "Image Aspect Ratio" control (incl. "Original" =
	   auto) and by a custom image height. */
	aspect-ratio: 3 / 2;
}

/* Overlay pseudo-element — colour set via Elementor control */
.apg-image-container::after,
.acpg-grid-thumbnail::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-color: transparent;
}

/* ── Content container ────────────────────────────────────────────── */
.apg-content-container {
	display: flex;
	flex-direction: column;
	flex: 1; /* fills remaining card height */
}

.apg-card-content {
	display: flex;
	flex-direction: column;
	gap: 15px; /* default gap — overridden by Elementor control */
}

/* ── Content area ────────────────────────────────────────────────── */
/* .acpg-grid-content wrapper removed — all elements are now direct
   flex children of .acpg-grid-item, enabling CSS order on all of them. */

/* Excerpt grows to push the button to the card bottom */
.acpg-grid-excerpt,
.apg-card-excerpt {
	flex: 1;
}

/* ── Title ────────────────────────────────────────────────────────── */
.apg-card-title,
.acpg-grid-title a {
	text-decoration: none;
}

.apg-card-title a:hover,
.acpg-grid-title a:hover {
	text-decoration: underline;
}

/* ── Subtitle ────────────────────────────────────────────────────── */
.apg-card-subtitle,
.acpg-grid-subtitle {
	display: block;
	margin-top: 0.25em;
}

/* ── Meta (date + author inline) ─────────────────────────────────── */
.apg-card-meta,
.acpg-grid-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 0.75em;
	align-items: center;
}

/* ── Button container ─────────────────────────────────────────────── */
.apg-button-container {
	display: flex;
	margin-top: auto; /* push button to bottom of content area */
}

/*
 * Button alignment is handled entirely by Elementor's selectors_dictionary
 * on the responsive `button_align` CHOOSE control. No class-based alignment
 * rules are needed here.
 *
 * Base safety rule: when the container is stretched (justify mode), the
 * button should fill the container width. The `justify_button_width` control
 * (default 100%) sets the exact width via Elementor selectors; this rule
 * ensures the button stretches even before that control is explicitly set
 * or on responsive breakpoints where the condition may not apply.
 */
.apg-button-container .apg-card-button,
.apg-button-container .acpg-grid-button {
	/* Base: no stretch — alignment controls override via Elementor CSS. */
}

/* ── Button ──────────────────────────────────────────────────────── */
.apg-card-button,
.acpg-grid-button {
	display: inline-block;  /* <a> tag needs this for padding/sizing */
	text-decoration: none;
	align-self: flex-start; /* don't stretch full card width */
	margin-top: auto;       /* push to bottom when card is taller */
	cursor: pointer;
}

/* ── Extra containers (empty by default) ─────────────────────────── */
.apg-extra-container {
	/* Intentionally empty — available for custom content/extensions. */
}

/* ── Pagination ───────────────────────────────────────────────────── */
/* Structural layout + light default skin. Colours, spacing, radius,
   typography and per-state styling are all overridable via the
   "Pagination" controls in the Style tab. */
.acpg-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 30px;
}

.acpg-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	padding: 8px 12px;
	line-height: 1;
	text-decoration: none;
	border-radius: 6px;
	color: #1c2230;
	background-color: transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* The ellipsis between number ranges shouldn't look clickable */
.acpg-pagination .page-numbers.dots {
	min-width: auto;
	padding-left: 4px;
	padding-right: 4px;
}

.acpg-pagination a.page-numbers:hover {
	background-color: #f0f1f3;
}

.acpg-pagination .page-numbers.current {
	background-color: #1c2230;
	color: #ffffff;
}

/* ── Tag / Badge pill ─────────────────────────────────────────────── */
/* Structural + sensible visual defaults. Every property below is
   overridable through the "Tag / Badge" controls in the Style tab. */
.apg-card-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background-color: #ffffff;
	color: #1f2430;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* ── Image placeholder ("ФОТО" slot when no featured image) ───────── */
.apg-image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 200px;
	height: 100%;
	background-color: #e9eaec;
	color: #b5b9bf;
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════════
   PRESET: Minimal News
   Clean, flat, generous whitespace. These are defaults only — any of
   them can be overridden via the matching Elementor Style controls.
   ════════════════════════════════════════════════════════════════════ */
.acpg-style-minimal .apg-card,
.acpg-style-minimal .acpg-grid-item {
	background-color: transparent;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Image block: rounded grey rectangle */
.acpg-style-minimal .apg-image-container,
.acpg-style-minimal .acpg-grid-thumbnail {
	border-radius: 16px;
	overflow: hidden;
	background-color: #e9eaec;
	aspect-ratio: 16 / 10;
	margin-bottom: 16px;
}

.acpg-style-minimal .apg-card-image,
.acpg-style-minimal .acpg-thumbnail-img {
	height: 100%;
}

/* Minimal preset: in horizontal layouts the image gap moves to the side */
.acpg-style-minimal .apg-layout-horizontal > .apg-image-container {
	margin-bottom: 0;
	margin-right: 16px;
}

.acpg-style-minimal .apg-layout-horizontal-reverse > .apg-image-container {
	margin-bottom: 0;
	margin-left: 16px;
}

.acpg-style-minimal .apg-image-placeholder {
	min-height: 100%;
}

/* Content spacing */
.acpg-style-minimal .apg-content-container {
	padding: 0;
}

.acpg-style-minimal .apg-card-content {
	gap: 10px;
}

/* Date / meta: light grey */
.acpg-style-minimal .apg-card-meta,
.acpg-style-minimal .acpg-grid-meta {
	color: #aeb3bb;
	font-size: 0.85rem;
}

/* Headline: bold, dark */
.acpg-style-minimal .apg-card-title a,
.acpg-style-minimal .acpg-grid-title a {
	color: #1c2230;
	font-weight: 700;
	line-height: 1.3;
}

.acpg-style-minimal .apg-card-title a:hover,
.acpg-style-minimal .acpg-grid-title a:hover {
	text-decoration: none;
	color: #000000;
}

/* "Читать далее →" text link */
.acpg-style-minimal .apg-card-button,
.acpg-style-minimal .acpg-grid-button {
	background-color: transparent;
	padding: 0;
	color: #3a4150;
	font-weight: 600;
}

.acpg-style-minimal .apg-card-button::after,
.acpg-style-minimal .acpg-grid-button::after {
	content: " →";
}

.acpg-style-minimal .apg-card-button:hover,
.acpg-style-minimal .acpg-grid-button:hover {
	color: #000000;
}