/* =========================================================================
   AKC page (page-akc.php) — AKC Reunite℠ & GoodDog!℠ Helpline.
   The hero base comes from the theme's own `.page-hero` (css/pages.css); this
   stylesheet adds the AKC-specific hero bits, lightly polishes the editor
   content bands, and styles the closing CTA. Everything stays on the site
   color scheme via --ui-* / --bs-* variables (orange on this install).
   Sibling of css/about.css.
   ====================================================================== */

/* ============================== HERO add-ons ============================== */
/* (.page-hero supplies the cream bg, orange accent bar, kicker, title, lede) */
.page-hero.akc-hero { margin-bottom: 0; }

.akc-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}
.akc-hero__grid--solo { grid-template-columns: 1fr; }
.akc-hero__grid--solo .akc-hero__content { max-width: 780px; margin: 0 auto; text-align: center; }
.akc-hero__grid--solo .akc-hero__cta,
.akc-hero__grid--solo .akc-hero__trust { justify-content: center; }
.akc-hero__grid--solo .page-hero__lede { margin-left: auto; margin-right: auto; }

.akc-hero__content { max-width: 640px; }

.akc-hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.akc-hero__cta .btn { display: inline-flex; align-items: center; gap: .5rem; }

.akc-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.4rem;
	margin: 1.4rem 0 0;
	padding: 0;
	list-style: none;
}
.akc-hero__trust li {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .92rem;
	font-weight: 600;
	color: var(--ui-ink-soft, #475569);
}
.akc-hero__trust .bi { color: var(--ui-primary, #cf5b1f); font-size: 1rem; }

.akc-hero__visual { display: flex; justify-content: center; }
.akc-hero__visual img {
	width: 100%;
	max-width: 460px;
	border-radius: 20px;
	box-shadow: var(--ui-shadow-lift, 0 10px 25px -8px rgba(15, 23, 42, .15));
	object-fit: cover;
}

/* ================= AKC PROGRAM BANDS (editor content polish) ================= */
/* The body is the page's own editor content: a stack of full-width image+text
   groups (.wp-block-group.py-5, alternating .text-bg-gray). We only refine how
   those authored blocks render — vertical rhythm, the zebra surface, on-brand
   headings, readable copy, and consistent imagery. */
.akc-body { scroll-margin-top: 80px; }

/* Compact, consistent band rhythm (overrides the editor's blanket py-5). */
.akc-body .wp-block-group.py-5 {
	padding-top: clamp(1.75rem, 4vw, 3rem) !important;
	padding-bottom: clamp(1.75rem, 4vw, 3rem) !important;
}

/* Zebra surface — keep it on the site neutral so contrast stays right. */
.akc-body .text-bg-gray {
	background: var(--ui-surface-sunken, #f8fafc) !important;
	color: var(--ui-ink, #0f172a) !important;
}

/* Vertically center the copy against its image. */
.akc-body .wp-bootstrap-blocks-row { align-items: center; }

/* Balanced two-column bands on desktop. The editor markup pairs a col-lg-auto
   image with a col-lg text block, which otherwise lets a wide image dominate
   and crushes the copy into a narrow rail — even them out to a clean 50/50. */
@media (min-width: 992px) {
	.akc-body .wp-bootstrap-blocks-row > [class*="col-lg"] { flex: 1 1 0; max-width: 50%; }
}

/* Section headings (authored as orange ~26px) — keep them on-brand + responsive. */
.akc-body .has-orange-color { color: var(--ui-primary, #cf5b1f) !important; }
.akc-body p[style*="26px"] {
	font-size: clamp(1.3rem, 2.4vw, 1.6rem) !important;
	font-weight: 800;
	line-height: 1.25;
	margin-bottom: .55rem;
}

/* Body copy readability. */
.akc-body p { line-height: 1.6; }

/* Images — fill their column with consistent rounding + a soft lift. The
   rounding/shadow go on the figure (it has overflow:hidden, which would
   otherwise clip a shadow set on the img itself). */
.akc-body figure.wp-block-image {
	margin: 0;
	border-radius: var(--ui-radius, 16px);
	overflow: hidden;
	box-shadow: var(--ui-shadow, 0 10px 26px -12px rgba(15, 23, 42, .26));
}
.akc-body figure.wp-block-image img { display: block; width: 100%; height: auto; }

/* ============================== CLOSING CTA ============================== */
.akc-cta { padding: clamp(1.6rem, 3.4vw, 2.6rem) 0; background: var(--ui-surface, #fff); }
.akc-cta__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2.5rem;
	align-items: center;
	justify-content: space-between;
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	border-radius: 20px;
	background: linear-gradient(180deg, #ffffff 0%, #faf3ef 100%);
	border: 1px solid var(--ui-border, #e2e8f0);
	box-shadow: var(--ui-shadow-lift, 0 10px 25px -8px rgba(15, 23, 42, .15));
}
.akc-cta__title { margin: 0 0 .4rem; font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 800; color: var(--ui-ink, #0f172a); }
.akc-cta__text { margin: 0; max-width: 56ch; line-height: 1.55; color: var(--ui-ink-soft, #475569); }
.akc-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.akc-cta__actions .btn { display: inline-flex; align-items: center; gap: .5rem; }
.akc-cta__phone {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-weight: 700;
	color: var(--ui-ink, #0f172a);
	text-decoration: none;
}
.akc-cta__phone .bi { color: var(--ui-primary, #cf5b1f); }
.akc-cta__phone:hover { color: var(--ui-primary, #cf5b1f); }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 991px) {
	.akc-hero__grid { grid-template-columns: 1fr; }
	.akc-hero__content { max-width: none; }
	.akc-hero__visual { order: -1; }
	.akc-hero__visual img { max-width: 420px; }
	.akc-cta__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 575px) {
	.akc-hero__cta { gap: .6rem; }
	.akc-hero__cta .btn { width: 100%; justify-content: center; }
	.akc-cta__actions { width: 100%; }
	.akc-cta__actions .btn { width: 100%; justify-content: center; }
}