/**
 * "O nás" — page-o-nas.php. Built from the design system, no mockup exists.
 * See DESIGN-SYSTEM.md §7. Category tiles and the stats band come from
 * components/category-card.css and components/stats-band.css.
 *
 * @package Geras_Custom
 */

/* ---------------------------------------------------------------
 * 1. Feature rows — photo beside copy, sides alternating
 * ------------------------------------------------------------- */

.about-rows {
	display: grid;
	gap: var( --space-88 );
}

.about-row {
	display: grid;
	grid-template-columns: .82fr 1.18fr;
	align-items: center;
	gap: var( --space-56 );
}

/* Mirrored row: the copy keeps the wider column, the photo the narrower one. */
.about-row--reverse {
	grid-template-columns: 1.18fr .82fr;
}

.about-row--reverse .about-row__media {
	order: 2;
}

/* A row the editor gave no photo runs full width as a closing statement. */
.about-row--full {
	grid-template-columns: 1fr;
}

.about-row--full .about-row__copy {
	max-width: var( --measure-wide );
	margin: 0 auto;
}

.about-row__media {
	display: flex;
	justify-content: center;
}

/* The archive photos are cut-outs on white, so they need a white card under
 * them — dropped straight on the cream page they would read as a white box. */
.about-row__frame {
	position: relative;
	width: 100%;
	max-width: var( --space-320 );
	padding: var( --space-14 );
	border-radius: var( --radius-28 );
	border: 1px solid var( --c-cocoa-a08 );
	background: var( --surface-raised );
	box-shadow: var( --shadow-card-alt );
	transition: transform var( --transition-slow ), box-shadow var( --transition-slow );
}

.about-row__frame:hover {
	transform: translateY( -7px );
	box-shadow: var( --shadow-float );
}

.about-row__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --radius-18 );
}

.about-row__copy {
	max-width: var( --measure-base );
}

.about-row__num {
	display: inline-block;
	padding: var( --space-5 ) var( --space-12 );
	border-radius: var( --radius-pill );
	background: var( --c-honey-100 );
	box-shadow: var( --ring-honey-soft );
	font-family: var( --font-display );
	font-size: var( --fs-13 );
	font-weight: var( --fw-620 );
	letter-spacing: var( --ls-label );
	color: var( --color-accent-deep );
}

.about-row__text {
	margin-top: var( --space-18 );
	font-size: var( --fs-17 );
	line-height: var( --lh-copy );
	color: var( --color-text );
}

.about-row__text p + p {
	margin-top: var( --space-16 );
}

/* ---------------------------------------------------------------
 * 2. Sortiment — the four category tiles (component supplies the tile)
 * ------------------------------------------------------------- */

.about-intro {
	max-width: var( --measure-wide );
	margin: 0 auto var( --space-52 );
	text-align: center;
}

.about-intro .section-label {
	justify-content: center;
}

.about-intro .section-intro {
	margin-top: var( --space-20 );
	font-size: var( --fs-18-5 );
}

.about-intro .section-intro p {
	margin: 0;
}

.about-sortiment__grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: var( --space-26 );
}

/* ---------------------------------------------------------------
 * 3. Closing contact block — card internals live in contact-cta.css
 * ------------------------------------------------------------- */

.about-contact {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	align-items: center;
	gap: var( --space-56 );
}

.about-contact__copy .section-intro {
	margin: var( --space-20 ) 0 var( --space-30 );
	font-size: var( --fs-18-5 );
}

/* ---------------------------------------------------------------
 * Mobile — derived per responsive.md mode 3 (no mockup ships @media)
 * ------------------------------------------------------------- */

/* Tablet: the tile's 172px photo does not fit four across, per DESIGN-SYSTEM.md §4. */
@media ( max-width: 1023px ) {

	.about-sortiment__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 767px ) {

	.about-rows {
		gap: var( --space-56 );
	}

	.about-row,
	.about-contact {
		grid-template-columns: 1fr;
		gap: var( --space-30 );
	}

	.about-row--reverse .about-row__media {
		order: 0;
	}

	.about-sortiment__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 479px ) {

	.about-sortiment__grid {
		grid-template-columns: 1fr;
	}
}