/* Written pages - page.php (content pages) and auto-repair.php (city pages).
   Both share php/page/view-inc.php, so both are styled here. */

.written-page {
	padding-top: 30px;
	padding-bottom: 60px;
}

.written-page .page-heading {
	margin-top: 0;
	margin-bottom: 24px;
}

/* The intro/outro blocks AduvioPageCopy::render() prints, and the page body itself.
   Measured rather than full width: a paragraph running the whole width of a desktop
   window is the one thing that makes a written page harder to read than a table. */
.written-page .page-copy,
.written-page .page-body {
	max-width: 72ch;
	margin-bottom: 28px;
	font-size: 16px;
	line-height: 1.7;
}

.written-page .page-copy > *:last-child,
.written-page .page-body > *:last-child {
	margin-bottom: 0;
}

.written-page .page-copy-intro {
	font-size: 17px;
}

.written-page h2 {
	margin-top: 36px;
	margin-bottom: 18px;
}

.written-page .faq-block {
	max-width: 72ch;
}

/* The sub-title and page text set on the Services Page tab, above the service grid - see
   php/services/view-inc.php */
.services-page-sub-title {
	margin-top: 10px;
	margin-bottom: 0;
	font-size: 22px;
	line-height: 30px;
}

.services-page-text {
	max-width: 72ch;
	margin: 16px auto 0;
	line-height: 1.7;
}

/* The same measure on the copy the services index carries - see services.php */
.services-page .page-copy {
	max-width: 72ch;
	margin: 0 auto 24px;
	line-height: 1.7;
}


/* Sheen sweep across a service tile on hover - a skewed band of light that crosses the card
   once, left to right. Same gesture the DealerPro vehicle tiles carry.

   ?The band is a pseudo-element of the tile, so nothing had to be added to the markup but the
   ?service-card class itself, and the tile clips it (overflow: hidden) so the band follows the
   ?14px corners .aduvio-feature-card draws and never shows outside them. It animates transform
   ?rather than left, so the sweep stays on the compositor and never reflows the grid: at rest the
   ?band sits off the left edge and the keyframes carry it past the right edge, so at every moment
   ?other than the sweep itself it is outside the clip and invisible.
   ?The band is a navy tint rather than white - the card is white, so a white sheen would have
   ?nothing to show against. It is not put on .aduvio-feature-card itself because that class is a
   ?core front-end style every Aduvio site uses, including as a plain page-body wrapper */
.service-card {
	position: relative;
	overflow: hidden;
}

.service-card:after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 45%;
	pointer-events: none;
	background: linear-gradient(to right, rgba(15,41,66,0) 0%, rgba(15,41,66,0.07) 50%, rgba(15,41,66,0) 100%);
	transform: skewX(-20deg) translateX(0);
}

.service-card:hover:after {
	animation: service-card-sheen 0.85s ease-out;
}

@keyframes service-card-sheen {
	from { transform: skewX(-20deg) translateX(0); }
	to   { transform: skewX(-20deg) translateX(400%); }
}

@media (prefers-reduced-motion: reduce) {
	.service-card:hover:after {
		animation: none;
	}
}

/* The picture a service page has been given, shown in place of the icon - see
   php/services/view-inc.php. A fixed box with object-fit rather than a free-standing img, so
   photographs of any proportion all crop to the same tile and a row of them lines up. The corners
   are its own: .aduvio-feature-card carries 15px of padding, so the picture sits inside the card
   rather than flush against its edge. */
.service-card-picture {
	height: 140px;
	margin-bottom: 15px;
	border-radius: 8px;
	overflow: hidden;
	background-color: #f5f5f5;
}

.service-card-picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* The service tiles a city page lists under its copy - see auto-repair.php */
.city-services-row {
	margin-bottom: 24px;
}

.city-service-tile {
	display: block;
	padding: 14px 16px;
	margin-bottom: 10px;
	border: 1px solid #e0e0e0;
	border-radius: 3px;
	text-decoration: none;
}

.city-service-tile:hover {
	border-color: #bbb;
	text-decoration: none;
}

/* How-to steps on a blog post - see php/blog-post/view-inc.php. The ids on the list
   items are the ones the HowTo node points each step at. */
.howto-steps {
	margin: 28px 0;
	padding-left: 22px;
	max-width: 72ch;
}

.howto-step {
	margin-bottom: 12px;
	line-height: 1.65;
}