/**
 * Gate Operations category archive page (/gate-operations/ + WPML-varianter).
 *
 * Struktur:
 *   .fx-main--gate-category
 *     ├── .fx-breadcrumb-wrap                                    (reusable)
 *     ├── section.fx-hero.fx-hero--gate                          (reusable hero)
 *     ├── section.fx-logo-carousel-wrap                          (reusable)
 *     ├── section.fx-image-accordion.fx-image-accordion--gate-uc (reusable — BENEFITS use-cases, image højre)
 *     ├── section.fx-gates.fx-gates--stacked                     (reusable — video + heading centreret)
 *     ├── section.fx-opshub                                      (reusable — portable unit)
 *     ├── section.fx-feature-grid--specs                         (reusable — 8 specs)
 *     ├── section.fx-opshub.fx-opshub--review                    (reusable — review hub, 4 feature-kort)
 *     ├── section.fx-opshub.fx-opshub--reverse                   (reusable — one platform)
 *     ├── section.fx-gate-posts--further                         (blogpost carousel)
 *     └── section.fx-cta                                         (reusable)
 *
 * Samme stylingmønster som category-ai.css — page-specifikke styles
 * ligger her, reusable sektioner har deres egne CSS-filer.
 */

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

/* Breadcrumb-wrapper — alignet med 1140px-layoutet, flush desktop,
   24px gutter tablet/mobil. Samme mønster som VI + about + ai. */
/* Hero 1:1 (.fx-hero--gate) i hero.css. BENEFITS i image-accordion.css. */

/* Desktop: teksten limer til toppen, knapper til bunden — undgår luftige
   huller når billedet er højere end tekst-blokken. */
@media (min-width: 1025px) {
	.fx-hero--gate .fx-hero__container {
		align-items: stretch;
	}

	.fx-hero--gate .fx-hero__content {
		display: flex;
		flex-direction: column;
	}

	.fx-hero--gate .fx-hero__actions {
		margin-top: auto;
		margin-bottom: 0;
	}
}

/* Specs-grid: lidt tættere padding og ingen body-tekst (kun title)
   så 8 ens kort fylder roligt og ensartet. */
.fx-feature-grid--specs .fx-feature-grid__item {
	padding: clamp(18px, 2vw, 24px);
	gap: 14px;
}
.fx-feature-grid--specs .fx-feature-grid__item-title {
	font-size: clamp(15px, 1.1vw, 16px);
	line-height: 1.35;
}

/* "Further reading"-sektion -------------------------------------------- */
.fx-gate-posts {
	padding:       var(--fx-section-py, 96px) var(--fx-gutter, 24px);
	background:    var(--fx-bg, #fff);
}

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

.fx-gate-posts__header {
	text-align: center;
	max-width:  760px;
	margin:     0 auto 48px;
}

.fx-gate-posts__heading {
	font-size:   clamp(28px, 3vw, 40px);
	font-weight: 700;
	line-height: 1.2;
	color:       var(--fx-text, #2d2f31);
	margin:      0 0 16px;
}

.fx-gate-posts__intro {
	font-size:   18px;
	line-height: 1.6;
	color:       var(--fx-text-muted, rgba(45, 47, 49, 0.8));
	margin:      0;
}

/* Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
	.fx-gate-posts {
		padding-left:  0;
		padding-right: 0;
	}
}

@media (max-width: 767px) {
	.fx-gate-posts__header {
		padding-left:  24px;
		padding-right: 24px;
		margin-bottom: 32px;
	}
	.fx-gate-posts__intro {
		font-size: 16px;
	}
}