/*
 * HAHU frontend styles — self-contained and fully variable-driven.
 *
 * Everything is scoped under `.hahu` so it cannot leak into the host theme, and
 * renders cleanly WITHOUT Bootstrap (the templates still carry Bootstrap class
 * names for sites that load it, but none are required).
 *
 * Every visual property reads from a `--hahu-*` custom property whose default
 * reproduces the original ("régi") plugin design. The Divi modules override
 * these variables per instance (via set_style on `%%order_class%% .hahu`), so
 * the admin can recolour / re-space the whole UI live in the Visual Builder
 * without touching this file.
 */

.hahu {
	/* Palette — original plugin colours. */
	--hahu-accent: #a4896c;
	--hahu-accent-ink: #ffffff;
	--hahu-ink: #343434;
	--hahu-muted: #5a5a5a;
	--hahu-line: #e1d8ca;
	--hahu-surface: #ffffff;
	--hahu-surface-2: #f1e8da;

	/* Filter form: a deeper tone than the surfaces so the box reads as part of
	   the page, with clearly bordered inputs that stand out against it. */
	--hahu-filter-bg: #d4c9b3;
	--hahu-input-bg: #ffffff;
	--hahu-input-border: #c9bca2;

	/* List header (title + result count + rule). White, for a dark section. */
	--hahu-head-ink: #ffffff;

	/* Card (overlay style). */
	--hahu-card-h: 200px;
	--hahu-card-title: #e1d8ca;
	--hahu-card-price: #ffffff;
	--hahu-card-text: #ffffff;
	--hahu-overlay: rgba(52, 52, 52, 0.55);

	/* Layout. `--hahu-columns: auto-fill` = responsive; a number = fixed count. */
	--hahu-columns: auto-fill;
	--hahu-gap: 1.25rem;
	--hahu-radius: 8px;
	--hahu-radius-sm: 6px;

	--hahu-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
	--hahu-shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.16);

	color: var(--hahu-ink);
	box-sizing: border-box;
}

.hahu *,
.hahu *::before,
.hahu *::after {
	box-sizing: inherit;
}

/* Nested theming. A `.hahu` fragment (e.g. parts/szurok, parts/lista) rendered
   INSIDE a Divi scope wrapper (`.hahu-divi-scope`, see HahuModuleBase::scope)
   would re-declare every palette var ON ITSELF via the `.hahu {}` block above.
   A direct declaration always beats an inherited value, so the wrapper's inline
   per-instance overrides (the Design controls) would have no effect — the symptom
   being "the control shows up but nothing changes". Re-inherit every themeable
   var (the CSS targets of HahuModuleBase::DESIGN_VAR_MAP) so the wrapper wins.
   Higher specificity (0,2,0) than the `.hahu` block (0,1,0) makes `inherit` apply;
   when no override is set the wrapper still holds the default, so nothing breaks. */
.hahu-divi-scope .hahu {
	--hahu-accent: inherit;
	--hahu-card-title: inherit;
	--hahu-card-price: inherit;
	--hahu-overlay: inherit;
	--hahu-columns: inherit;
	--hahu-card-h: inherit;
	--hahu-radius: inherit;
	--hahu-gap: inherit;
	--hahu-filter-bg: inherit;
	--hahu-filter-border: inherit;
	--hahu-filter-border-w: inherit;
	--hahu-filter-radius: inherit;
	--hahu-input-bg: inherit;
	--hahu-input-border: inherit;
	--hahu-input-ink: inherit;
	--hahu-szuro-btn-bg: inherit;
	--hahu-szuro-btn-ink: inherit;
}

/* ---------------------------------------------------------------- Buttons */

.hahu .btn,
.hahu .hahu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.6rem 1.1rem;
	border: 1px solid transparent;
	border-radius: var(--hahu-radius-sm);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}

.hahu .btn:active,
.hahu .hahu-btn:active {
	transform: translateY(1px);
}

.hahu .btn-primary {
	background: var(--hahu-accent);
	border-color: var(--hahu-accent);
	color: var(--hahu-accent-ink);
}

.hahu .btn-primary:hover,
.hahu .btn-primary:focus-visible {
	background: color-mix(in srgb, var(--hahu-accent) 86%, #000);
	border-color: color-mix(in srgb, var(--hahu-accent) 86%, #000);
	color: var(--hahu-accent-ink);
}

.hahu .btn-sm {
	padding: 0.4rem 0.8rem;
	font-size: 0.875rem;
}

.hahu .btn-link {
	background: none;
	border-color: transparent;
	color: var(--hahu-muted);
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.hahu .btn-link:hover,
.hahu .btn-link:focus-visible {
	color: var(--hahu-accent);
	text-decoration: underline;
}

.hahu .btn:focus-visible,
.hahu .hahu-btn:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--hahu-accent) 50%, transparent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------- List view */

/* Standalone list header module (HahuFejlec): page title left, result count
   right. Every visual is variable-driven (Design controls) with a fallback to a
   sensible default, so an un-themed instance still looks intentional. */
.hahu-fejlec {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	margin: 0 0 1.25rem;
}

.hahu-fejlec__title {
	margin: 0;
	padding-bottom: 0.2rem;
	font-size: var(--hahu-fejlec-title-size, 1.6rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--hahu-fejlec-title-color, var(--hahu-ink));
	border-bottom: var(--hahu-fejlec-title-border-w, 0) solid var(--hahu-fejlec-title-border, var(--hahu-accent));
}

.hahu-fejlec__count {
	font-size: 0.95rem;
	font-weight: var(--hahu-fejlec-sum-weight, 600);
	color: var(--hahu-fejlec-sum-color, var(--hahu-muted));
	white-space: nowrap;
}

/* List header: title left, result count right, white, with a rule under it. */
.hahu-lista__head {
	width: 100%;
	margin-top: 30px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
}

.hahu-lista__title {
	padding-bottom: 0;
	color: var(--hahu-head-ink);
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.2;
}

.hahu-lista__count {
	color: var(--hahu-head-ink);
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0;
}

.hahu-lista__rule {
	border: 0;
	border-top: 1px solid var(--hahu-head-ink);
	margin: 5px 0 30px;
}

.hahu-lista__filters {
	margin-bottom: 1.5rem;
}

/* Card grid — CSS Grid, no Bootstrap row/col needed. `--hahu-columns` is either
   the keyword `auto-fill` (responsive, the default) or a number (fixed count);
   both are valid as the repeat() count, so no fallback trickery is needed. */
.hahu .hahu-grid {
	display: grid;
	gap: var(--hahu-gap);
	grid-template-columns: repeat(var(--hahu-columns), minmax(min(100%, 280px), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Neutralise Bootstrap's `.row-cols-* > *` width (e.g. 33.33%) — harmless when
   Bootstrap is absent, essential when a sibling plugin loads it globally, since
   that width would otherwise shrink each grid item to a fraction of its track. */
.hahu .hahu-grid > .hahu-card {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Overlay card — image fills the card, title/price float top, stats float
   bottom (reproduces the original `.hahu-item` design). */
.hahu .hahu-card .card {
	position: relative;
	display: block;
	height: var(--hahu-card-h);
	border: 0;
	border-radius: var(--hahu-radius);
	overflow: hidden;
	box-shadow: var(--hahu-shadow);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hahu .hahu-card__link {
	display: block;
	height: 100%;
	color: var(--hahu-card-text);
	text-decoration: none;
}

.hahu .hahu-card .card:hover {
	box-shadow: var(--hahu-shadow-lg);
}

.hahu .hahu-card__media {
	display: block;
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: color-mix(in srgb, var(--hahu-accent) 18%, var(--hahu-surface-2));
}

.hahu .hahu-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.hahu .hahu-card__link:hover .hahu-card__media img {
	transform: scale(1.05);
}

.hahu .hahu-card__noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--hahu-muted);
	font-size: 0.875rem;
}

/* Top overlay: title + price. */
.hahu .hahu-card__overlay-top {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.7rem 0.85rem 1.6rem;
	background: linear-gradient(to bottom, var(--hahu-overlay), transparent);
}

.hahu .hahu-card__title {
	margin: 0;
	flex: 1 1 60%;
	min-width: 0;
	font-size: var(--hahu-card-title-size, 0.95rem);
	line-height: 1.2;
	font-weight: 600;
	color: var(--hahu-card-title);
}

.hahu .hahu-card__price {
	flex: 0 0 auto;
	font-weight: 700;
	font-size: var(--hahu-card-price-size, 0.95rem);
	text-align: right;
	color: var(--hahu-card-price);
}

/* Bottom overlay: stats with icons. */
.hahu .hahu-card__overlay-bottom {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1rem;
	padding: 1.6rem 0.85rem 0.7rem;
	background: linear-gradient(to top, var(--hahu-overlay), transparent);
	color: var(--hahu-card-text);
	font-size: var(--hahu-card-stat-size, 0.82rem);
}

.hahu .hahu-card__stat {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

/* Icon before each stat — either a built-in SVG or a chosen Divi font icon.
   Both follow --hahu-card-icon for colour (default: the stat text colour) and
   --hahu-card-icon-size for size. */
.hahu .hahu-card__stat svg {
	width: var(--hahu-card-icon-size, 1.15rem);
	height: var(--hahu-card-icon-size, 1.15rem);
	color: var(--hahu-card-icon, currentColor);
	fill: currentColor;
	flex: 0 0 auto;
	opacity: 0.9;
}

.hahu .hahu-card__stat .et-pb-icon {
	font-size: var(--hahu-card-icon-size, 1.15rem);
	line-height: 1;
	color: var(--hahu-card-icon, currentColor);
	flex: 0 0 auto;
	opacity: 0.9;
}

/* User-uploaded icon image. Sizes with the icon control; colour can't apply to a
   bitmap/<img>, so it keeps its own colours (documented in the module field). */
.hahu .hahu-card__stat-img {
	width: var(--hahu-card-icon-size, 1.15rem);
	height: var(--hahu-card-icon-size, 1.15rem);
	object-fit: contain;
	flex: 0 0 auto;
	opacity: 0.9;
}

.hahu .hahu-empty {
	padding: 2.5rem 1rem;
	text-align: center;
	color: var(--hahu-muted);
	background: var(--hahu-surface-2);
	border-radius: var(--hahu-radius);
}

/* --------------------------------------------------------- Pagination */

.hahu-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
	margin: 2rem 0 0.5rem;
}

.hahu-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.65rem;
	background: var(--hahu-pg-bg, transparent);
	border: 1px solid var(--hahu-pg-border, var(--hahu-line));
	border-radius: var(--hahu-radius-sm);
	color: var(--hahu-pg-ink, var(--hahu-ink));
	text-decoration: none;
	font-weight: 600;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hahu-pagination a.page-numbers:hover {
	border-color: var(--hahu-pg-active-bg, var(--hahu-accent));
	color: var(--hahu-pg-active-bg, var(--hahu-accent));
}

.hahu-pagination .page-numbers.current {
	background: var(--hahu-pg-active-bg, var(--hahu-accent));
	border-color: var(--hahu-pg-active-bg, var(--hahu-accent));
	color: var(--hahu-pg-active-ink, var(--hahu-accent-ink));
}

.hahu-pagination .page-numbers.dots {
	border-color: transparent;
}

/* ------------------------------------------------------- Filter form */

/* The filter box draws its OWN rounded background (.hahu-szurok below); the Divi
   module wrapper around it must never paint one, or it shows through at the
   rounded corners. Neutralise any per-instance background saved on the wrapper
   (e.g. Divi's generated `.et_pb_hahu_szurok_0{background-color:#0C71C3}`). The
   `.et_pb_module.et_pb_hahu_szurok` compound is 0,2,0 — it outranks Divi's
   single-class `.et_pb_hahu_szurok_0` (0,1,0) without needing !important, and so
   survives et-cache regeneration. */
.et_pb_module.et_pb_hahu_szurok {
	background-color: transparent;
}

.hahu-szurok {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0.5rem 1.25rem;
	align-items: end;
	margin-bottom: 1.5rem;
	padding: 1.25rem;
	background: var(--hahu-filter-bg);
	border: var(--hahu-filter-border-w, 1px) solid var(--hahu-filter-border, color-mix(in srgb, var(--hahu-filter-bg) 80%, #000));
	border-radius: var(--hahu-filter-radius, var(--hahu-radius));
}

/* Range filters (e.g. price) span a wider track so both bounds stay readable. */
.hahu-szurok .hahu-szuro--wide {
	grid-column: span 2;
}

.hahu-szurok .hahu-szuro {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.hahu-szurok .form-label {
	margin-bottom: 0;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--hahu-muted);
}

.hahu-szurok .form-select,
.hahu-szurok .form-control {
	width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--hahu-input-border);
	border-radius: var(--hahu-radius-sm);
	background: var(--hahu-input-bg);
	color: var(--hahu-input-ink, var(--hahu-ink));
	font: inherit;
	line-height: 1.3;
	box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.05);
}

.hahu-szurok .form-select:focus,
.hahu-szurok .form-control:focus {
	outline: none;
	border-color: var(--hahu-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--hahu-accent) 18%, transparent);
}

/* Placeholder follows the chosen input text colour (the price range fields are
   usually empty, so without this the "Mező szövegszín" control would seem to do
   nothing on text inputs). Dimmed so it still reads as a hint, not a value. */
.hahu-szurok .form-control::placeholder {
	color: var(--hahu-input-ink, var(--hahu-ink));
	opacity: 0.55;
}

.hahu-szuro__checks {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	max-height: 9rem;
	overflow-y: auto;
	border: 1px solid var(--hahu-line);
	border-radius: var(--hahu-radius-sm);
	background: var(--hahu-surface);
	padding: 0.6rem 0.7rem;
}

.hahu-szuro__checks .form-check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.9rem;
	cursor: pointer;
}

.hahu-szuro__checks .form-check-input {
	margin: 0;
	width: 1rem;
	height: 1rem;
	accent-color: var(--hahu-accent);
}

.hahu-szuro__range.input-group {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.hahu-szuro__range .form-control {
	flex: 1 1 0;
	min-width: 0;
}

.hahu-szuro__range .input-group-text {
	color: var(--hahu-muted);
}

.hahu-szurok__actions {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Submit button — independently themable (defaults to the accent button look). */
.hahu-szurok .btn-primary {
	background: var(--hahu-szuro-btn-bg, var(--hahu-accent));
	border-color: var(--hahu-szuro-btn-bg, var(--hahu-accent));
	color: var(--hahu-szuro-btn-ink, var(--hahu-accent-ink));
}

.hahu-szurok .btn-primary:hover,
.hahu-szurok .btn-primary:focus-visible {
	background: color-mix(in srgb, var(--hahu-szuro-btn-bg, var(--hahu-accent)) 86%, #000);
	border-color: color-mix(in srgb, var(--hahu-szuro-btn-bg, var(--hahu-accent)) 86%, #000);
	color: var(--hahu-szuro-btn-ink, var(--hahu-accent-ink));
}

/* "Szűrők törlése" — outline button (was a plain text link), so it reads as a
   pair with the submit button while staying visually secondary. */
.hahu-szurok .hahu-szuro-clear {
	background: transparent;
	border-color: var(--hahu-input-border);
	color: var(--hahu-ink);
	text-decoration: none;
}

.hahu-szurok .hahu-szuro-clear:hover,
.hahu-szurok .hahu-szuro-clear:focus-visible {
	border-color: var(--hahu-szuro-btn-bg, var(--hahu-accent));
	color: var(--hahu-szuro-btn-bg, var(--hahu-accent));
	text-decoration: none;
}

/* --------------------------------------------------- Detail (single) */

/* Two-column layout below the full-width gallery: main content + sidebar. */
.hahu-jarmu__layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
	margin-top: 1.75rem;
}

.hahu-jarmu__main {
	min-width: 0;
}

.hahu-jarmu__header {
	margin-bottom: 1.25rem;
}

.hahu-jarmu__eyebrow {
	margin: 0 0 0.25rem;
	color: var(--hahu-muted);
	font-size: 1.2rem;
	font-weight: 500;
	border-bottom: solid 1px var(--hahu-line);
}

.hahu-jarmu__title {
	margin: 0;
	line-height: 1.2;
	font-size: 1rem;
}

/* Five highlight boxes: icon over label over value. */
.hahu-jarmu__boxes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	gap: 0.75rem;
	margin: 0 0 1.75rem;
}

.hahu-jarmu__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	text-align: center;
	padding: 1rem 0.7rem;
	background: var(--hahu-surface-2);
	border: 1px solid var(--hahu-line);
	border-radius: var(--hahu-radius-sm);
}

.hahu-jarmu__box-icon svg {
	display: block;
	width: 1.8rem;
	height: 1.8rem;
	color: var(--hahu-muted);
}

.hahu-jarmu__box-label {
	font-size: 0.85rem;
	color: var(--hahu-muted);
}

.hahu-jarmu__box-value {
	font-weight: 700;
	font-size: 0.7rem;
	line-height: 1.25;
}

/* Accordion — native <details>, no JS. */
.hahu-acc {
	border: 1px solid var(--hahu-line);
	border-radius: var(--hahu-radius-sm);
	margin-bottom: 0.6rem;
	background: var(--hahu-surface);
}

.hahu-acc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 1rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.hahu-acc__head::-webkit-details-marker {
	display: none;
}

.hahu-acc__head::after {
	content: "";
	flex: 0 0 auto;
	width: 0.55rem;
	height: 0.55rem;
	border-right: 2px solid var(--hahu-muted);
	border-bottom: 2px solid var(--hahu-muted);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.hahu-acc[open] .hahu-acc__head::after {
	transform: rotate(-135deg);
}

.hahu-acc__body {
	padding: 0 1rem 1rem;
}

/* "Általános adatok": responsive 3-up grid of label/value boxes. */
.hahu-adat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0.6rem;
}

.hahu-adat {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 4px 5px;
	background: var(--hahu-surface);
	border: 1px solid var(--hahu-line);
	border-radius: var(--hahu-radius-sm);
}

.hahu-adat__label {
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1.4em;
	color: var(--hahu-accent);
}

.hahu-adat__value {
	font-size: 0.7rem;
	color: var(--hahu-ink);
	line-height: 1.4em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Sidebar. */
.hahu-jarmu__side {
	display: grid;
	gap: 1.25rem;
	min-width: 0;
}

.hahu-jarmu__side-title {
	margin: 0 0 0.75rem;
	font-size: 1.15rem;
	border-bottom: solid 1px var(--hahu-surface-2);
}

/* Gallery */
.hahu-galeria {
	margin: 0 0 1.75rem;
}

.hahu-galeria .swiper-slide {
	border-radius: var(--hahu-radius);
	overflow: hidden;
	background: var(--hahu-surface-2);
}

.hahu-galeria .swiper-slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Fancybox lightbox renders at <body> level (outside `.hahu`). Lift it above the
   WP admin bar and Divi's fixed header (z-index ~99999) so its toolbar — zoom,
   fullscreen, close — isn't hidden behind them. */
.fancybox__container {
	z-index: 1000000 !important;
}

.hahu-galeria .swiper-button-prev,
.hahu-galeria .swiper-button-next {
	color: #fff;
	background: rgba(52, 52, 52, 0.45);
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	backdrop-filter: blur(2px);
}

.hahu-galeria .swiper-button-prev::after,
.hahu-galeria .swiper-button-next::after {
	font-size: 1rem;
	font-weight: 700;
}

.hahu-galeria .swiper-pagination-bullet-active {
	background: var(--hahu-accent);
}

/* Highlight stat grid */
.hahu .hahu-jarmu__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.75rem;
	margin: 0 0 1.75rem;
	padding: 0;
	list-style: none;
}

.hahu .hahu-jarmu__grid > .col {
	width: auto;
	max-width: none;
	padding: 0;
}

.hahu-stat {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	height: 100%;
	padding: 0.75rem 0.9rem;
	background: var(--hahu-surface-2);
	border: 1px solid var(--hahu-line);
	border-radius: var(--hahu-radius-sm);
}

.hahu-stat__label {
	font-size: 0.72rem;
	color: var(--hahu-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.hahu-stat__value {
	font-weight: 700;
	font-size: 1.05rem;
}

/* Sections */
.hahu-jarmu__section {
	margin: 2rem 0;
}

.hahu-jarmu__section > h2 {
	margin: 0 0 0.9rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--hahu-accent);
	font-size: 1.25rem;
}

.hahu-jarmu__leiras {
	font-size: 0.8rem;
	line-height: 1.5;
	font-weight: 300;
}

/* Spec tables */
.hahu .hahu-adatok {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.hahu .hahu-adatok th,
.hahu .hahu-adatok td {
	padding: 0.6rem 0.85rem;
	text-align: left;
	vertical-align: top;
	border: 0;
}

.hahu .hahu-adatok th[scope="row"] {
	width: 45%;
	font-weight: 600;
	color: var(--hahu-muted);
}

.hahu .hahu-adatok tbody tr {
	border-bottom: 1px solid var(--hahu-line);
}

.hahu .hahu-adatok tbody tr:nth-child(odd) {
	background: var(--hahu-surface-2);
}

/* Equipment lists */
.hahu-felszereltseg {
	columns: 2;
	column-gap: 1.5rem;
	margin: 0;
	padding-left: 1.1rem;
	line-height: 1.7;
}

.hahu-felszereltseg li {
	break-inside: avoid;
}

/* Contact — dark sidebar box with light text. */
.hahu-jarmu__kapcsolat {
	padding: 0.8rem;
	background: var(--hahu-muted);
	color: #fff;
	border-radius: var(--hahu-radius);
}

.hahu-jarmu__kapcsolat .hahu-jarmu__side-title {
	color: var(--hahu-surface-2);
	font-size: 1.3rem;
}

.hahu-jarmu__kapcsolat ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
	font-size: 0.7rem;
}

.hahu-jarmu__kapcsolat a {
	color: var(--hahu-surface-2);
	text-decoration: underline;
}

.hahu-jarmu__kapcsolat svg {
	fill:  var(--hahu-surface-2);
    width: 1.3rem;
    height: 1.3rem;
}

.hahu-jarmu__kapcsolat__list {
	display: flex;
	align-items: center;
	color: var(--hahu-surface-2);
}

/* ------------------------------------------------------- Responsive */

@media (max-width: 860px) {
	.hahu-jarmu__layout {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 575px) {
	.hahu-felszereltseg {
		columns: 1;
	}
}