/**
 * Blue Frame Films: services.css
 *
 * Purpose:  Services page: "What we do" line, numbered cards with a 6:1 header strip image
 *           (icon fallback when a card has no strip file) and a "See packages" link, and the
 *           call-to-action card.
 * Used by:  template-parts/services/services-list.php. Card base styles are in components.css.
 * To edit:  Column count: .svc (4 on desktop, 2 on tablet, 1 on phones).
 *           Strip images: assets/images/services/<slug>.webp; darkening: .svc-strip::after.
 */

/* ==========================================================================
   "What we do" line
   ========================================================================== */
.wwd {
	margin: -18px 0 40px;
	font-size: .88rem;
	color: #c3cfe9;
	max-width: 900px;
}

.wwd span {
	color: var(--elec2);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .72rem;
	margin-right: 4px;
}

/* ==========================================================================
   Services grid
   ========================================================================== */
.svc {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 16px;
}

/* Service card: strip (or icon) + number, title, line, "See packages" */
.svc-card {
	display: flex;
	flex-direction: column;
	scroll-margin-top: 96px;
	overflow: hidden;
}

/* 6:1 header strip, full bleed to the card edges (the card has 24px 22px padding) */
.svc-strip {
	position: relative;
	margin: -24px -22px 0;
	aspect-ratio: 6 / 1;
	border-bottom: 1px solid var(--line);
}

.svc-strip img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Subtle dark gradient: settles the photo into the card and keeps the number readable */
.svc-strip::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background: linear-gradient(180deg,rgba(5,8,20,.05) 0%,rgba(5,8,20,.2) 55%,rgba(5,8,20,.72) 100%),linear-gradient(90deg,rgba(5,8,20,.35) 0%,rgba(5,8,20,0) 40%);
	pointer-events: none;
}

.svc-strip .num {
	position: absolute;
	z-index: 2;
	right: 10px;
	bottom: 7px;
	color: #eaf2ff;
	text-shadow: 0 1px 6px rgba(0,0,0,.7);
}

.svc-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.svc .card h2 {
	font-size: 1.08rem;
	margin: 1rem 0 .45rem;
	letter-spacing: -.01em;
}

.svc-card p {
	flex: 1;
	margin-bottom: 18px;
}

.svc-card .more {
	font-size: .88rem;
}

.svc-card:target {
	border-color: rgba(0,194,255,.6);
	box-shadow: 0 0 0 1px rgba(0,194,255,.35),0 18px 40px -20px var(--glow);
}

/* "Not sure what you need?" card */
.card.card-cta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: transparent;
	border-style: dashed;
}

.card-cta .btn {
	margin-top: 14px;
}

/* ==========================================================================
   Planning & consulting paragraph (under the cards; copy in inc/data/services.php)
   ========================================================================== */
.svc-consult {
	margin-top: 48px;
	max-width: 760px;
	padding-left: 18px;
	border-left: 2px solid var(--elec2);
}

.svc-consult .eyebrow {
	display: block;
	color: var(--elec2);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .72rem;
	margin-bottom: 8px;
}

.svc-consult h2 {
	font-size: 1.35rem;
	letter-spacing: -.01em;
	margin-bottom: 10px;
}

.svc-consult p {
	color: #c3cfe9;
	line-height: 1.65;
}

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