/**
 * Post Grid (Categorized) widget.
 * Section header + group-label eyebrow, then a card grid with vertical column
 * dividers. Each card: rounded image, category eyebrow, serif title, excerpt,
 * read-more link.
 */

.fpg-cg {
	width: 100%;
}

/* -- Section header ------------------------------------------------------- */
.fpg-cg__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	margin-bottom: 22px;
}

.fpg-cg__title {
	margin: 0;
	font-family: Georgia, "Times New Roman", "Playfair Display", serif;
	font-weight: 700;
	font-size: 34px;
	line-height: 1.1;
	color: #1a1a1a;
}

.fpg-cg__explore {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 15px;
	line-height: 1;
	color: #6b4f2c;
	text-decoration: none;
}

.fpg-cg__explore svg {
	width: 16px;
	height: 16px;
	flex: none;
}

/* -- Group label eyebrow -------------------------------------------------- */
.fpg-cg__group-label {
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 12px;
	font-weight: 600;
	color: #b07a3c;
	margin-bottom: 26px;
}

/* -- Grid ----------------------------------------------------------------- */
.fpg-cg__grid {
	--fpg-cg-columns: 3;
	--fpg-cg-gap: 56px;
	display: grid;
	grid-template-columns: repeat(var(--fpg-cg-columns), minmax(0, 1fr));
	column-gap: var(--fpg-cg-gap);
	row-gap: 48px;
}

.fpg-cg__card {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* Vertical divider centred in the gap before every card except the first.
   Enabled only when the "Show Column Dividers" switch is on. */
.fpg-cg-divider-yes .fpg-cg__card:not(:first-child)::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--fpg-cg-gap, 56px) / -2);
	width: 1px;
	background-color: rgba(0, 0, 0, 0.18);
}

/* Row-aware: the divider sits in the gap to a card's LEFT, so the first card of
   each row must NOT have one (otherwise it lands outside the grid on the left).
   The wrapper carries fpg-cg-cols-{n}. These match the create rule's specificity
   (0,3,1) and come later in source, so they win for first-of-row cards. */
.fpg-cg-cols-1 .fpg-cg__card:not(:first-child)::before,
.fpg-cg-cols-2 .fpg-cg__card:nth-child(2n + 1)::before,
.fpg-cg-cols-3 .fpg-cg__card:nth-child(3n + 1)::before,
.fpg-cg-cols-4 .fpg-cg__card:nth-child(4n + 1)::before {
	content: none;
}

/* Rounded image (background layer keeps corners crisp on hover-zoom) */
.fpg-cg__thumb {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	aspect-ratio: 1 / 1;
	margin-bottom: 20px;
	background-color: #e6e2d8;
	transform: translateZ(0);
}

.fpg-cg__img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: inherit;
	transition: transform 0.6s ease;
	will-change: transform;
}

.fpg-cg-zoom-yes .fpg-cg__card:hover .fpg-cg__img {
	transform: scale(1.05);
}

/* Category eyebrow */
.fpg-cg__category {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 12px;
	font-weight: 600;
	color: #b07a3c;
	margin-bottom: 12px;
}

/* Card title */
.fpg-cg__card-title {
	margin: 0 0 14px;
	font-family: Georgia, "Times New Roman", "Playfair Display", serif;
	font-weight: 700;
	font-size: 26px;
	line-height: 1.22;
	color: #2b2b2b;
}

.fpg-cg__card-title a {
	color: inherit;
	text-decoration: none;
}

.fpg-cg__card-title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Excerpt (clamped) */
.fpg-cg__excerpt {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.65;
	color: #8a7f72;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Read more */
.fpg-cg__readmore {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: auto;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #2b2b2b;
	text-decoration: none;
}

.fpg-cg__readmore svg {
	width: 13px;
	height: 13px;
	flex: none;
	color: #b07a3c;
	transition: transform 0.25s ease;
}

.fpg-cg__readmore:hover svg {
	transform: translate(2px, -2px);
}

.fpg-cg__empty {
	padding: 24px;
	text-align: center;
	color: #777;
	border: 1px dashed #ccc;
	border-radius: 8px;
}

/* -- Responsive ----------------------------------------------------------- */

/* Tablet: type only. Divider visibility is handled by the fpg-cg-cols-{n} class
   above (no viewport media query), so it also renders correctly inside the
   Elementor editor canvas, which is often narrower than a desktop breakpoint. */
@media (max-width: 1024px) {
	.fpg-cg__title {
		font-size: 28px;
	}
	.fpg-cg__card-title {
		font-size: 22px;
	}
}

/* Mobile: stack the header and drop dividers (grid collapses to one column). */
@media (max-width: 767px) {
	.fpg-cg__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.fpg-cg-divider-yes .fpg-cg__card:not(:first-child)::before {
		content: none;
	}
}