/**
 * Homepage "Audio Software / TSC Rack" feature -- Phase 2B.2.
 *
 * Scope: ONLY the new tsc-audio-software Elementor container (published
 * manually per the Phase 2B.2 structural-change instructions -- verified
 * live before writing this file: elementor-element-6ca48e2 (outer),
 * elementor-element-7c46a7d (__content), elementor-element-7e21529
 * (__media), each carrying the expected CSS class) and the five existing
 * widgets moved into it (eyebrow, heading, divider, image, button -- same
 * Elementor element IDs as before the move, confirmed live). Nothing in
 * Shop by Category, the Hero, Featured Products, or any other section is
 * touched.
 *
 * Product-roadmap note: this is a single-product feature by design (TSC
 * Rack only, per the current constraint). The __content / __media split is
 * generic -- swapping the image or copy later needs no structural change,
 * and a second/third product would mean adding more instances of this same
 * two-column pattern, not redesigning this one.
 *
 * Enqueued after tsc-tokens only, same reasoning as hero.css/
 * shop-by-category.css: typography.css explicitly excludes the homepage.
 */

/* ---- Two-column shell ---- */

body.home .tsc-audio-software {
	align-items: center;
	gap: var(--tsc-space-8);
	padding-top: var(--tsc-space-6);
	padding-bottom: var(--tsc-space-6);
}

body.home .tsc-audio-software__content {
	flex: 0 1 45%;
	width: auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--tsc-space-4);
}

body.home .tsc-audio-software__media {
	flex: 0 1 55%;
	width: auto;
	padding: 0;
}

body.home .tsc-audio-software__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain; /* explicit safety net -- the widget's own default is `fill`,
	                         which would distort the image the moment its box stops
	                         matching the natural aspect ratio; contain guarantees no
	                         cropping or stretching regardless of column width. */
}

/*
 * Mobile: force a clean full-width stack rather than trusting the 45%/55%
 * split to naturally wrap well at narrow widths.
 *
 * BUG FOUND + FIXED during Phase 2B.2 final QA: the first version of this
 * rule set flex-direction:column and flex-basis:100% but left Elementor's
 * own default `flex-wrap: wrap` untouched. Live-verified consequence:
 * flex-direction:column + flex-wrap:wrap does NOT mean "stack forever" --
 * if the container's height is constrained shorter than the stacked
 * content's total height, wrap kicks in along the CROSS axis, which in
 * column mode is horizontal -- producing a second side-by-side column
 * instead of continuing the vertical stack (confirmed live: content and
 * media rendered side-by-side at 400px, each 340px wide, causing real
 * horizontal overflow, 742px content width in a 400px viewport).
 * `flex-wrap: nowrap` forces the intended single-column stack regardless
 * of container height. Live-verified fix, both with and without
 * !important -- normal specificity is sufficient here, no !important
 * needed.
 */
@media (max-width: 767px) {
	body.home .tsc-audio-software {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: var(--tsc-space-6);
	}

	body.home .tsc-audio-software__content,
	body.home .tsc-audio-software__media {
		flex: 1 1 100%;
		width: 100%;
	}
}

/* ---- Typography: Oswald -> Inter / Inter Display ---- */

body.home .tsc-audio-software .elementor-element-0a1edf2 .elementor-heading-title {
	margin: 0;
	text-align: left;
	font-family: var(--tsc-font-body);
	font-size: var(--tsc-fs-caption);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tsc-text-muted-light);
}

/*
 * Inter Display, weight 600 -- same "section heading" convention already
 * established for Shop by Category's heading (documented in tokens.css:
 * Inter Display's 600 weight is reserved for section headings, 700 for
 * hero/display only), kept consistent here since this is the equivalent
 * heading role one section down the page.
 */
body.home .tsc-audio-software .elementor-element-b0aadd7 .elementor-heading-title {
	margin: 0;
	text-align: left;
	font-family: var(--tsc-font-display);
	font-weight: 600;
	font-size: var(--tsc-fs-h2);
	line-height: var(--tsc-lh-heading);
	letter-spacing: normal;
	text-transform: uppercase;
	color: var(--tsc-text-light);
}

/* Divider: was centered under a centered heading; left-align to match the
   new left-aligned text column. */
body.home .tsc-audio-software .elementor-element-8c86617 .elementor-divider {
	text-align: left;
	justify-content: flex-start;
}

body.home .tsc-audio-software .elementor-element-8c86617 .elementor-divider-separator {
	margin-left: 0;
	margin-right: auto;
}

/*
 * CTA: same flat, square, token-driven treatment already established for
 * the hero's CTA (rest: --tsc-bg/--tsc-text, hover/focus: --tsc-accent/
 * --tsc-text-on-accent) -- reused deliberately for a consistent
 * interactive-element language across the page, not reinvented here.
 * `elementor-align-center` (Elementor's own class on the button widget)
 * centers the button wrapper; overridden to left, matching the column.
 */
body.home .tsc-audio-software .elementor-element-7f3c2b7.elementor-align-center {
	text-align: left;
}

body.home .tsc-audio-software .elementor-element-7f3c2b7 .elementor-button-wrapper {
	justify-content: flex-start;
}

body.home .tsc-audio-software .elementor-element-7f3c2b7 .elementor-button {
	display: inline-block;
	padding: var(--tsc-space-4) var(--tsc-space-5);
	border: 0;
	border-radius: var(--tsc-radius-sm);
	font-family: var(--tsc-font-body);
	font-size: var(--tsc-fs-body);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tsc-text);
	background-color: var(--tsc-bg);
}

@media (prefers-reduced-motion: no-preference) {
	body.home .tsc-audio-software .elementor-element-7f3c2b7 .elementor-button {
		transition: background-color 160ms ease, color 160ms ease;
	}
}

body.home .tsc-audio-software .elementor-element-7f3c2b7 .elementor-button:hover,
body.home .tsc-audio-software .elementor-element-7f3c2b7 .elementor-button:focus-visible {
	background-color: var(--tsc-accent);
	color: var(--tsc-text-on-accent);
}

body.home .tsc-audio-software .elementor-element-7f3c2b7 .elementor-button:focus-visible {
	outline: 2px solid var(--tsc-accent);
	outline-offset: 2px;
}