/**
 * /product/ page — glue CSS for page-product.php.
 *
 * Struktur:
 *   .fx-main--product
 *     ├── .fx-breadcrumb-wrap                 (reusable)
 *     ├── section.fx-hero.fx-hero--product    (reusable)
 *     ├── section.fx-logo-carousel-wrap       (reusable)
 *     ├── section.fx-hiw                      (reusable)
 *     ├── section.fx-opshub                   (reusable — Operations Hub)
 *     ├── section.fx-gates                    (reusable — Gates video)
 *     ├── section.fx-ai-detect                (reusable — detections)
 *     ├── section.fx-feature-trio             (reusable — damage definitions)
 *     ├── section.fx-ai-detect--damages       (reusable — damages)
 *     ├── section.fx-image-duo                (reusable — real examples)
 *     ├── section.fx-integrations             (reusable)
 *     ├── section.fx-big-numbers-wrap         (reusable)
 *     ├── section.fx-faq-wrap                 (bespoke — heading + [acf_faq])
 *     ├── section.fx-vi-posts--further        (bespoke — heading + [blogpost_carousel])
 *     └── section.fx-cta                      (reusable)
 *
 * Denne fil dækker product-specifikke integration-styles: wrapper,
 * breadcrumb-alignment, hero-billede (tablet/PC som frontpage),
 * FAQ-header, further-reading-header og scroll-margin-top på anker-mål.
 *
 * Alle sektion-specifikke styles lever i deres egne CSS-filer
 * (operations-hub.css, feature-trio.css, image-duo.css, hero.css,
 *  ai-detections.css, frontpage.css til SOR/integrations/big-numbers).
 */

/* Wrapper ---------------------------------------------------------- */
.fx-main--product {
	background: var(--fx-bg, #fff);
	color:      var(--fx-text, #2d2f31);
}

/* Breadcrumb — samme mønster som compare/about/VI-archive. */
/* Hero-variant ----------------------------------------------------- */
/* Samme promo-mål som forsiden (css/frontpage.css): tablet+ fast højde 420px,
 * max-width bleed, margin-bottom -64px. Forsiden bruger margin-left; her
 * sidder mockup i højre kolonne → margin-right (negativ) + object-position
 * right bottom. */
.fx-hero--product .fx-hero__image-wrap {
	aspect-ratio:  auto;
	border-radius: 0;
	overflow:      visible;
	max-width:     none;
	margin-left:   0;
	background:    transparent;
}

.fx-hero--product .fx-hero__image {
	width:           auto;
	height:          auto;
	max-width:       100%;
	object-fit:      contain;
	object-position: right bottom;
	display:         block;
}

@media (max-width: 767px) {
	.fx-hero--product .fx-hero__image-wrap {
		aspect-ratio: auto;
	}

	.fx-hero--product .fx-hero__image {
		object-position: center bottom;
	}
}

/* Tablet + PC: samme grid-/flex-kæde som .fx-hero--frontpage (hero.css +
 * frontpage.css) så venstresøjle + promo-rækken matcher. */
@media (min-width: 768px) {
	.fx-hero--product .fx-hero__container {
		align-items: stretch;
	}

	.fx-hero--product .fx-hero__content {
		align-self: stretch;
	}

	.fx-hero--product .fx-hero__media {
		position: relative;
		left: 0;
		z-index: 0;
		justify-self: end;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-end;
		min-width: 0;
	}

	.fx-hero--product .fx-hero__image-wrap {
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.fx-hero--product {
		overflow-x: clip;
	}

	.fx-hero--product .fx-hero__image {
		width: auto;
		height: 300px;
		max-width: calc(100% + 104px);
		object-fit: contain;
		object-position: right bottom;
		margin-bottom: -8px;
		margin-right: -50px;
	}
}

@media (min-width: 1024px) {
	.fx-hero--product {
		overflow-x: clip;
	}

	.fx-hero--product .fx-hero__image {
		width: atuo;
		height: 300px;
		max-width: calc(100% + 245px);
		object-fit: contain;
		object-position: right bottom;
		margin-bottom: -8px;
		margin-right: -160px;
	}
}

/* FAQ-sektion (bespoke wrapper rundt om [acf_faq]) ----------------- */
.fx-faq-wrap {
	padding: var(--fx-section-py, 96px) var(--fx-gutter, 24px);
	background-color: var(--fx-bg, #fff);
}

.fx-faq-wrap__container {
	max-width: var(--fx-max-content, 1140px);
	margin:    0 auto;
}

.fx-faq-wrap__header {
	max-width:     780px;
	margin:        0 auto 48px;
	text-align:    center;
}

.fx-faq-wrap__title {
	margin: 0 0 12px;
	color:  var(--fx-text, #2d2f31);
	font-size: clamp(28px, 3.6vw, 40px);
	font-weight: 700;
	line-height: 1.15;
}

.fx-faq-wrap__intro {
	margin: 0;
	color:  var(--fx-text, #2d2f31);
	font-size: clamp(16px, 1.1vw, 18px);
	line-height: 1.55;
}

/* Further-reading-wrap ------------------------------------------- */
/* Product bruger samme .fx-vi-posts--further mønster som about-us
   og category-ai, men med product-specifik header. Selve carouselen
   er [blogpost_carousel] og styles via carousel'ens egen CSS. */
.fx-main--product .fx-vi-posts--further {
	padding: var(--fx-section-py, 96px) var(--fx-gutter, 24px);
	background-color: var(--fx-bg-soft, #f6f5f8);
}

.fx-main--product .fx-vi-posts--further .fx-vi-posts__container {
	max-width: var(--fx-max-content, 1140px);
	margin:    0 auto;
}

.fx-main--product .fx-vi-posts--further .fx-vi-posts__header {
	max-width:     780px;
	margin:        0 auto 40px;
	text-align:    center;
}

.fx-main--product .fx-vi-posts--further .fx-vi-posts__heading {
	margin: 0 0 12px;
	color:  var(--fx-text, #2d2f31);
	font-size: clamp(28px, 3.6vw, 40px);
	font-weight: 700;
	line-height: 1.15;
}

.fx-main--product .fx-vi-posts--further .fx-vi-posts__intro {
	margin: 0;
	color:  var(--fx-text, #2d2f31);
	font-size: clamp(16px, 1.1vw, 18px);
	line-height: 1.55;
}

/* Anchor-offset for pill-scroller hop. Header er sticky ~80px tall. */
.fx-main--product [id="how-it-works"],
.fx-main--product [id="operations-hub"],
.fx-main--product [id="gates"],
.fx-main--product [id="integrations"],
.fx-main--product [id="custom-damage-definitions"],
.fx-main--product [id="real-examples"] {
	scroll-margin-top: 100px;
}

/* Responsive ------------------------------------------------------ */
/* Tablet + mobil: further-reading-sektionen skal være flush i siderne
   (samme som VI-archive / about); shorthand ovenfor gav ellers 24px gutter. */
@media (max-width: 1024px) {
	.fx-main--product .fx-vi-posts--further {
		padding-left:  0;
		padding-right: 0;
	}
}

@media (max-width: 767px) {
	.fx-faq-wrap__header,
	.fx-main--product .fx-vi-posts--further .fx-vi-posts__header {
		margin-bottom: 32px;
	}
}