/**
 * Paripoorn Feature Row widget.
 *
 * A rounded soft panel holding a row of short feature columns, each
 * separated from the previous one by a thin vertical accent rule.
 * Uses theme design tokens (--pp-*) so it follows the active Paripoorn
 * Settings brand colors/fonts; Elementor style controls (see
 * FeatureRow.php) override these per-instance.
 */

.pp-fr {
	background-color: #FBF0E0;
	border-radius: 24px;
	padding: 36px 40px;
	box-sizing: border-box;
}

.pp-fr__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 32px;
	row-gap: 28px;
	align-items: start;
}

/*
 * Each item draws the rule that sits to ITS OWN left, so the count is
 * always right regardless of how many items there are — no :last-child
 * special-casing, and no trailing rule after the final column.
 *
 * The offset is applied as a negative inset of half the column gap, so the
 * rule lands centred in the gutter rather than tight against the text.
 */
.pp-fr__item {
	--pp-fr-divider-offset: 32px;
	/* Breathing room on BOTH sides of the text, so a divider always sits in
	   the middle of an even gap: indent to its right on this item, and the
	   same indent to the left of the previous item's text. Set by the
	   "Text Indent" control. */
	--pp-fr-text-indent: 22px;
	position: relative;
	min-width: 0;
	display: block;
	color: inherit;
	text-decoration: none;
	padding-left: var(--pp-fr-text-indent);
	padding-right: var(--pp-fr-text-indent);
}

/* Items that start a row have no divider to their left, so the left pad
   would just inset the whole grid from the panel's own padding. */
.pp-fr__grid > .pp-fr__item:first-child,
.pp-fr__grid[data-pp-cols="2"] > .pp-fr__item:nth-child(2n + 1),
.pp-fr__grid[data-pp-cols="3"] > .pp-fr__item:nth-child(3n + 1),
.pp-fr__grid[data-pp-cols="4"] > .pp-fr__item:nth-child(4n + 1),
.pp-fr__grid[data-pp-cols="5"] > .pp-fr__item:nth-child(5n + 1),
.pp-fr__grid[data-pp-cols="6"] > .pp-fr__item:nth-child(6n + 1),
.pp-fr__grid[data-pp-cols="1"] > .pp-fr__item,
.pp-fr--no-divider .pp-fr__item {
	padding-left: 0;
}

/* Likewise the last item in each row has no divider to its right. */
.pp-fr__grid > .pp-fr__item:last-child,
.pp-fr__grid[data-pp-cols="2"] > .pp-fr__item:nth-child(2n),
.pp-fr__grid[data-pp-cols="3"] > .pp-fr__item:nth-child(3n),
.pp-fr__grid[data-pp-cols="4"] > .pp-fr__item:nth-child(4n),
.pp-fr__grid[data-pp-cols="5"] > .pp-fr__item:nth-child(5n),
.pp-fr__grid[data-pp-cols="6"] > .pp-fr__item:nth-child(6n),
.pp-fr__grid[data-pp-cols="1"] > .pp-fr__item,
.pp-fr--no-divider .pp-fr__item {
	padding-right: 0;
}

/*
 * The rule fades out at both ends rather than stopping abruptly, so it
 * reads as a soft accent against the panel instead of a hard bar.
 *
 * The colour is carried in --pp-fr-divider-color (set by the Divider Color
 * control, and overridable per item) and consumed by a gradient here —
 * transparent at both ends, solid through the middle. The fade size is its
 * own variable so it can be tuned from the panel without rewriting the
 * gradient.
 */
.pp-fr__item::before {
	content: "";
	position: absolute;
	/* Centred in the gutter. The text indent is padding on the items
	   themselves, so the rule stays put and the copy moves away from it on
	   both sides — no need to offset the rule to compensate. */
	left: calc(var(--pp-fr-divider-offset) / -2);
	top: 50%;
	transform: translateY(-50%);
	width: 2px;
	height: 100%;
	background-image: linear-gradient(
		to bottom,
		transparent 0%,
		var(--pp-fr-divider-color, var(--pp-primary, #F20D16)) var(--pp-fr-divider-fade, 18%),
		var(--pp-fr-divider-color, var(--pp-primary, #F20D16)) calc(100% - var(--pp-fr-divider-fade, 18%)),
		transparent 100%
	);
}

/*
 * Hide the rule on the first item of every row.
 *
 * CSS has no "first in visual row" selector, so the column count is echoed
 * from the widget's Columns control into --pp-fr-cols and matched with
 * :nth-child(Nn+1). One rule per supported count (1–6) keeps every wrapped
 * row clean instead of leaving a stray rule hanging at a row start.
 */
.pp-fr__grid > .pp-fr__item:first-child::before {
	display: none;
}

.pp-fr__grid[data-pp-cols="2"] > .pp-fr__item:nth-child(2n + 1)::before,
.pp-fr__grid[data-pp-cols="3"] > .pp-fr__item:nth-child(3n + 1)::before,
.pp-fr__grid[data-pp-cols="4"] > .pp-fr__item:nth-child(4n + 1)::before,
.pp-fr__grid[data-pp-cols="5"] > .pp-fr__item:nth-child(5n + 1)::before,
.pp-fr__grid[data-pp-cols="6"] > .pp-fr__item:nth-child(6n + 1)::before,
.pp-fr__grid[data-pp-cols="1"] > .pp-fr__item::before {
	display: none;
}

.pp-fr--no-divider .pp-fr__item::before {
	display: none;
}

/* ---------- Type ---------- */

.pp-fr__title {
	font-family: var(--pp-font-heading, "Libre Caslon Text", Georgia, serif);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #1B1B1B;
	margin: 0 0 8px;
}

.pp-fr__text {
	font-family: var(--pp-font-body, "Manrope", sans-serif);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.65;
	color: #6B6B6B;
	margin: 0;
}

/* Linked items: the whole column becomes the click target, so give it a
   pointer and a subtle lift without moving anything around it. */
.pp-fr__item--linked {
	cursor: pointer;
	transition: transform 0.18s ease;
}

.pp-fr__item--linked:hover {
	transform: translateY(-2px);
}

.pp-fr__item--linked:focus-visible {
	outline: 2px solid var(--pp-primary, #F20D16);
	outline-offset: 4px;
	border-radius: 4px;
}

.pp-fr__item--linked .pp-fr__title {
	transition: color 0.18s ease;
}

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

@media (max-width: 1024px) {
	.pp-fr {
		padding: 32px;
	}

	/* Tablet column count comes from its own control, so the row-start
	   rules have to be recalculated for that count at this breakpoint. */
	.pp-fr__grid > .pp-fr__item::before {
		display: block;
	}

	.pp-fr__grid[data-pp-cols-tablet="2"] > .pp-fr__item:nth-child(2n + 1)::before,
	.pp-fr__grid[data-pp-cols-tablet="3"] > .pp-fr__item:nth-child(3n + 1)::before,
	.pp-fr__grid[data-pp-cols-tablet="4"] > .pp-fr__item:nth-child(4n + 1)::before,
	.pp-fr__grid[data-pp-cols-tablet="5"] > .pp-fr__item:nth-child(5n + 1)::before,
	.pp-fr__grid[data-pp-cols-tablet="6"] > .pp-fr__item:nth-child(6n + 1)::before,
	.pp-fr__grid[data-pp-cols-tablet="1"] > .pp-fr__item::before,
	.pp-fr__grid > .pp-fr__item:first-child::before,
	.pp-fr--no-divider .pp-fr__item::before {
		display: none;
	}

	/* Indent follows the tablet column count for the same reason. */
	.pp-fr__grid > .pp-fr__item {
		padding-left: var(--pp-fr-text-indent);
		padding-right: var(--pp-fr-text-indent);
	}

	.pp-fr__grid[data-pp-cols-tablet="2"] > .pp-fr__item:nth-child(2n + 1),
	.pp-fr__grid[data-pp-cols-tablet="3"] > .pp-fr__item:nth-child(3n + 1),
	.pp-fr__grid[data-pp-cols-tablet="4"] > .pp-fr__item:nth-child(4n + 1),
	.pp-fr__grid[data-pp-cols-tablet="5"] > .pp-fr__item:nth-child(5n + 1),
	.pp-fr__grid[data-pp-cols-tablet="6"] > .pp-fr__item:nth-child(6n + 1),
	.pp-fr__grid[data-pp-cols-tablet="1"] > .pp-fr__item,
	.pp-fr--no-divider .pp-fr__item {
		padding-left: 0;
	}

	.pp-fr__grid[data-pp-cols-tablet="2"] > .pp-fr__item:nth-child(2n),
	.pp-fr__grid[data-pp-cols-tablet="3"] > .pp-fr__item:nth-child(3n),
	.pp-fr__grid[data-pp-cols-tablet="4"] > .pp-fr__item:nth-child(4n),
	.pp-fr__grid[data-pp-cols-tablet="5"] > .pp-fr__item:nth-child(5n),
	.pp-fr__grid[data-pp-cols-tablet="6"] > .pp-fr__item:nth-child(6n),
	.pp-fr__grid[data-pp-cols-tablet="1"] > .pp-fr__item,
	.pp-fr__grid > .pp-fr__item:last-child,
	.pp-fr--no-divider .pp-fr__item {
		padding-right: 0;
	}
}

@media (max-width: 767px) {
	.pp-fr {
		padding: 28px 24px;
	}

	/* Rule is above the item here, not beside it, so the side indents that
	   clear a vertical rule would just look like a stray inset. */
	.pp-fr__grid > .pp-fr__item {
		padding-left: 0;
		padding-right: 0;
	}

	/* Stacked on phones: a vertical rule between stacked blocks reads as a
	   stray mark, so switch to a short horizontal rule above each item. */
	.pp-fr__grid > .pp-fr__item::before {
		display: block;
		left: 0;
		top: calc(var(--pp-fr-divider-offset) / -2);
		bottom: auto;
		width: 28px;
		height: 2px;
		transform: none;
		/* Rule is horizontal here, so the fade has to run along X instead. */
		background-image: linear-gradient(
			to right,
			var(--pp-fr-divider-color, var(--pp-primary, #F20D16)) 0%,
			transparent 100%
		);
	}

	.pp-fr__grid[data-pp-cols-mobile="2"] > .pp-fr__item:nth-child(2n + 1)::before,
	.pp-fr__grid[data-pp-cols-mobile="3"] > .pp-fr__item:nth-child(3n + 1)::before,
	.pp-fr__grid[data-pp-cols-mobile="4"] > .pp-fr__item:nth-child(4n + 1)::before,
	.pp-fr__grid[data-pp-cols-mobile="5"] > .pp-fr__item:nth-child(5n + 1)::before,
	.pp-fr__grid[data-pp-cols-mobile="6"] > .pp-fr__item:nth-child(6n + 1)::before,
	.pp-fr__grid > .pp-fr__item:first-child::before,
	.pp-fr--no-divider .pp-fr__item::before {
		display: none;
	}
}