/**
 * Insights page -- page-scoped stylesheet.
 *
 * Loaded by page-templates/template-insights.php AND by archive.php (via a
 * <link> each template prints itself), matching the same per-page-CSS
 * convention as about.css / contact.css / s4hana-*.css. The post-card grid
 * itself is NOT styled here -- it reuses .service-resources__card wholesale
 * from main.css (the same component template-parts/home/insights.php and
 * template-parts/services/resources.php already use), so only the hero
 * (or, on archive.php, the simpler .archive-header title band), the grid's
 * own wrapper/pagination, and the CTA section are page-specific.
 *
 * @package sap-migration-theme
 */

/* Manual <br>s (via sapmig_text_with_breaks()) only apply above tablet,
   same rule as every other page-scoped stylesheet in this theme.
   Class corrected to what WordPress actually renders for this template
   (confirmed directly against the live <body> class): body_class()
   turns page-templates/template-insights.php into
   "page-template-template-insights" -- "template" appears twice, once
   from WordPress's own "page-template-" prefix and once because the
   file itself is named template-insights.php. The old
   single-"template" selector below never matched anything, so manual
   breaks were silently never hidden on tablet/mobile here. */
.page-template-template-insights .home-break {
	display: inline;
}

@media (max-width: 1024px) {
	.page-template-template-insights .home-break {
		display: none;
	}
}

/* ==========================================================================
   Hero -- same pattern as the Contact page's hero (contact.css): pulled up
   behind the floating sticky header via a negative margin-top, an optional
   uploaded background image (.insights-hero--has-bg) at 0.85 opacity, or a
   soft radial-gradient backdrop when none is set.
   ========================================================================== */

.insights-hero {
	position: relative;
	overflow: hidden;
	padding: 0;
	text-align: center;
	background:
		radial-gradient(circle at 50% 0%, rgba(1, 174, 240, 0.14) 0%, rgba(1, 174, 240, 0) 60%),
		radial-gradient(circle at 50% 20%, #eef4fb 0%, #ffffff 70%);
	margin-top: -96px;
}

.insights-hero.insights-hero--has-bg {
	background: #ffffff;
}

@media (max-width: 640px) {
	.insights-hero {
		margin-top: -88px;
	}
}

.insights-hero__bg-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0.85;
}

.insights-hero__inner {
	position: relative;
	/* Full sitewide content width (var(--header-max-width) = 1280px),
	   centered via margin-inline: auto -- not a narrower one-off cap like
	   the previous 860px, matching every other section's own __inner. */
	max-width: var(--header-max-width);
	margin-inline: auto;
	text-align: center;
	padding: 220px var(--header-padding-x) 130px;
}

@media (max-width: 1024px) {
	.insights-hero__inner {
		padding: 170px var(--header-padding-x-tablet) 84px;
	}
}

@media (max-width: 640px) {
	.insights-hero__inner {
		padding: 140px var(--header-padding-x-mobile) 60px;
	}
}

.insights-hero__heading {
	margin: 0 0 16px;
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 52px;
	line-height: 1.2;
	letter-spacing: -1px;
	color: var(--color-heading);
}

.insights-hero__heading strong {
	font-weight: 700;
	color: var(--gradient-btn-start);
}

.insights-hero__subheading {
	margin: 0;
	font-size: 18px;
	line-height: 28px;
	color: var(--color-body-text);
}

@media (max-width: 1024px) {
	.insights-hero__heading {
		font-size: 40px;
		line-height: 1.25;
		letter-spacing: -0.5px;
	}
}

@media (max-width: 640px) {
	.insights-hero__heading {
		font-size: 40px;
		line-height: 1.25;
		letter-spacing: 0;
	}

	.insights-hero__subheading {
		font-size: 15px;
	}
}

/* ==========================================================================
   Archive header (archive.php only) -- a plain breadcrumb + title band
   above the same .insights-grid used below, for category/tag/author/date
   archives. Much simpler than .insights-hero on purpose: these are
   secondary listing pages (e.g. clicking a post's category tag), not a
   destination page worth a full marketing hero.
   ========================================================================== */

.archive-header {
	background-color: #fbfbfd;
}

.archive-header__inner {
	max-width: var(--header-max-width);
	margin-inline: auto;
	padding: 96px var(--header-padding-x) 40px;
}

@media (max-width: 1024px) {
	.archive-header__inner {
		padding: 64px var(--header-padding-x-tablet) 32px;
	}
}

@media (max-width: 640px) {
	.archive-header__inner {
		padding: 48px var(--header-padding-x-mobile) 24px;
	}
}

.archive-header__breadcrumbs {
	margin-bottom: 16px;
}

.archive-header__breadcrumbs .breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.archive-header__breadcrumbs .breadcrumbs li {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--color-eyebrow);
}

.archive-header__breadcrumbs .breadcrumbs li:not(:last-child)::after {
	content: '/';
	color: var(--color-btn-outline-border);
}

.archive-header__breadcrumbs .breadcrumbs a {
	color: var(--color-eyebrow);
	text-decoration: none;
}

.archive-header__breadcrumbs .breadcrumbs a:hover,
.archive-header__breadcrumbs .breadcrumbs a:focus-visible {
	color: var(--gradient-btn-start);
	text-decoration: underline;
}

.archive-header__breadcrumbs .breadcrumbs [aria-current='page'] {
	color: var(--color-heading);
	font-weight: 600;
}

.archive-header__title {
	margin: 0;
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	letter-spacing: -0.5px;
	color: var(--color-heading);
}

@media (max-width: 1024px) {
	.archive-header__title {
		font-size: 30px;
		line-height: 1.25;
	}
}

@media (max-width: 640px) {
	.archive-header__title {
		font-size: 26px;
	}
}

.archive-header__description {
	margin: 12px 0 0;
	max-width: 720px;
	font-size: 16px;
	line-height: 26px;
	color: var(--color-body-text);
}

/* ==========================================================================
   Grid + pagination
   (the cards themselves are .service-resources__card, styled in main.css)
   ========================================================================== */

.insights-grid {
	background-color: #fff;
}

.insights-grid__inner {
	max-width: var(--header-max-width);
	margin-inline: auto;
	padding: 64px var(--header-padding-x) 96px;
}

@media (max-width: 1024px) {
	.insights-grid__inner {
		padding: 48px var(--header-padding-x-tablet) 64px;
	}
}

@media (max-width: 640px) {
	.insights-grid__inner {
		padding: 32px var(--header-padding-x-mobile) 48px;
	}
}

.insights-grid__empty {
	margin: 0;
	padding: 48px 0;
	text-align: center;
	font-size: 16px;
	color: var(--color-body-text);
}

.insights-grid__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 56px;
}

.insights-grid__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 4px;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 700;
	color: var(--color-heading);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.insights-grid__pagination a.page-numbers:hover {
	background-color: #f2f8ff;
}

.insights-grid__pagination .page-numbers.current {
	background: linear-gradient(94.23deg, #004195 0%, #01aef0 100%);
	color: #fff;
}

.insights-grid__pagination .page-numbers.dots {
	color: var(--color-eyebrow);
}

.insights-grid__pagination .page-numbers.next,
.insights-grid__pagination .page-numbers.prev {
	border: 1px solid var(--color-btn-outline-border);
	color: var(--gradient-btn-start);
}

.insights-grid__pagination .page-numbers.next:hover,
.insights-grid__pagination .page-numbers.prev:hover {
	border-color: var(--gradient-btn-start);
	background-color: #f2f8ff;
}

.insights-grid__pagination-icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
}

.insights-grid__pagination-icon svg {
	width: 100%;
	height: 100%;
}

.insights-grid__pagination-icon--prev {
	transform: scaleX(-1);
}

/* ==========================================================================
   CTA -- "Prefer a Faster Back-and-Forth?"
   ========================================================================== */

.insights-cta {
	position: relative;
	background-color: #0b1733;
	background-image: radial-gradient(circle at 85% 15%, rgba(1, 174, 240, 0.18) 0%, rgba(1, 174, 240, 0) 60%);
}

/* Uploaded Background Image replaces the above via an inline style (see
   template-parts/insights/cta.php) since the dark scrim has to layer on
   top of that specific photo; this just adds the sizing the inline style
   doesn't set -- same pattern as .home-banner--has-image in home.css. */

.insights-cta--has-image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.insights-cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 64px;
	max-width: var(--header-max-width);
	margin-inline: auto;
	padding: 96px var(--header-padding-x);
}

@media (max-width: 1024px) {
	.insights-cta__inner {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 64px var(--header-padding-x-tablet);
	}
}

@media (max-width: 640px) {
	.insights-cta__inner {
		padding: 48px var(--header-padding-x-mobile);
	}
}

.insights-cta__info {
	color: #fff;
}

.insights-cta__heading {
	margin: 0 0 32px;
	font-family: 'Geist', sans-serif;
	font-weight: 800;
	font-size: 32px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: #fff;
}

.insights-cta__eyebrow {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.insights-cta__talk-label {
	margin: 0 0 28px;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
}

.insights-cta__label {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.insights-cta__value {
	margin: 0 0 20px;
	font-size: 16px;
}

.insights-cta__value a {
	color: #fff;
	text-decoration: none;
}

.insights-cta__value a:hover,
.insights-cta__value a:focus-visible {
	text-decoration: underline;
}

/* Field styling overrides: the shared .service-contact__field component
   (main.css) is styled for a white card -- this section keeps the dark
   background flowing behind the fields themselves (translucent fill,
   light border, white label/placeholder text) rather than wrapping the
   form in its own white card, matching the reference design. */

.insights-cta__form-card {
	background: transparent;
}

.insights-cta__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 640px) {
	.insights-cta__row {
		grid-template-columns: 1fr;
	}
}

.insights-cta .service-contact__field label {
	color: rgba(255, 255, 255, 0.85);
}

.insights-cta .service-contact__field input,
.insights-cta .service-contact__field textarea,
.insights-cta .service-contact__field select {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.insights-cta .service-contact__field select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}

.insights-cta .service-contact__field select option {
	color: #0f172a;
}

.insights-cta .service-contact__field input::placeholder,
.insights-cta .service-contact__field textarea::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

.insights-cta .service-contact__field input:focus,
.insights-cta .service-contact__field textarea:focus,
.insights-cta .service-contact__field select:focus {
	outline: none;
	border-color: #01aef0;
	box-shadow: 0 0 0 3px rgba(1, 174, 240, 0.2);
}

.insights-cta .service-contact__field-error {
	color: #fca5a5;
}

.insights-cta .service-contact__submit {
	width: auto;
	padding: 14px 32px;
	background: #fff;
	color: var(--gradient-btn-start);
}

.insights-cta .service-contact__submit:hover,
.insights-cta .service-contact__submit:focus-visible {
	opacity: 0.9;
}

.insights-cta .service-contact__submit-spinner {
	border-color: rgba(11, 77, 162, 0.3);
	border-top-color: var(--gradient-btn-start);
}

/* Space between the search bar (template-parts/insights/search.php) and the cards. */
.insights-search {
	margin-bottom: 60px;
}