/* ============================================================================
 * Pearland411 — house promo cards
 * ----------------------------------------------------------------------------
 * The two static cards that sell Pearland411's own services:
 *
 *   partials/service_promo.php       .p411-promo   — websites / hosting / SEO
 *   partials/banner_design_promo.php .p411-bpromo  — ad + banner artwork
 *
 * Both are rendered on the homepage, the directory (/all-listing) and listing
 * details, so their styles live here rather than being copied into
 * home-sections.css and directory.css and then drifting apart. This file was
 * split out of directory.css for exactly that reason.
 *
 * SCOPING RULE — every selector is a `.p411-promo` / `.p411-bpromo`
 * descendant. Those class names are emitted by the two partials above and
 * nowhere else in the codebase, so unlike home-sections.css this file does not
 * need a page scope class: there is nothing else on any page for it to hit.
 *
 * The cards deliberately do NOT reuse the `.p411-btn` pill from directory.css
 * or home-sections.css. They sit on a dark panel and need a white button, and
 * fighting three different `.p411-*-page .p411-btn` rules for that across
 * three stylesheets is how white-on-white buttons happen. `.p411-promo__cta`
 * is theirs alone.
 *
 * Colours are literals, not var(), for the same reason — the card must look
 * identical on a page that declares the `--p411-*` tokens and one that
 * doesn't.
 * ==========================================================================*/

/* ---- shared card frame ---------------------------------------------- */

.p411-promo,
.p411-bpromo {
	position: relative;
	border-radius: 12px;
	padding: 20px 18px;
	color: #fff;
	overflow: hidden;
	margin-bottom: 18px;
}

/* Pear green — the web-services card. */
.p411-promo { background: linear-gradient(150deg, #1F3D0F 0%, #35630F 55%, #4E8A28 100%); }
/* Burgundy — the design card, matching assets/images/ads/banner-design-*.svg
   so the card and the fallback creative read as the same product. */
.p411-bpromo { background: linear-gradient(150deg, #231018 0%, #5A2540 55%, #7C3357 100%); }

.p411-promo::after,
.p411-bpromo::after {
	content: "";
	position: absolute;
	right: -40px;
	top: -40px;
	width: 150px;
	height: 150px;
	border-radius: 50%;
}
.p411-promo::after  { background: rgba(140, 198, 63, .22); }
.p411-bpromo::after { background: rgba(240, 200, 220, .16); }

.p411-promo > *,
.p411-bpromo > * { position: relative; z-index: 1; }

/* ---- type ------------------------------------------------------------ */

.p411-promo__eyebrow,
.p411-bpromo__eyebrow {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: 7px;
}
.p411-promo__eyebrow  { color: #D6E7B2; }
.p411-bpromo__eyebrow { color: #F0C8DC; }

.p411-promo h3,
.p411-bpromo h3 {
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 7px;
	line-height: 1.3;
}
.p411-promo p,
.p411-bpromo p {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .88);
	margin: 0 0 13px;
}

/* ---- feature list ---------------------------------------------------- */

.p411-promo ul,
.p411-bpromo ul {
	margin: 0 0 15px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}
.p411-promo li,
.p411-bpromo li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .95);
	line-height: 1.45;
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
}
.p411-promo li::before,
.p411-bpromo li::before { content: none; }

.p411-promo li i,
.p411-bpromo li i {
	flex: none;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .14);
	color: #fff;
}
.p411-promo li b,
.p411-bpromo li b { display: block; font-weight: 600; color: #fff; }
.p411-promo li span,
.p411-bpromo li span { display: block; font-size: 12px; color: rgba(255, 255, 255, .72); }

/* ---- call to action -------------------------------------------------- */
/* Own class, own colours. See the file header. */

.p411-promo__cta,
.p411-bpromo__cta,
a.p411-promo__cta,
a.p411-bpromo__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background: #fff;
	transition: background .16s ease, color .16s ease;
}
.p411-promo__cta,  a.p411-promo__cta  { color: #23430F; }
.p411-bpromo__cta, a.p411-bpromo__cta { color: #4A1E35; }

.p411-promo__cta:hover,  a.p411-promo__cta:hover  { background: #F3F8E8; color: #23430F; text-decoration: none; }
.p411-bpromo__cta:hover, a.p411-bpromo__cta:hover { background: #FBEFF5; color: #4A1E35; text-decoration: none; }

.p411-promo__foot,
.p411-bpromo__foot,
a.p411-promo__foot,
a.p411-bpromo__foot {
	display: block;
	margin-top: 9px;
	text-align: center;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
}
.p411-promo__foot:hover,
.p411-bpromo__foot:hover { color: #fff; text-decoration: underline; }

/* ---- banner variant, used full width above a footer ------------------ */

.p411-promo--banner,
.p411-bpromo--banner { padding: 26px 24px; }

.p411-promo--banner .p411-promo__grid,
.p411-bpromo--banner .p411-bpromo__grid {
	display: grid;
	gap: 18px;
	align-items: center;
	grid-template-columns: 1fr;
}
@media (min-width: 860px) {
	.p411-promo--banner .p411-promo__grid,
	.p411-bpromo--banner .p411-bpromo__grid { grid-template-columns: 1.15fr 1fr auto; }
	.p411-promo--banner ul,
	.p411-bpromo--banner ul { grid-template-columns: 1fr; margin-bottom: 0; }
	.p411-promo--banner .p411-promo__cta,
	.p411-bpromo--banner .p411-bpromo__cta { width: auto; }
}