/* ============================================================================
   SIRO Application Tabs widget.
   Tabs + grid of image-cards. Replaces nested-tabs + 16 image-card stack on
   the homepage Aplicații section. Server-renders ALL panels; non-active panels
   are [hidden] (no display:none flicker) so SEO/Googlebot sees all cards.
   ============================================================================ */

.siro-apptabs {
	font-family: var(--siro-font-body);
	max-width: var(--siro-container-max, 1280px);
	margin: 0 auto;
}

/* ---- Tablist ----------------------------------------------------------- */
.siro-apptabs__tablist {
	display: flex;
	flex-wrap: wrap;
	gap: var(--siro-space-3);
	margin-bottom: var(--siro-space-8);
	border-bottom: 1px solid var(--siro-outline-dark);
	padding-bottom: 0;
}

.siro-apptabs__tab {
	display: inline-flex;
	align-items: center;
	gap: var(--siro-space-2);
	background: transparent;
	border: 0;
	border-bottom: 3px solid transparent;
	padding: var(--siro-space-3) var(--siro-space-5);
	font-family: var(--siro-font-body);
	font-size: var(--siro-fs-md);
	font-weight: 600;
	color: var(--siro-text-muted);
	cursor: pointer;
	transition: color var(--siro-trans-fast, .2s),
	            border-color var(--siro-trans-fast, .2s);
	margin-bottom: -1px; /* sit on the underline */
}

.siro-apptabs__tab:hover,
.siro-apptabs__tab:focus-visible {
	color: var(--siro-color-primary);
	outline: none;
}

.siro-apptabs__tab.is-active {
	color: var(--siro-color-primary);
	border-bottom-color: var(--siro-color-accent);
	font-weight: 700;
}

.siro-apptabs__tab-icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	object-fit: contain;
	opacity: 0.85;
}
.siro-apptabs__tab.is-active .siro-apptabs__tab-icon {
	opacity: 1;
}

/* ---- Panels ------------------------------------------------------------ */
.siro-apptabs__panel[hidden] {
	display: none;
}

/* ---- Card grid --------------------------------------------------------- */
.siro-apptabs__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--siro-space-6);
}

/* ---- Card -------------------------------------------------------------- */
.siro-apptabs__card {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--siro-space-4);
	background: var(--siro-surface);
	border: 1px solid var(--siro-outline);
	border-radius: var(--siro-radius-md, 16px);
	padding: var(--siro-space-5);
	transition: border-color var(--siro-trans-fast, .2s),
	            transform var(--siro-trans-fast, .2s),
	            box-shadow var(--siro-trans-fast, .2s);
}

.siro-apptabs__card:hover {
	border-color: var(--siro-outline-strong);
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 55, 126, 0.06);
}

.siro-apptabs__card-img {
	width: 128px;
	height: 128px;
	flex-shrink: 0;
	object-fit: contain;
	border-radius: 8px;
	background: var(--siro-surface-low);
}

.siro-apptabs__card-body {
	flex: 1 1 auto;
	min-width: 0;
}

.siro-apptabs__card-title {
	font-family: var(--siro-font-display);
	font-size: var(--siro-fs-lg);
	font-weight: 700;
	color: var(--siro-color-primary);
	margin: 0 0 var(--siro-space-2);
	line-height: var(--siro-font-heading-leading, 1.2);
}

.siro-apptabs__card-text {
	color: var(--siro-text-muted);
	font-size: var(--siro-fs-sm);
	line-height: var(--siro-font-body-leading, 1.6);
}
.siro-apptabs__card-text p { margin: 0; }
.siro-apptabs__card-text p + p { margin-top: var(--siro-space-2); }

/* ---- Vertical card variant (image top) --------------------------------- */
.siro-apptabs--cards-vertical .siro-apptabs__card {
	flex-direction: column;
	align-items: stretch;
	gap: var(--siro-space-4);
}
.siro-apptabs--cards-vertical .siro-apptabs__card-img {
	width: 100%;
	height: 200px;
	border-radius: 8px;
	object-fit: cover;
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1024px) {
	.siro-apptabs__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.siro-apptabs__cards {
		grid-template-columns: 1fr;
	}
	.siro-apptabs__card {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: var(--siro-space-4);
	}
	.siro-apptabs__card-img {
		width: 200px;
		height: 200px;
		object-fit: contain;
	}
	.siro-apptabs__card-title { text-align: center; }

	/* ---- Accordion mode (mobile) -------------------------------------
	   Old nested-tabs widget collapsed tabs into an accordion on mobile.
	   We reproduce that here: flatten the tablist + panels wrappers with
	   display:contents, then interleave each tab with its own panel using
	   `order`. Only one panel is "open" at a time — the JS already toggles
	   the [hidden] attribute on inactive panels, so collapsed items take
	   no vertical space.
	   --------------------------------------------------------------- */
	.siro-apptabs {
		display: flex;
		flex-direction: column;
		gap: var(--siro-space-3);
	}
	.siro-apptabs__tablist,
	.siro-apptabs__panels {
		display: contents;
	}
	.siro-apptabs__tablist {
		border-bottom: 0;
		margin-bottom: 0;
	}

	/* Interleave: tab0=order0, panel0=order1, tab1=order2, panel1=order3 … */
	.siro-apptabs__tab[data-tab-index="0"]    { order: 0; }
	.siro-apptabs__panel[data-panel-index="0"] { order: 1; }
	.siro-apptabs__tab[data-tab-index="1"]    { order: 2; }
	.siro-apptabs__panel[data-panel-index="1"] { order: 3; }
	.siro-apptabs__tab[data-tab-index="2"]    { order: 4; }
	.siro-apptabs__panel[data-panel-index="2"] { order: 5; }
	.siro-apptabs__tab[data-tab-index="3"]    { order: 6; }
	.siro-apptabs__panel[data-panel-index="3"] { order: 7; }
	.siro-apptabs__tab[data-tab-index="4"]    { order: 8; }
	.siro-apptabs__panel[data-panel-index="4"] { order: 9; }

	.siro-apptabs__tab {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: var(--siro-space-3);
		width: 100%;
		margin: 0;
		padding: var(--siro-space-4) var(--siro-space-5);
		background: var(--siro-surface);
		border: 1px solid var(--siro-outline);
		border-bottom-width: 1px;
		border-radius: var(--siro-radius-md, 16px);
		font-size: var(--siro-fs-md);
		font-weight: 600;
		color: var(--siro-color-primary);
		text-align: left;
		transition: background-color var(--siro-trans-fast, .2s),
		            color var(--siro-trans-fast, .2s),
		            border-color var(--siro-trans-fast, .2s);
	}
	.siro-apptabs__tab:hover,
	.siro-apptabs__tab:focus-visible {
		background: var(--siro-surface-low, #f5f7fa);
		color: var(--siro-color-primary);
	}
	.siro-apptabs__tab.is-active {
		background: var(--siro-color-primary);
		color: var(--siro-text-inverse);
		border-color: var(--siro-color-primary);
		font-weight: 700;
	}
	.siro-apptabs__tab.is-active:hover,
	.siro-apptabs__tab.is-active:focus-visible {
		background: var(--siro-color-primary);
		color: var(--siro-text-inverse);
	}
	.siro-apptabs__tab.is-active .siro-apptabs__tab-icon {
		filter: brightness(0) invert(1);
	}

	/* Chevron indicator — rotates 180° when the tab is open. */
	.siro-apptabs__tab::after {
		content: '';
		flex-shrink: 0;
		width: 10px;
		height: 10px;
		margin-left: auto;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform var(--siro-trans-fast, .2s);
	}
	.siro-apptabs__tab.is-active::after {
		transform: rotate(-135deg);
	}

	.siro-apptabs__tab-label {
		max-width: none;
		flex: 1 1 auto;
	}

	.siro-apptabs__panel {
		padding: var(--siro-space-4) 0 var(--siro-space-2);
	}
}