/* ==========================================================================
   DigifyWorks — Products
   Products landing (page-templates/template-products.php), product detail
   (single-dw_product.php) and the product enquiry note on Contact.
   Loaded only on those pages (inc/products.php). Built on the tokens in
   design-system.css; each product sets --dw-product-accent from the palette.
   ========================================================================== */

:root { --dw-product-accent: var(--dw-primary); }

/* --------------------------------------------------------------------------
   Hero (extends .dw-page-hero)
   ----------------------------------------------------------------------- */

.dw-product-hero { align-items: center; }
.dw-product-hero__glow {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(46rem 34rem at 84% 34%, color-mix(in srgb, var(--dw-product-accent) 26%, transparent), transparent 70%),
		radial-gradient(40rem 30rem at 4% 104%, rgba(0, 173, 198, .16), transparent 70%),
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 48px 48px,
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 48px 48px;
	-webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
	mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
.dw-product-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	gap: 3rem clamp(2rem, 1rem + 4vw, 5rem);
	align-items: center;
}
.dw-product-hero__eyebrow:has(.dw-product-hero__icon)::before { display: none; }
.dw-product-hero__icon {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	color: var(--dw-navy-900);
	background: var(--dw-product-accent);
	border-radius: 8px;
}
.dw-product-hero__title { font-size: clamp(2.375rem, 1.7rem + 2.6vw, 4rem); }
.dw-product-hero__title--long { font-size: clamp(2rem, 1.55rem + 1.9vw, 3.25rem); line-height: 1.08; }
.dw-product-hero__tagline {
	max-width: 36rem;
	margin-top: 1.25rem;
	font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem);
	font-weight: var(--dw-fw-semibold);
	line-height: 1.4;
	letter-spacing: -.005em;
	color: var(--dw-white);
}
.dw-product-hero__tagline + .dw-page-hero__lead { margin-top: 1rem; }
.dw-product-hero__visual .dw-media {
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--dw-radius-large);
	box-shadow: 0 40px 80px -32px rgba(0, 0, 0, .65), 0 0 0 8px rgba(255, 255, 255, .03);
}
@media (max-width: 1099px) {
	.dw-product-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.dw-product-hero__visual { max-width: 40rem; }
}

/* --------------------------------------------------------------------------
   Product grid + card
   ----------------------------------------------------------------------- */

.dw-product-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--dw-grid-gap);
}
@media (max-width: 1099px) {
	.dw-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
	.dw-product-grid { grid-template-columns: minmax(0, 1fr); }
}

.dw-product-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--dw-white);
	border: 1px solid var(--dw-color-border);
	border-radius: var(--dw-radius-medium);
	overflow: hidden;
	transition: box-shadow var(--dw-dur) var(--dw-ease), transform var(--dw-dur) var(--dw-ease-out), border-color var(--dw-dur);
}
/* Accent rule: a short product-coloured tab that runs the full width on hover. */
.dw-product-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	height: 4px;
	background: var(--dw-product-accent);
	transform: scaleX(.22);
	transform-origin: left;
	transition: transform .6s var(--dw-ease-out);
}
.dw-product-card:hover,
.dw-product-card:focus-within { border-color: transparent; box-shadow: var(--dw-shadow-lg); transform: translateY(-4px); }
.dw-product-card:hover::before,
.dw-product-card:focus-within::before { transform: scaleX(1); }
.dw-product-card:hover .dw-media__img,
.dw-product-card:focus-within .dw-media__img { transform: scale(1.05); }
.dw-product-card:has(.dw-stretched:focus-visible) { outline: 2px solid var(--dw-focus); outline-offset: 3px; }
.dw-product-card .dw-stretched:focus-visible { outline: none; }
.dw-product-card__media { position: relative; }
.dw-product-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.75rem 1.75rem 2rem; }
.dw-product-card__top { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.dw-product-card__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--dw-navy-900);
	background: color-mix(in srgb, var(--dw-product-accent) 24%, var(--dw-white));
	border-radius: var(--dw-radius-medium);
	transition: background-color var(--dw-dur);
}
.dw-product-card:hover .dw-product-card__icon { background: var(--dw-product-accent); }
.dw-product-card__category {
	min-width: 0;
	font-size: .75rem;
	font-weight: var(--dw-fw-bold);
	line-height: 1.3;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--dw-gray-600);
}
.dw-product-card__index { margin-left: auto; font-size: .8125rem; font-weight: var(--dw-fw-bold); letter-spacing: .08em; color: var(--dw-gray-500); }
.dw-product-card__title { margin-bottom: .75rem; }
.dw-product-card__text { font-size: .9375rem; color: var(--dw-gray-700); }
.dw-product-card__list {
	display: grid;
	gap: .5rem;
	margin-top: 1.375rem;
	padding-top: 1.375rem;
	font-size: .875rem;
	font-weight: var(--dw-fw-medium);
	color: var(--dw-navy-900);
	border-top: 1px solid var(--dw-color-border);
}
.dw-product-card__list li { display: flex; gap: .625rem; line-height: 1.45; }
.dw-product-card__list li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .5em; background: var(--dw-product-accent); }
.dw-product-card__foot { margin-top: auto; padding-top: 1.75rem; }

/* Align title, description, capability list and CTA across each grid row. */
@supports (grid-template-rows: subgrid) {
	.dw-product-grid { grid-auto-rows: auto; }
	.dw-product-card {
		display: grid;
		grid-row: span 6;
		grid-template-rows: subgrid;
		row-gap: 0;
	}
	.dw-product-card__body { display: contents; }
	.dw-product-card__body > * { margin-inline: 1.75rem; }
	.dw-product-card__top { margin-top: 1.75rem; }
	.dw-product-card__title { align-self: start; }
	.dw-product-card__foot { align-self: end; margin-bottom: 2rem; }
	.dw-product-tailored { grid-row: span 6; }
}
.dw-product-card:hover .dw-link > span,
.dw-product-card:focus-within .dw-link > span { background-size: 100% 1.5px; }
.dw-product-card:hover .dw-link__arrow,
.dw-product-card:focus-within .dw-link__arrow { transform: translateX(5px); }

/* Sixth cell when the product count leaves a gap in the grid. */
.dw-product-tailored {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 22rem;
	padding: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
	overflow: hidden;
	color: var(--dw-on-dark-muted);
	background: var(--dw-gradient-navy);
	border-radius: var(--dw-radius-medium);
	isolation: isolate;
}
.dw-product-tailored::after {
	content: "";
	position: absolute;
	top: -9rem;
	right: -9rem;
	z-index: -1;
	width: 22rem;
	height: 22rem;
	border: 1px solid rgba(253, 170, 72, .35);
	border-radius: 50%;
	box-shadow: 0 0 0 3rem rgba(253, 170, 72, .04), 0 0 0 6rem rgba(253, 170, 72, .03);
}
.dw-product-tailored__icon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: auto;
	color: var(--dw-navy-900);
	background: var(--dw-primary);
	border-radius: 50%;
}
.dw-product-tailored__title { margin-top: 2.5rem; color: var(--dw-white); }
.dw-product-tailored__text { margin-top: .75rem; }
.dw-product-tailored__actions { margin-top: 1.75rem; }

/* --------------------------------------------------------------------------
   Detail: overview, benefits, audience, FAQ
   ----------------------------------------------------------------------- */

.dw-product-page .dw-problem__text,
.dw-product-value {
	font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem);
	font-weight: var(--dw-fw-medium);
	line-height: 1.55;
	letter-spacing: -.005em;
}
.dw-product-value { color: var(--dw-white); }
.dw-product-page .dw-feature__icon {
	color: var(--dw-navy-900);
	background: color-mix(in srgb, var(--dw-product-accent) 22%, var(--dw-white));
}
.dw-product-page .dw-problem__col--outcome .dw-eyebrow { color: var(--dw-product-accent); }
.dw-product-page .dw-problem__col--outcome .dw-eyebrow::before { background: var(--dw-product-accent); }
.dw-product-note { max-width: 46rem; margin-top: 2.5rem; font-size: .8125rem; line-height: 1.6; color: var(--dw-gray-600); }

.dw-product-benefits__lead { max-width: 30rem; margin-top: 1.25rem; font-size: 1.0625rem; color: var(--dw-on-dark-muted); }
.dw-benefit-list li { align-items: flex-start; font-size: 1rem; font-weight: var(--dw-fw-regular); letter-spacing: 0; }
.dw-benefit-list .dw-outcome-list__icon { background: var(--dw-product-accent); }
.dw-benefit-list__body { display: grid; gap: .375rem; padding-top: .3rem; }
.dw-benefit-list__title {
	font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem);
	font-weight: var(--dw-fw-bold);
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--dw-white);
}
.dw-benefit-list__text { font-size: 1rem; line-height: 1.6; color: var(--dw-on-dark-muted); }

.dw-audience {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--dw-grid-gap);
}
.dw-audience__item {
	padding: 2rem 1.75rem;
	background: var(--dw-color-surface);
	border-top: 3px solid var(--dw-product-accent);
	border-radius: 0 0 var(--dw-radius-medium) var(--dw-radius-medium);
}
.dw-audience__icon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: 1.5rem;
	color: var(--dw-navy-900);
	background: var(--dw-white);
	border-radius: 50%;
	box-shadow: var(--dw-shadow-sm);
}
.dw-audience__title { margin-bottom: .5rem; }
.dw-audience__text { font-size: .9375rem; color: var(--dw-gray-700); }
@media (max-width: 1099px) {
	.dw-audience { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
	.dw-audience { grid-template-columns: minmax(0, 1fr); }
}

.dw-faq__lead { margin: 1.25rem 0 1.75rem; max-width: 26rem; color: var(--dw-gray-700); }
.dw-faq { border-top: 1px solid var(--dw-color-border-strong); }
.dw-faq__item { border-bottom: 1px solid var(--dw-color-border-strong); }
.dw-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.5rem 0;
	font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
	font-weight: var(--dw-fw-bold);
	line-height: 1.4;
	color: var(--dw-navy-900);
	list-style: none;
	cursor: pointer;
}
.dw-faq__question::-webkit-details-marker { display: none; }
.dw-faq__question:hover .dw-faq__toggle { border-color: var(--dw-navy-900); }
.dw-faq__toggle {
	position: relative;
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	border: 1.5px solid var(--dw-color-border-strong);
	border-radius: 50%;
	transition: background-color var(--dw-dur-fast), border-color var(--dw-dur-fast);
}
.dw-faq__toggle::before,
.dw-faq__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: .75rem;
	height: 1.5px;
	margin: -.75px 0 0 -.375rem;
	background: var(--dw-navy-900);
	transition: transform var(--dw-dur) var(--dw-ease-out), background-color var(--dw-dur-fast);
}
.dw-faq__toggle::after { transform: rotate(90deg); }
.dw-faq__item[open] .dw-faq__toggle { background: var(--dw-navy-900); border-color: var(--dw-navy-900); }
.dw-faq__item[open] .dw-faq__toggle::before,
.dw-faq__item[open] .dw-faq__toggle::after { background: var(--dw-white); }
.dw-faq__item[open] .dw-faq__toggle::after { transform: rotate(0); }
.dw-faq__answer { padding: 0 3.75rem 1.75rem 0; font-size: 1.0625rem; line-height: 1.7; color: var(--dw-gray-700); }
@media (max-width: 699px) {
	.dw-faq__answer { padding-right: 0; }
}

/* --------------------------------------------------------------------------
   Contact page: product enquiry context
   ----------------------------------------------------------------------- */

.dw-enquiry-note {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin: -1rem 0 2rem;
	padding: 1rem 1.25rem;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--dw-navy-900);
	background: var(--dw-primary-soft);
	border: 1px solid rgba(253, 170, 72, .5);
	border-radius: var(--dw-radius-medium);
}
.dw-enquiry-note__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--dw-navy-900);
	background: var(--dw-primary);
	border-radius: 50%;
}
.dw-enquiry-note strong { font-weight: var(--dw-fw-bold); }
.dw-enquiry-note a { font-weight: var(--dw-fw-semibold); text-decoration: underline; text-underline-offset: 3px; }
.dw-enquiry-note a:hover { text-decoration-thickness: 2px; }