/* sections/safety.php */
.sf-section {
	position: relative; box-sizing: border-box; width: 100%; overflow: hidden; /* clips the watermark past the left edge */
	padding: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem) var(--space-gutter);
	--sf-blue: color-mix(in srgb, var(--c-primary) 8%, var(--c-primary-dark));
	background: var(--c-bg-alt); color: var(--c-text);
	font-family: var(--f-body); font-size: var(--fs-base); line-height: 1.6;
}
.sf-section *, .sf-section *::before, .sf-section *::after { box-sizing: border-box; }
.sf-icon { flex: none; width: 1.375rem; height: 1.375rem; }
/*
	Watermark: the logo as a faint navy silhouette (mask over a navy fill), tilted,
	in the upper left corner (the services section has it on the right), partly
	off the left edge of the screen; the section clips it.
*/
.sf-section::before {
	content: ""; position: absolute; z-index: 0; top: -2rem; left: -6rem; width: min(26rem, 80vw); aspect-ratio: 350 / 293;
	background: var(--c-primary); opacity: 0.05; pointer-events: none; transform: rotate(-12deg);
	-webkit-mask: url("/wp-content/uploads/2026/10/deratihome-logo.webp") center / contain no-repeat;
	mask: url("/wp-content/uploads/2026/10/deratihome-logo.webp") center / contain no-repeat;
}
.sf-inner { position: relative; z-index: 1; display: grid; gap: var(--space-7); max-width: var(--container); margin: 0 auto; }
.sf-inner > * { min-width: 0; }

.sf-label {
	display: inline-flex; align-items: center; gap: var(--space-2);
	margin: 0 0 var(--space-3); padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill); background: var(--c-primary-soft); color: var(--c-primary);
	font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.sf-label::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-accent); }
.sf-section .sf-title {
	margin: 0; color: var(--c-heading);
	font-family: var(--f-heading); font-size: var(--fs-2xl); font-weight: 800;
	line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance;
}
.sf-intro { margin: var(--space-3) 0 0; color: var(--c-text-muted); font-size: var(--fs-lg); }

/* Commitments: rows separated by hairlines, the icon tile fills with navy on hover */
.sf-list { margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.sf-item {
	display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-4); align-items: center;
	padding: var(--space-3) 0; border-top: 1px solid var(--c-border);
}
.sf-item:last-child { border-bottom: 1px solid var(--c-border); }
.sf-item-icon {
	display: grid; place-items: center; width: 3rem; height: 3rem;
	border-radius: var(--radius); background: var(--c-surface); color: var(--c-primary); box-shadow: var(--shadow-sm);
	transition: background-color 0.25s, color 0.25s, transform 0.25s;
}
.sf-item:hover .sf-item-icon { background: var(--c-primary); color: var(--c-on-primary); transform: scale(1.06); }
.sf-section .sf-item-title { margin: 0; color: var(--c-heading); font: 700 var(--fs-lg)/1.3 var(--f-heading); }
.sf-item-text { margin: var(--space-1) 0 0; color: var(--c-text-muted); font-size: var(--fs-sm); }

/* Call to action: navy pill with a red round badge + phone link */
.sf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-4); }
.sf-section .sf-btn {
	display: inline-flex; align-items: center; gap: var(--space-4); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-5);
	border-radius: var(--radius-pill); background: var(--c-primary); color: var(--c-on-primary); box-shadow: var(--shadow-md);
	font: 700 var(--fs-base)/1.2 var(--f-body); text-decoration: none; transition: background-color 0.25s, transform 0.25s;
}
.sf-section .sf-btn:hover, .sf-section .sf-btn:focus { background: var(--c-primary-hover); color: var(--c-on-primary); transform: translateY(-2px); }
.sf-badge { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); }
.sf-badge .sf-icon { width: 1.25rem; height: 1.25rem; transform: rotate(-45deg); transition: transform 0.25s; }
.sf-btn:hover .sf-badge .sf-icon { transform: rotate(0deg); }
.sf-section .sf-phone { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--c-heading); font-weight: 700; text-decoration: none; white-space: nowrap; }
.sf-section .sf-phone:hover, .sf-section .sf-phone:focus { color: var(--c-primary); text-decoration: underline; text-underline-offset: 0.2em; }
.sf-phone .sf-icon { width: 1.25rem; height: 1.25rem; color: var(--c-accent); }
.sf-section a:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }

/* Picture card: the site's picture shape (two large opposite corners, outlined twin behind) */
.sf-visual { position: relative; --sf-shape: 3.5rem var(--radius-lg) 3.5rem var(--radius-lg); }
.sf-visual::after {
	content: ""; position: absolute; z-index: 0; inset: 0;
	border: 1px solid color-mix(in srgb, var(--c-primary) 28%, transparent); border-radius: var(--sf-shape);
	transform: translate(0.625rem, 0.625rem); pointer-events: none;
}
.sf-media {
	/* Below 1024px the frame has the picture's own proportions (16:10 while empty): nothing is cropped. */
	position: relative; z-index: 1; overflow: hidden; margin: 0; aspect-ratio: var(--sf-ratio, 16 / 10);
	border-radius: var(--sf-shape); background: var(--c-primary-soft); box-shadow: var(--shadow-md);
}
.sf-section .sf-img { display: block; width: 100%; height: 100%; max-width: none; border-radius: 0; object-fit: cover; }
/* No picture yet: an empty frame, kept quiet. */
.sf-media--empty { display: grid; place-items: center; border: 1px dashed color-mix(in srgb, var(--c-primary) 35%, transparent); box-shadow: none; }
.sf-empty { display: grid; justify-items: center; gap: var(--space-2); color: color-mix(in srgb, var(--c-primary) 45%, transparent); font-size: var(--fs-xs); font-weight: 600; text-align: center; }
.sf-empty .sf-icon { width: 2.5rem; height: 2.5rem; stroke-width: 1.2; }
/* Portrait picture on small screens: in a frame narrower than the column. */
.sf-visual--portrait { width: 100%; max-width: 24rem; margin-inline: auto; }
/* Chip over the upper left corner of the picture (the lower left shows the mask and gloves) */
.sf-chip {
	position: absolute; z-index: 2; left: calc(-1 * var(--space-2)); top: var(--space-5); margin: 0;
	display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
	border-radius: var(--radius-pill); background: var(--sf-blue); color: var(--c-on-dark); box-shadow: var(--shadow-md);
	font-size: var(--fs-sm); font-weight: 700; line-height: 1.2;
}
.sf-chip-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); }

@media (min-width: 1024px) {
	.sf-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); align-items: stretch; }
	/* The picture card is as tall as the text column. */
	.sf-visual { --sf-shape: 5rem var(--radius-lg) 5rem var(--radius-lg); display: flex; max-width: none; min-height: 24rem; }
	.sf-visual .sf-media { flex: 1; aspect-ratio: auto; }
	.sf-media .sf-img { position: absolute; inset: 0; }
	.sf-visual::after { transform: translate(1rem, 1rem); }
	.sf-chip { left: calc(-1 * var(--space-5)); top: var(--space-7); }
}
@media (prefers-reduced-motion: reduce) {
	.sf-section * { transition: none !important; }
}