/* ==========================================================================
   Kobra redesign — realizační tým.
   Enqueued on any page containing [staff_profile]; redesign.css supplies the
   palette, fonts and texture.

   CSS only. SportsPress renders each person as a name, a photo and a short
   details list — everything a card needs — so nothing is rebuilt. What was
   wrong was presentation: the details came through near-black on a dark page,
   the photo floated left of a heading that sat above it, and the two columns
   were painted with a background image pointing at an IP address that no
   longer answers.
   ========================================================================== */

/* ---------- Drop the dead background ----------
   The page's WPBakery custom CSS sets each column's background to
   `http://51.124.195.18/…/SMALL-ICE.jpg` — the old server's raw IP, which
   resolves to nothing here and, judging by the address, will not survive on
   production either. The card below brings its own surface, so the broken
   image and the 30px radius that framed it both go.

   Written with the class *and* an attribute match on the generated
   `vc_custom_…` names so it keeps working if WPBakery regenerates them: those
   class names change whenever the row is re-saved in the editor. */
.page .vc_row [class*="vc_custom_"] {
	background-image: none !important;
	border-radius: 0 !important;
}

/* ---------- The card ----------
   `.sportspress` is the wrapper the shortcode prints around each person. */
.page .wpb_text_column .sportspress {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	height: 100%;
	padding: 30px 26px 26px;
	border: 1px solid var(--kobra-line);
	border-radius: 4px;
	background-color: var(--kobra-navy);
	background-image: var(--kobra-ice-texture);
	background-repeat: repeat;
	text-align: center;
}

/* ---------- Photo ----------
   Splash floats it left, below a heading that spans the full width, so the
   name sat above a picture pushed into the corner. Un-floated and ordered
   first, it becomes the top of a card. Round, because a head-and-shoulders
   portrait crops well to a circle and it separates these two from the squad's
   square cards. */
.page .wpb_text_column .sportspress .sp-template-staff-photo {
	order: -1;
	float: none;
	width: 160px;
	height: 160px;
	margin: 0 0 18px;
	overflow: hidden;
	border: 2px solid var(--kobra-line);
	border-radius: 50%;
	background: var(--kobra-navy-2);
	line-height: 0;
}
.page .wpb_text_column .sportspress .sp-template-staff-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Faces sit in the upper half of a portrait; centring crops foreheads. */
	object-position: center 22%;
	border-radius: 50%;
}

/* ---------- Name and role ----------
   Both live in one `<h3>`, the role as a `<strong>` inside it, so they came
   out as one 30px run of text. The role is made a block above the name and
   given the eyebrow treatment used across the site. */
.page .wpb_text_column .sportspress h3.sp-staff-name {
	margin: 0;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--kobra-ice) !important;
	text-wrap: balance;
}
.page .wpb_text_column .sportspress .sp-staff-role {
	display: block;
	margin: 0 0 6px;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kobra-sky) !important;
}

/* ---------- Details ----------
   Two facts — nationality and team. Laid out as label over value, side by
   side, the same shape the player profile uses.

   The colours need !important: hockey.css paints `.st-label` and `.st-value`
   through selectors nine and ten classes long, and matching that would mean
   an eleven-class chain. Those rules carry no !important of their own, so one
   wins outright — the documented exception, same as the match page. */
.page .wpb_text_column .sportspress .sp-template-staff-details {
	width: 100%;
	margin: 20px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--kobra-line);
}
.page .wpb_text_column .sportspress .sp-staff-details {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 34px;
}
.page .wpb_text_column .sportspress .single-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 0;
	border: 0;
	background: transparent !important;
}
.page .wpb_text_column .sportspress .st-label {
	color: var(--kobra-mist) !important;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}
.page .wpb_text_column .sportspress .st-value {
	color: var(--kobra-ice) !important;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.15;
}

/* Splash's float-clearing div, now that nothing floats. */
.page .wpb_text_column .sportspress > .clearfix {
	display: none;
}

/* The two columns are equal height so the cards line up whatever the length
   of a name or role. */
.page .vc_row:has(.sportspress) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
.page .vc_row:has(.sportspress) > .wpb_column {
	display: flex;
}
.page .vc_row:has(.sportspress) > .wpb_column > .vc_column-inner,
.page .vc_row:has(.sportspress) .wpb_wrapper,
.page .vc_row:has(.sportspress) .wpb_text_column {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 600px) {
	.page .wpb_text_column .sportspress {
		padding: 24px 18px 22px;
	}
	.page .wpb_text_column .sportspress .sp-template-staff-photo {
		width: 130px;
		height: 130px;
	}
	.page .wpb_text_column .sportspress h3.sp-staff-name {
		font-size: 20px;
	}
}