/**
 * Blue Frame Films: home.css
 *
 * Purpose:  Home page teasers: services teaser, featured work cards, About teaser.
 *           (Hero: hero.css. Industries strip: industries.css. CTA band: components.css.)
 * Used by:  template-parts/home/services-teaser.php, featured-work.php, about-teaser.php.
 * To edit:  Teaser columns: .svc-teaser / .feat-grid. Keep it airy: few borders, big gaps.
 */

/* ==========================================================================
   Services teaser: icon + title + one line, links to /services/#slug
   ========================================================================== */
.svc-teaser {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 8px 28px;
}

.svc-teaser a {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 16px 12px;
	margin: 0 -12px;
	border-radius: 12px;
	transition: background .2s ease;
}

.svc-teaser a:hover,
.svc-teaser a:focus-visible {
	background: rgba(30,123,255,.07);
}

.svc-teaser b {
	display: block;
	font-size: .98rem;
	margin-bottom: 4px;
}

.svc-teaser .line {
	display: block;
	color: var(--muted);
	font-size: .86rem;
	line-height: 1.5;
}

.ico {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 11px;
	flex: none;
	color: var(--elec2);
	background: rgba(30,123,255,.1);
	border: 1px solid rgba(30,123,255,.28);
}

/* ==========================================================================
   Featured work (3 cards)
   ========================================================================== */
.feat-grid {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 22px;
}

.feat {
	display: block;
	border-radius: var(--r);
	overflow: hidden;
	background: var(--panel);
	border: 1px solid var(--line);
	transition: border-color .2s ease,transform .2s ease;
}

.feat:hover,
.feat:focus-visible {
	border-color: rgba(0,194,255,.5);
	transform: translateY(-2px);
}

.feat-img {
	position: relative; /* contains the painted-thumbnail <img> (see .bf-cover in components.css) */
	display: block;
	aspect-ratio: 16/10;
	overflow: hidden;
}

.feat-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.feat-body {
	display: block;
	padding: 16px 18px 20px;
}

.feat-body b {
	display: block;
	margin-top: 10px;
	font-size: 1.05rem;
	line-height: 1.3;
}

/* ==========================================================================
   About teaser
   ========================================================================== */
.about-teaser {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 40px;
	align-items: center;
	max-width: 880px;
}

.about-teaser img {
	width: 180px;
	height: 225px;
	object-fit: cover;
	object-position: center top;
	border-radius: var(--r);
	border: 1px solid rgba(30,123,255,.35);
	display: block;
}

.about-teaser .lead {
	margin-bottom: 1.1rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1000px) {
	.svc-teaser {
		grid-template-columns: repeat(2,1fr);
	}

	.feat-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width:760px) {
	.svc-teaser,
	.feat-grid {
		grid-template-columns: 1fr;
	}

	.svc-teaser a {
		padding: 12px;
	}

	.about-teaser {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.about-teaser img {
		width: 140px;
		height: 175px;
	}
}