/**
 * Rasa June – Argument-blokk (2 kolonner)
 *
 * Scoped entirely under .rjab-block so it never affects the theme or any
 * other Elementor element. No cards, icons, shadows or decorative boxes —
 * layout relies on flexbox, spacing and typography only. All colors,
 * typography, spacing and column widths are controlled from Elementor
 * (see class-argument-block-widget.php); this file only supplies layout
 * structure and safe fallback values.
 */

.rjab-block {
	width: 100%;
	box-sizing: border-box;
}

.rjab-block,
.rjab-block *,
.rjab-block *::before,
.rjab-block *::after {
	box-sizing: border-box;
}

.rjab-block__inner {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	gap: 64px;
}

.rjab-block__left {
	flex: 0 0 42%;
	max-width: 42%;
	min-width: 0;
}

.rjab-block__right {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.rjab-block__heading {
	margin: 0;
	font-weight: 400;
}

.rjab-block__faq-link {
	display: inline-flex;
	align-items: flex-start;
	max-width: 100%;
	min-height: 44px;
	margin-top: 32px;
	padding: 8px 0;
	gap: 0.55em;
	color: #1d1d1d;
	font-family: "Courier Prime", ui-monospace, "Courier New", monospace;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.45;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color 180ms ease;
}

.rjab-block__faq-link:hover,
.rjab-block__faq-link:focus-visible {
	color: #666666;
}

.rjab-block__faq-link:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 5px;
}

.rjab-block__faq-arrow {
	display: inline-block;
	flex: 0 0 auto;
	transition: transform 180ms ease;
}

.rjab-block__faq-link:hover .rjab-block__faq-arrow,
.rjab-block__faq-link:focus-visible .rjab-block__faq-arrow {
	transform: translateX(3px);
}

.rjab-block__item {
	min-width: 0;
}

.rjab-block__item-heading {
	/* Actual spacing is set by the "Spacing Below Heading" Elementor
	   control (selectors target this class directly); this is only a
	   fallback in case that control's CSS hasn't loaded yet. */
	margin: 0 0 16px;
	font-weight: 400;
}

.rjab-block__item-text {
	margin: 0;
}

.rjab-block__number {
	display: block;
	line-height: 1;
	/* Fallback only — see "Spacing Below Number" Elementor control. */
	margin: 0 0 10px;
}

/* Divider line between points (right column only). Rendered only for
   non-last points when "Show Divider Lines" is enabled — see render() in
   class-argument-block-widget.php. Color, thickness, width and the
   spacing above/below are all set by matching Elementor Style controls;
   these are just safe fallback values. */
.rjab-block__divider {
	width: 100%;
	height: 0;
	margin: 32px 0;
	border: 0;
	border-top: 1px solid rgba(29, 38, 43, 0.15);
}

@media (max-width: 1024px) {
	.rjab-block__faq-link {
		margin-top: 24px;
		font-size: 16px;
		line-height: 1.45;
	}
}

/* Safety net: if the widget's own responsive "Layout" control ever isn't
   present (e.g. an older cached CSS), never allow horizontal overflow on
   small screens — force a stacked, full-width layout below 768px. */
@media (max-width: 767px) {
	.rjab-block__inner {
		flex-direction: column;
	}

	.rjab-block__left,
	.rjab-block__right {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.rjab-block__heading,
	.rjab-block__item-heading,
	.rjab-block__item-text {
		overflow-wrap: normal;
		word-break: normal;
		hyphens: none;
	}

	.rjab-block__faq-link {
		min-height: 48px;
		margin-top: 18px;
		padding: 10px 0;
		gap: 0.45em;
		font-size: 15px;
		line-height: 1.5;
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rjab-block__faq-link,
	.rjab-block__faq-arrow {
		transition: none;
	}
}