/* =============================================================
   Left/Right Content Rows — front-end styles.
   Used by page-templates/left-right-rows.php via dc_render_content_blocks().
   @package DorsetCereals
   ============================================================= */

/* ── Row container ─────────────────────────────────────────────── */
.dc-row {
	padding: 4rem 0;
	border-top: 1px solid var(--dc-border);
}

.dc-row:first-of-type {
	border-top: none;
}

/* Alternate rows get a subtle depth via a semi-transparent overlay */
.dc-row:nth-of-type(even) {
	background: rgba(0, 0, 0, 0.18);
}

.dc-row__container {
	width: min(100%, var(--dc-max-width));
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* ── Two-column inner layout (image-bearing rows) ──────────────── */
.dc-row__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3.5rem;
	align-items: start;
}

/* Alternate orientation: every other image-bearing row flips the
 * image to the right by reversing grid column order. */
.dc-row--reverse .dc-row__image { order: 2; }
.dc-row--reverse .dc-row__text  { order: 1; }

/* ── Image column ──────────────────────────────────────────────── */
.dc-row__image {
	margin: 0;
}

.dc-row__image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.dc-row__caption {
	margin-top: 0.65rem;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--dc-muted);
	font-style: italic;
	text-align: center;
}

/* ── Text column ───────────────────────────────────────────────── */
.dc-row__text {
	color: var(--dc-muted);
	line-height: 1.8;
	font-size: 1rem;
}

/* Full-width text block (no image on this row) */
.dc-row__text--full {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.dc-row__title {
	font-size: clamp(1.35rem, 2.5vw, 1.85rem);
	font-weight: 600;
	color: var(--dc-text);
	margin-top: 0;
	margin-bottom: 1rem;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.dc-row__text p {
	margin-bottom: 1rem;
	color: var(--dc-muted);
}
.dc-row__text p:last-child {
	margin-bottom: 0;
}

.dc-row__text h2,
.dc-row__text h3,
.dc-row__text h4 {
	color: var(--dc-accent);
	margin: 1.5rem 0 0.75rem;
	line-height: 1.25;
}

.dc-row__text h2:first-child,
.dc-row__text h3:first-child,
.dc-row__text h4:first-child {
	margin-top: 0;
}

.dc-row__text ul,
.dc-row__text ol {
	padding-left: 1.5rem;
	margin-bottom: 1rem;
	color: var(--dc-muted);
}

.dc-row__text li {
	margin-bottom: 0.4rem;
}

.dc-row__text a {
	color: var(--dc-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 200ms ease;
}
.dc-row__text a:hover {
	color: #fff;
}

.dc-row__text strong {
	color: var(--dc-text);
	font-weight: 600;
}

/* Large paragraph style (via TinyMCE styleselect) */
.dc-row__text p.p-large {
	font-size: 1.2rem;
	line-height: 1.7;
}

/* ── Last row: tighten bottom padding so it sits close to the footer ── */
.dc-row:last-of-type {
	padding-bottom: 2rem;
}

/* ═══════════════════════════════════════════════════════════════
   Floating image card variant  (.dc-rows-wrap--floating)
   Images get a white border, padding, drop shadow and a slight
   jaunty rotation — same aesthetic as the Floating Images template
   but static (no drag/interactive behaviour).
   ═══════════════════════════════════════════════════════════════ */

/* Card frame on the figure */
.dc-rows-wrap--floating .dc-row__image {
	background: #fff;
	padding: 0.9rem;
	box-shadow: 0 9px 28px rgba(0, 0, 0, 0.32);
	border-radius: 0;       /* square photo-frame corners */
	overflow: visible;      /* let the shadow breathe outside */
	isolation: isolate;
	transition: box-shadow 260ms ease;
}

/* Subtle paper-grain overlay — matches the draggable card ::after */
.dc-rows-wrap--floating .dc-row__image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-image:
		radial-gradient(circle at 24% 18%, rgba(42, 38, 32, 0.05) 0, rgba(42, 38, 32, 0) 52%),
		radial-gradient(circle at 78% 72%, rgba(42, 38, 32, 0.045) 0, rgba(42, 38, 32, 0) 56%),
		repeating-linear-gradient(
			0deg,
			rgba(64, 58, 50, 0.025) 0,
			rgba(64, 58, 50, 0.025) 1px,
			rgba(255, 255, 255, 0) 1px,
			rgba(255, 255, 255, 0) 3px
		);
	opacity: 0.55;
	mix-blend-mode: multiply;
}

/* Strip the border-radius and shadow we set on the base img — the
 * card frame itself provides the visual container now */
.dc-rows-wrap--floating .dc-row__image img {
	border-radius: 0;
	box-shadow: none;
	display: block;
	position: relative;
	z-index: 1;
}

/* Alternating jaunty rotations.
 * Our first row is --reverse (image right): lean clockwise.
 * Second row (image left): lean counter-clockwise. Repeats from there. */
.dc-rows-wrap--floating .dc-row--reverse .dc-row__image {
	rotate: 2deg;
}
.dc-rows-wrap--floating .dc-row:not(.dc-row--reverse) .dc-row__image {
	rotate: -2deg;
}

/* Caption hidden on the floating variant — the white frame padding
 * looks odd with text sitting outside it */
.dc-rows-wrap--floating .dc-row__caption {
	display: none;
}

/* Give each row a bit more vertical breathing room so the rotated
 * card doesn't clip into the row above or below */
.dc-rows-wrap--floating .dc-row {
	padding-top: 5rem;
	padding-bottom: 5rem;
}
.dc-rows-wrap--floating .dc-row:last-of-type {
	padding-bottom: 2rem;
}

/* ── Per-row CTA button ────────────────────────────────────────── */
.dc-row__cta {
	margin-top: 1.75rem;
}

/*
 * .dc-btn base styles live in style.css (global).
 * Override .dc-row__text a colour/underline here — higher specificity
 * (.dc-row__text a.dc-btn = (0,0,2,1)) wins over (.dc-row__text a = (0,0,1,1)).
 */
.dc-row__text a.dc-btn,
.dc-row__text a.dc-btn:link,
.dc-row__text a.dc-btn:visited,
.dc-row__text a.dc-btn:hover,
.dc-row__text a.dc-btn:focus {
	color: var(--dc-text);
	text-decoration: none;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.dc-row__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	/* On mobile, always put the image first regardless of alternation */
	.dc-row--reverse .dc-row__image { order: 0; }
	.dc-row--reverse .dc-row__text  { order: 0; }

	.dc-row__text--full {
		text-align: left;
	}
}

@media (max-width: 600px) {
	.dc-row {
		padding: 2.75rem 0;
	}
}