/* Vrtići i skupine — accessible tab switcher between the two objects
   (Matični objekt Slapić / Područni objekt Vidra). No building photos —
   just an icon badge whose colour follows the active tab. Scoped to
   .groups-page (baked into the page's blocks), so it's slug-independent. */

.groups-page > * + * {
	margin-top: var(--space-lg);
}

.groups-tabs {
	--accent: var(--color-coral);
	--accent-tint: color-mix(in srgb, var(--accent) 16%, white);
}

/* Accent tracks whichever tab is selected, driven by aria-selected (set in
   groups-page.js) rather than a hardcoded per-tab colour repeated in JS —
   the palette only needs to change here and in the ::before rules below. */
.groups-tabs:has(.groups-tabs__tab:last-child[aria-selected="true"]) {
	--accent: var(--color-teal);
}

.groups-tabs__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-radius: var(--radius-card) var(--radius-card) 0 0;
	overflow: hidden;
}

.groups-tabs__tab {
	appearance: none;
	position: relative;
	border: none;
	background: var(--color-bg);
	color: var(--color-heading);
	cursor: pointer;
	font-family: var(--font-head);
	font-size: var(--font-size-base);
	padding: var(--space-xs) var(--space-sm);
	-webkit-tap-highlight-color: transparent;
}

/* Kadence's global button styling repaints any <button> on hover/focus/active
   with its default palette blue and a drop shadow (button:hover out-specifies
   a single class), so neutralise those states explicitly — the only visible
   hover effect should be the ::before colour fill below. */
.groups-tabs__tab:hover,
.groups-tabs__tab:focus,
.groups-tabs__tab:active {
	background: var(--color-bg);
	color: var(--color-heading);
	box-shadow: none;
	outline: none;
}

/* Keyboard focus — inset accent ring instead of the removed outline. */
.groups-tabs__tab:focus-visible {
	box-shadow: inset 0 0 0 2px var(--color-heading);
}

.groups-tabs__tab:first-child:focus-visible { box-shadow: inset 0 0 0 2px var(--color-coral); }
.groups-tabs__tab:last-child:focus-visible  { box-shadow: inset 0 0 0 2px var(--color-teal); }

/* Accent bar that "drops down to fill" on hover/selected — same technique as
   the header nav (header.css), adapted for a flat tab strip instead of a
   lift: a lift would tear the tab away from the panel it's attached to. */
.groups-tabs__tab::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 4px;
	transition: height 0.25s ease;
}

.groups-tabs__tab:first-child::before { background: var(--color-coral); }
.groups-tabs__tab:last-child::before  { background: var(--color-teal); }

.groups-tabs__tab:hover::before,
.groups-tabs__tab[aria-selected="true"]::before {
	height: 100%;
}

.groups-tabs__tab-label {
	position: relative;
	z-index: 1;
	transition: color 0.25s ease;
}

.groups-tabs__tab:hover .groups-tabs__tab-label,
.groups-tabs__tab[aria-selected="true"] .groups-tabs__tab-label {
	color: var(--color-white);
}

.groups-tabs__body {
	background: var(--color-white);
	border-radius: 0 0 var(--radius-card) var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: var(--space-md);
}

/* Only the first panel is visible before JS runs; groups-page.js takes
   over the toggling (inline style) once it initialises. */
.groups-panel ~ .groups-panel {
	display: none;
}

.groups-panel__header {
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--color-bg);
}

/* Kadence's core/group block wraps innerBlocks in an extra
   .wp-block-group__inner-container div, so the flex layout has to target
   that, not the block's own outer wrapper. */
.groups-panel__header > .wp-block-group__inner-container {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.groups-panel__icon {
	position: relative;
	flex-shrink: 0;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--accent-tint);
}

.groups-panel__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1.75rem;
	height: 1.75rem;
	background-color: var(--accent);
	-webkit-mask: url(../images/groups-icon-building.svg) no-repeat center / contain;
	mask: url(../images/groups-icon-building.svg) no-repeat center / contain;
}

.groups-panel__header-text {
	min-width: 0;
	flex: 1 1 auto;
}

.groups-panel__eyebrow {
	margin: 0;
	color: var(--accent);
	font-family: var(--font-head);
	font-size: var(--font-size-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.groups-panel__title {
	margin: 2px 0 4px;
	font-size: var(--font-size-xl);
}

.groups-panel__location {
	position: relative;
	margin: 0;
	padding-left: 1.1em;
	color: var(--color-heading);
	font-size: var(--font-size-sm);
	font-weight: 600;
}

.groups-panel__location::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 0.85em;
	height: 0.85em;
	background-color: var(--accent);
	-webkit-mask: url(../images/groups-icon-pin.svg) no-repeat center / contain;
	mask: url(../images/groups-icon-pin.svg) no-repeat center / contain;
}

.groups-panel__stats {
	margin-bottom: var(--space-lg);
}

.groups-panel__stats > .wp-block-group__inner-container {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-md);
}

.groups-panel__stat > .wp-block-group__inner-container {
	display: flex;
	align-items: center;
	gap: 6px;
}

.groups-panel__stat p {
	margin: 0;
	color: var(--color-heading);
	font-size: var(--font-size-sm);
	font-weight: 600;
}

.groups-panel__stat-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background-color: var(--accent);
}

.groups-panel__stat-icon--clock {
	-webkit-mask: url(../images/groups-icon-clock.svg) no-repeat center / contain;
	mask: url(../images/groups-icon-clock.svg) no-repeat center / contain;
}

.groups-panel__stat-icon--people {
	-webkit-mask: url(../images/groups-icon-people.svg) no-repeat center / contain;
	mask: url(../images/groups-icon-people.svg) no-repeat center / contain;
}

.groups-panel__table {
	overflow-x: auto;
	margin: 0 0 var(--space-lg);
}

.groups-panel__table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--font-size-sm);
}

.groups-panel__table th {
	border-bottom: 2px solid var(--color-bg);
	padding: var(--space-xs);
	color: var(--color-heading);
	font-family: var(--font-head);
	font-size: var(--font-size-sm);
	letter-spacing: 0.04em;
	text-align: left;
	text-transform: uppercase;
}

.groups-panel__table td {
	border-bottom: 1px solid var(--color-bg);
	padding: var(--space-xs);
	color: var(--color-text);
}

.groups-panel__table td:first-child {
	width: 2rem;
	color: var(--accent);
	font-family: var(--font-head);
}

/* Kadence's content.min.css loads after this file and out-specifies a single
   class: ".single-content h3" (class+element, 0-1-1) beats
   ".groups-panel__staff-heading" alone (0-1-0), and ".single-content
   .wp-block-group" (0-2-0) ties ".single-content .groups-panel__staff-row"
   (0-2-0) and wins on source order. The wrapper div carries both
   "entry-content" and "single-content" — stacking that compound (0-3-0)
   clears both. */
.entry-content.single-content .groups-panel__staff-heading {
	margin: 0 0 var(--space-md);
	font-size: var(--font-size-md);
}

.entry-content.single-content .groups-panel__staff-row {
	margin-bottom: var(--space-xs);
}

.groups-panel__staff-row > .wp-block-group__inner-container {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-xs) var(--space-sm);
}

.groups-panel__staff-label {
	flex-shrink: 0;
	margin: 0;
	border-radius: 999px;
	background: var(--accent);
	padding: 3px var(--space-sm);
	color: var(--color-white);
	font-size: var(--font-size-sm);
	font-weight: 700;
}

.groups-panel__staff-names {
	margin: 0;
	font-size: var(--font-size-sm);
}

@media (min-width: 480px) {
	.groups-tabs__tab {
		font-size: var(--font-size-md);
		padding: var(--space-sm) var(--space-md);
	}

	.groups-tabs__body {
		padding: var(--space-lg);
	}

	.groups-panel__icon {
		width: 4rem;
		height: 4rem;
	}

	.groups-panel__icon::after {
		width: 2rem;
		height: 2rem;
	}
}