/*
 * Про Softex.
 *
 * Most of the page is built from components that already exist — the section
 * heading, the tile grid, the figures row, the "about" split. Only the opening
 * screen, the principle cards and the team row are new, so only they are here.
 */

/* Padding rather than margin: WordPress zeroes the top margin of the first
   child of a block group, which this is. Same note as article.css. */
.sx-about-page {
	padding-top: var( --wp--preset--spacing--50 );
}

/* ---- Hero ---- */

/* Only the space under it. The grid itself is the shared one — this rule used
   to declare a single column here, and since this file loads after
   home-sections.css it quietly won: the art column had no width to be in and
   the cube vanished. */
.sx-about-hero {
	margin-bottom: var( --wp--preset--spacing--60 );
}

.sx-about-hero__title {
	margin: 10px 0 16px;
	font-size: var( --sx-title-page );
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.sx-about-hero__lead {
	margin: 0;
	max-width: 620px;
	color: var( --sx-text-secondary );
	font-size: 1.0625rem;
	line-height: 1.6;
}

.sx-about-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin-top: 28px;
}

.sx-about-hero__cta {
	padding-inline: 26px;
	border-radius: var( --sx-radius-btn );
	background: var( --sx-brand );
	color: var( --sx-white );
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.sx-about-hero__cta:hover {
	background: var( --sx-brand-hover );
	color: var( --sx-white );
}

/* The secondary action is a link, not a second button: two buttons of equal
   weight side by side leave the visitor choosing between them instead of
   following the one that matters. */
.sx-about-hero__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var( --sx-text );
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.sx-about-hero__link span {
	transition: transform var( --sx-transition-fast ) var( --sx-ease );
}

.sx-about-hero__link:hover {
	color: var( --sx-brand-text );
}

.sx-about-hero__link:hover span {
	transform: translateX( 4px );
}

/* The layout and the cube's size are shared with the Проєкти and blog headers
   — see "Page headers" in home-sections.css. This page's cube stays the
   largest of the three, but now because its text block is the tallest rather
   than because a number here says so. */

/* ---- Хто ми ---- */

/*
 * The picture fills its column instead of keeping its own proportions. The
 * homepage version of this block sits beside a short paragraph and matches it
 * well enough; here the column runs to two paragraphs and a list of three
 * statuses, and a 3:2 photograph centred against that left a band of nothing
 * above it and another below.
 *
 * Taken out of the flow so it cannot push the row taller than the text — the
 * text is what decides the height, and the photograph follows.
 */
/*
 * The text in this column is written in the page editor, so it arrives as plain
 * headings, paragraphs and list items with none of the theme's own classes on
 * them. These rules dress those elements directly — which also means an editor
 * can add a third paragraph or a fourth status and it comes out styled.
 */
.sx-about__text--page > h2 {
	margin: 0 0 0;
	max-width: 18ch;
	font-size: var( --sx-title-section );
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.sx-about__text--page > p {
	margin: 20px 0 0;
	max-width: 60ch;
	color: var( --sx-text-secondary );
	line-height: 1.65;
}

.sx-about__text--page > ul {
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 14px;
}

.sx-about__text--page > ul li {
	position: relative;
	padding-left: 32px;
	max-width: 62ch;
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* The kit's circled tick, as a background rather than an inline icon: the list
   comes from the editor, and there is nowhere in it to put an <svg>. The colour
   is written into the file because a data URI cannot read currentColor. */
.sx-about__text--page > ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 20px;
	height: 20px;
	background: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23e32621" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>' ) no-repeat center / contain;
}

.sx-about--fill {
	align-items: stretch;
}

.sx-about--fill .sx-about__art {
	position: relative;
	min-height: 320px;
}

/*
 * Off-centre on purpose. The column is taller than it is wide, so a landscape
 * photograph loses its left and right edges — and centred, what it lost was the
 * logo on the wall, which is the one thing in the picture that says whose office
 * this is.
 */
.sx-about--fill .sx-about__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 64% center;
}

/* ---- Figures ---- */

/*
 * Two by two on a phone, which is what the brief asks for here. The homepage
 * row drops to a single column below 520px, and that stays as it is — this
 * override is scoped to this page rather than changed globally. To fit two per
 * row the icon moves above the number instead of beside it.
 */
@media ( max-width: 520px ) {
	.sx-about-figures .sx-stats {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.sx-about-figures .sx-stats__item {
		padding: 16px 14px;
	}

	/*
	 * The icon above the number, not beside it.
	 *
	 * This was already the intent, but the flex properties sat on the item,
	 * which is a plain block — the flexing lives on the term (see the note in
	 * home-sections.css). So the icon stayed on the line and took 42px out of
	 * a 170px cell, leaving "нових клієнтів за рекомендацією" about a hundred
	 * pixels to wrap into. It ran to three lines and past the divider.
	 */
	.sx-about-figures .sx-stats__num {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		/* Two to a row means half the width the homepage figure gets, and
		   "10+ років" is the longest of the four — at 1.75rem it broke over
		   two lines on a 360px screen while the other three sat on one. */
		font-size: 1.5rem;
	}

	/* The indent kept the label under the figure while the icon was beside
	   it. With the icon above, there is nothing to clear. */
	.sx-about-figures .sx-stats__label {
		padding-inline-start: 0;
	}

	/* Vertical rule between the pair, horizontal between the rows. */
	.sx-about-figures .sx-stats__item:nth-child( odd )::before,
	.sx-about-figures .sx-stats__item + .sx-stats__item::after {
		content: none;
	}

	.sx-about-figures .sx-stats__item:nth-child( even )::before {
		content: "";
		position: absolute;
		inset-inline-start: 0;
		top: 20%;
		height: 60%;
		border-inline-start: 1px solid var( --sx-border );
	}

	.sx-about-figures .sx-stats__item:nth-child( n + 3 )::after {
		content: "";
		position: absolute;
		top: 0;
		inset-inline: 10%;
		border-top: 1px solid var( --sx-border );
	}
}

/* ---- Principles ---- */

/*
 * One colour for all four icons, as the kit requires. They are equal in
 * weight, and a different colour per card would rank them.
 */
.sx-principle {
	cursor: default;
}

.sx-principle__icon {
	display: inline-flex;
	color: var( --sx-brand-text );
}

.sx-principle__icon svg {
	width: 28px;
	height: 28px;
}

/* ---- Team ---- */

/*
 * A row that scrolls sideways rather than wrapping, driven by the same arrows
 * the testimonials use. Cards keep one width at every screen size, so a team of
 * five and a team of nine look like the same section — a wrapping grid leaves
 * the last row half empty at some counts.
 *
 * No frame and no card behind the picture. The portraits were shot against one
 * backdrop, so a border and a white panel around each only drew a second edge a
 * few pixels outside the one the photograph already has.
 */
.sx-team__list {
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

/* The arrows are the control here; a scrollbar under the row would be a second
   one saying the same thing. Swipe and keyboard still work without it. */
.sx-team__list::-webkit-scrollbar {
	display: none;
}

.sx-team__item {
	flex: 0 0 240px;
	scroll-snap-align: start;
}

/* The frame holds the ratio, not the photograph: WordPress writes width and
   height attributes on the image, and the height attribute outranks an
   aspect-ratio set on the image itself. */
.sx-team__photo {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var( --sx-radius-lg );
	background: var( --sx-surface );
}

.sx-team__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sx-team__body {
	display: block;
	padding: 14px 2px 0;
}

.sx-team__name {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

.sx-team__role {
	display: block;
	margin-top: 4px;
	color: var( --sx-brand-text );
	font-size: 0.8125rem;
	font-weight: 600;
}

.sx-team__text {
	display: block;
	margin-top: 10px;
	color: var( --sx-text-secondary );
	font-size: 0.875rem;
	line-height: 1.5;
}

/* ---- The join-us card ----
   Beside the scrolling row rather than in it, so it stays put while the
   portraits move past. The only panel here with a background, which is what
   marks it as the one thing on the row that is not a person. */
.sx-team__row {
	display: flex;
	align-items: stretch;
	gap: 24px;
}

.sx-team__row .sx-team__list {
	flex: 1 1 auto;
	min-width: 0;
}

.sx-team__join {
	flex: 0 0 260px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 14px;
	padding: 28px 24px;
	border-radius: var( --sx-radius-lg );
	background: var( --sx-surface );
}

/* Under the row on a phone: 260px taken out of a 390px screen would leave the
   portraits a sliver. */
@media ( max-width: 780px ) {
	.sx-team__row {
		flex-direction: column;
	}

	.sx-team__join {
		flex: 0 0 auto;
	}
}

.sx-team__join-icon {
	display: inline-flex;
	color: var( --sx-brand-text );
}

.sx-team__join-icon svg {
	width: 32px;
	height: 32px;
}

.sx-team__join-text {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}

.sx-team__join-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding-inline: 18px;
	border-radius: var( --sx-radius-btn );
	background: var( --sx-brand );
	color: var( --sx-white );
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color var( --sx-transition-fast ) var( --sx-ease );
}

.sx-team__join-btn:hover {
	background: var( --sx-brand-hover );
	color: var( --sx-white );
}

@media ( max-width: 600px ) {
	.sx-team__item {
		flex-basis: 78vw;
	}
}