/*
 * The DEV Point — redesign component library.
 * New patterns added for the premium visual redesign: image-led visual
 * frames/placeholders, alternating story sections, the capability strip,
 * the asymmetric "difference" section, editorial portfolio cards, the
 * gallery grid, the compact service-navigation grid, and split heroes.
 * Kept in its own file so the new redesign surface area stays easy to
 * find and review separately from the original component library.
 */

/* ---------- Visual frame / image-or-placeholder ---------- */

.tdp-visual-frame {
	position: relative;
	border-radius: var(--tdp-radius-lg);
	overflow: hidden;
	background: var(--tdp-light-grey);
}

.tdp-visual-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tdp-ratio-hero { aspect-ratio: 16 / 11; }
.tdp-ratio-4-3 { aspect-ratio: 4 / 3; }
.tdp-ratio-3-2 { aspect-ratio: 3 / 2; }
.tdp-ratio-8-5 { aspect-ratio: 8 / 5; }
.tdp-ratio-4-5 { aspect-ratio: 4 / 5; }
.tdp-ratio-16-9 { aspect-ratio: 16 / 9; }
.tdp-ratio-1-1 { aspect-ratio: 1 / 1; }

/* Clean branded CSS mockup shown in place of a missing image — never a
   broken <img>, never a hotlinked external photo. See IMAGE-REQUIREMENTS.md
   for what each slot should eventually contain. */
.tdp-visual-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 2rem;
	text-align: center;
	background:
		radial-gradient(circle at 20% 20%, rgba(0, 143, 232, 0.14), transparent 55%),
		radial-gradient(circle at 80% 75%, rgba(0, 161, 241, 0.12), transparent 50%),
		var(--tdp-pale-blue);
}

.tdp-visual-placeholder .tdp-visual-placeholder-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--tdp-radius);
	background: var(--tdp-white);
	color: var(--tdp-primary);
	box-shadow: var(--tdp-shadow-sm);
}

.tdp-visual-placeholder .tdp-visual-placeholder-icon .dashicons {
	font-size: 1.75rem;
	width: 1.75rem;
	height: 1.75rem;
}

.tdp-visual-placeholder-label {
	font-size: 0.8rem;
	font-weight: 600;
	/* Scoped darker than --tdp-secondary specifically for this element —
	   it sits on .tdp-visual-placeholder's radial-gradient background, not
	   a flat one. --tdp-secondary already meets 4.5:1+ everywhere else it's
	   used (flat backgrounds) and is intentionally left untouched here;
	   this value clears >=5.0:1 against the darkest point the gradient
	   reaches (verified by rendering + pixel sampling, not an average
	   gradient colour). */
	color: #005fb0;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Decorative mock "interface" placeholder used specifically for
   technology/product visuals (an abstract dashboard-style graphic built
   entirely from CSS shapes, not a screenshot). */
.tdp-visual-placeholder-interface {
	width: 100%;
	max-width: 20rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.tdp-visual-placeholder-interface span {
	display: block;
	height: 0.6rem;
	border-radius: var(--tdp-radius-full);
	background: rgba(0, 115, 213, 0.18);
}

.tdp-visual-placeholder-interface span:nth-child(1) { width: 70%; }
.tdp-visual-placeholder-interface span:nth-child(2) { width: 100%; }
.tdp-visual-placeholder-interface span:nth-child(3) { width: 45%; }

/* ---------- Alternating story section (image + copy) ---------- */

.tdp-story {
	display: grid;
	gap: 2.5rem;
	align-items: center;
	grid-template-columns: 1fr;
}

.tdp-story-content .tdp-eyebrow {
	margin-bottom: 1rem;
}

.tdp-story-points {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	margin-top: 1.5rem;
}

.tdp-story-point {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-size: 0.95rem;
}

.tdp-story-point .dashicons {
	color: var(--tdp-primary);
	flex-shrink: 0;
	margin-top: 0.2rem;
}

.tdp-section-navy .tdp-story-point .dashicons {
	color: var(--tdp-highlight);
}

@media (min-width: 1024px) {
	.tdp-story {
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
	}

	.tdp-story-reverse .tdp-story-visual {
		order: 2;
	}

	.tdp-story-reverse .tdp-story-content {
		order: 1;
	}
}

/* ---------- Capability / trust strip ---------- */

.tdp-capability-strip {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--tdp-border);
	border: 1px solid var(--tdp-border);
	border-radius: var(--tdp-radius);
	overflow: hidden;
}

.tdp-capability-item {
	background: var(--tdp-white);
	padding: 1.5rem 1.25rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
}

.tdp-capability-item .dashicons {
	color: var(--tdp-primary);
	font-size: 1.5rem;
	width: 1.5rem;
	height: 1.5rem;
}

.tdp-capability-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--tdp-text);
}

@media (min-width: 640px) {
	.tdp-capability-strip { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
	.tdp-capability-strip { grid-template-columns: repeat(6, 1fr); }
}

/* ---------- Asymmetric "difference" section ---------- */

.tdp-difference {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
	align-items: center;
}

.tdp-difference-visual {
	position: relative;
}

.tdp-difference-list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 2rem;
}

.tdp-difference-item {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.tdp-difference-number {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--tdp-radius-full);
	background: var(--tdp-pale-blue);
	color: var(--tdp-secondary);
	font-weight: 700;
	font-size: 0.95rem;
}

.tdp-difference-item h3 {
	font-size: 1.15rem;
	margin-bottom: 0.35rem;
}

.tdp-difference-item p {
	font-size: 0.9rem;
	color: var(--tdp-text);
	margin: 0;
}

@media (min-width: 1024px) {
	.tdp-difference {
		grid-template-columns: 0.85fr 1.15fr;
		gap: 4rem;
	}
}

/* ---------- Compact service navigation grid ---------- */

.tdp-service-nav-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, 1fr);
}

.tdp-service-nav-item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 1.1rem 1.25rem;
	background: var(--tdp-white);
	border: 1px solid var(--tdp-border-light);
	border-radius: var(--tdp-radius);
	box-shadow: var(--tdp-shadow-sm);
	transition: box-shadow var(--tdp-transition), transform var(--tdp-transition), border-color var(--tdp-transition);
}

.tdp-service-nav-item:hover {
	box-shadow: var(--tdp-shadow-md);
	transform: translateY(-2px);
	border-color: var(--tdp-primary);
}

.tdp-service-nav-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--tdp-radius-sm);
	background: var(--tdp-pale-blue);
	color: var(--tdp-primary);
}

.tdp-service-nav-text {
	flex: 1 1 auto;
	min-width: 0;
}

.tdp-service-nav-text strong {
	display: block;
	font-size: 0.95rem;
	color: var(--tdp-heading);
}

.tdp-service-nav-item .dashicons-arrow-right-alt {
	color: var(--tdp-muted);
	flex-shrink: 0;
}

@media (min-width: 768px) {
	.tdp-service-nav-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Editorial portfolio card ---------- */

.tdp-editorial-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--tdp-white);
	border: 1px solid var(--tdp-border-light);
	border-radius: var(--tdp-radius-lg);
	overflow: hidden;
	box-shadow: var(--tdp-shadow-sm);
	transition: box-shadow var(--tdp-transition), transform var(--tdp-transition);
}

.tdp-editorial-card:hover {
	box-shadow: var(--tdp-shadow-lg);
	transform: translateY(-4px);
}

.tdp-editorial-card-media {
	position: relative;
}

.tdp-editorial-card-body {
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.tdp-editorial-card-body .tdp-portfolio-category {
	margin-bottom: 0.5rem;
}

.tdp-editorial-card-body h3 {
	font-size: 1.375rem;
}

.tdp-editorial-card-body p {
	color: var(--tdp-text);
	font-size: 0.95rem;
	flex: 1 1 auto;
}

/* ---------- Gallery grid (single portfolio) ---------- */

.tdp-gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.tdp-gallery-grid a {
	display: block;
	border-radius: var(--tdp-radius);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.tdp-gallery-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--tdp-transition-slow);
}

.tdp-gallery-grid a:hover img {
	transform: scale(1.04);
}

@media (min-width: 768px) {
	.tdp-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Split-layout hero (Contact) ---------- */

.tdp-split-hero {
	display: grid;
	gap: 2.5rem;
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
	.tdp-split-hero {
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
	}
}

/* ---------- "What happens next" panel ---------- */

.tdp-next-steps {
	background: var(--tdp-light-grey);
	border-radius: var(--tdp-radius);
	padding: 1.75rem;
}

.tdp-next-steps ol {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	counter-reset: tdp-step;
}

.tdp-next-steps li {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
	counter-increment: tdp-step;
}

.tdp-next-steps li::before {
	content: counter(tdp-step);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: var(--tdp-radius-full);
	background: var(--tdp-primary);
	color: var(--tdp-white);
	font-size: 0.8rem;
	font-weight: 700;
}

.tdp-next-steps li span {
	font-size: 0.9rem;
	color: var(--tdp-text);
}

/* ---------- Editorial blog hero + featured post ---------- */

.tdp-blog-hero {
	display: grid;
	gap: 2rem;
	align-items: center;
	grid-template-columns: 1fr;
}

.tdp-featured-post {
	display: grid;
	gap: 1.75rem;
	background: var(--tdp-white);
	border: 1px solid var(--tdp-border-light);
	border-radius: var(--tdp-radius-lg);
	overflow: hidden;
	box-shadow: var(--tdp-shadow-md);
	grid-template-columns: 1fr;
}

.tdp-featured-post-body {
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.tdp-featured-post-body h2 {
	font-size: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
}

@media (min-width: 1024px) {
	.tdp-blog-hero {
		grid-template-columns: 1.1fr 0.9fr;
	}

	.tdp-featured-post {
		grid-template-columns: 1.1fr 1fr;
	}
}

/* ---------- Category pill navigation (blog) ---------- */

.tdp-category-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.tdp-category-nav a {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1.1rem;
	border-radius: var(--tdp-radius-full);
	background: var(--tdp-light-grey);
	color: var(--tdp-text);
	font-size: 0.85rem;
	font-weight: 500;
}

.tdp-category-nav a:hover,
.tdp-category-nav a.is-active {
	background: var(--tdp-primary);
	color: var(--tdp-white);
}

/* ---------- Subtle trust statement (testimonials empty state) ---------- */

.tdp-trust-statement {
	max-width: 40rem;
	margin-inline: auto;
	text-align: center;
	color: var(--tdp-muted);
	font-size: 0.95rem;
	font-style: italic;
}

/* Axe-flagged: the link inside this muted italic paragraph had insufficient
   contrast against the SURROUNDING text (not the page background) and no
   non-colour distinguishing feature. Scoped to the Contact page only —
   .tdp-trust-statement is shared with the portfolio empty state, whose
   link (if any) is left exactly as it was. Colour and focus outline are
   both inherited unchanged from the global `a` / `a:focus-visible` rules
   in base.css; only the underline and hover state are added here. */
.page-contact-us .tdp-trust-statement a {
	text-decoration: underline;
	text-decoration-thickness: 0.1em;
	text-underline-offset: 0.18em;
}

.page-contact-us .tdp-trust-statement a:hover {
	color: var(--tdp-secondary);
	text-decoration-thickness: 0.15em;
}

/* ---------- Professional empty state (portfolio / featured work) ---------- */

.tdp-empty-state {
	max-width: 32rem;
	margin-inline: auto;
	text-align: center;
	padding: 3rem 2rem;
	background: var(--tdp-light-grey);
	border-radius: var(--tdp-radius-lg);
}

.tdp-empty-state .dashicons {
	color: var(--tdp-primary);
	font-size: 2rem;
	width: 2rem;
	height: 2rem;
	margin-bottom: 1rem;
}

.tdp-empty-state h3 {
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
}

.tdp-empty-state p {
	color: var(--tdp-muted);
	margin: 0;
}

/* ---------- NetSuite spotlight ---------- */

.tdp-netsuite-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.85rem;
	margin-top: 1rem;
}

.tdp-netsuite-capability {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	background: var(--tdp-white);
	border: 1px solid var(--tdp-border-light);
	border-radius: var(--tdp-radius-sm);
	padding: 0.85rem 1rem;
	box-shadow: var(--tdp-shadow-sm);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--tdp-heading);
}

.tdp-netsuite-capability .dashicons {
	color: var(--tdp-primary);
	flex-shrink: 0;
}

.tdp-netsuite-outcomes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin-top: 1.75rem;
}

.tdp-netsuite-outcome {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--tdp-white);
	border-radius: var(--tdp-radius-full);
	padding: 0.5rem 1rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--tdp-secondary);
}

.tdp-netsuite-outcome .dashicons {
	color: var(--tdp-primary);
}

.tdp-netsuite-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2rem;
}

@media (min-width: 640px) {
	.tdp-netsuite-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
	.tdp-netsuite-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Detailed service cards (homepage service overview) ---------- */

.tdp-service-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--tdp-white);
	border: 1px solid var(--tdp-border-light);
	border-radius: var(--tdp-radius-lg);
	padding: 1.75rem;
	box-shadow: var(--tdp-shadow-sm);
	color: inherit;
	text-decoration: none;
	transition: box-shadow var(--tdp-transition), transform var(--tdp-transition), border-color var(--tdp-transition);
}

.tdp-service-card:hover,
.tdp-service-card:focus-visible {
	box-shadow: var(--tdp-shadow-lg);
	transform: translateY(-4px);
	border-color: var(--tdp-primary);
	color: inherit;
}

.tdp-service-card h3 {
	font-size: 1.2rem;
	margin: 1.1rem 0 0.5rem;
}

.tdp-service-card-desc {
	color: var(--tdp-text);
	font-size: 0.95rem;
	margin-bottom: 1rem;
}

.tdp-service-card-deliverables {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	flex: 1 1 auto;
}

.tdp-service-card-deliverables li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: var(--tdp-text);
}

.tdp-service-card-deliverables .dashicons {
	color: var(--tdp-primary);
	flex-shrink: 0;
	margin-top: 0.15rem;
	font-size: 1rem;
	width: 1rem;
	height: 1rem;
}

.tdp-service-card-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--tdp-secondary);
	margin-top: auto;
}

/* ---------- Industries grid ---------- */

.tdp-industries-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-top: 1rem;
}

.tdp-industry-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	text-align: center;
	background: var(--tdp-white);
	border: 1px solid var(--tdp-border-light);
	border-radius: var(--tdp-radius);
	padding: 1.5rem 1rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--tdp-heading);
}

.tdp-industry-item .dashicons {
	color: var(--tdp-primary);
	font-size: 1.5rem;
	width: 1.5rem;
	height: 1.5rem;
}

@media (min-width: 640px) {
	.tdp-industries-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
	.tdp-industries-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Single Service — hero fallback panel & chips (Stage 2, scoped) ---------- */
/* Used only when a service has no featured image — the one designed
   fallback visual for the hero (never a second, duplicate placeholder
   elsewhere on the page). Matches the 3:2 aspect ratio of the real-image
   slot it replaces, so hero height doesn't jump between services. */

.single-tdp_service .tdp-service-fallback-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 1rem;
	padding: 2.5rem 2rem;
	background: linear-gradient(135deg, var(--tdp-pale-blue), var(--tdp-white));
	border: 1px solid var(--tdp-border-light);
	border-radius: var(--tdp-radius-lg);
	aspect-ratio: 3 / 2;
}

.single-tdp_service .tdp-service-fallback-statement {
	color: var(--tdp-text);
	font-weight: 500;
	max-width: 22rem;
	margin: 0;
}

.single-tdp_service .tdp-service-fallback-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.single-tdp_service .tdp-chip,
.page-contact-us .tdp-chip {
	display: inline-flex;
	align-items: center;
	background: var(--tdp-white);
	border: 1px solid var(--tdp-border);
	border-radius: var(--tdp-radius-full);
	padding: 0.35rem 0.9rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--tdp-heading);
}

.single-tdp_service .tdp-chip-group {
	margin-top: 1.75rem;
}

.single-tdp_service .tdp-chip-group:first-of-type {
	margin-top: 1rem;
}

.single-tdp_service .tdp-chip-group-label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--tdp-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 0.75rem;
}

.single-tdp_service .tdp-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}