/* ============================================
   Block Styles: Card
   ============================================ */

.is-style-multitrade-card {
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--card-border-radius);
	box-shadow: var(--wp--custom--card-shadow);
	overflow: hidden;
	transition: box-shadow var(--wp--custom--transition-speed) ease;
}

.is-style-multitrade-card-hover {
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--card-border-radius);
	box-shadow: var(--wp--custom--card-shadow);
	overflow: hidden;
	transition: box-shadow var(--wp--custom--transition-speed) ease,
		transform var(--wp--custom--transition-speed) ease;
}

.is-style-multitrade-card-hover:hover {
	box-shadow: var(--wp--preset--shadow--card-hover);
	transform: translateY(-2px);
}

/* ============================================
   Block Styles: Buttons
   ============================================ */

.is-style-multitrade-outline-primary .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.is-style-multitrade-outline-primary .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* ============================================
   Block Styles: Images
   ============================================ */

.is-style-multitrade-rounded img {
	border-radius: var(--wp--custom--card-border-radius);
}

/* ============================================
   Block Styles: Category Grid
   ============================================ */

.is-style-multitrade-category-grid > .wp-block-column {
	border-radius: var(--wp--custom--card-border-radius);
	overflow: hidden;
	transition: transform var(--wp--custom--transition-speed) ease;
}

.is-style-multitrade-category-grid > .wp-block-column:hover {
	transform: scale(1.02);
}

/* ============================================
   UX-041: Category Grid Legibility
   Dark bottom gradient + text-shadow for consistent white text readability.
   ============================================ */

.multitrade-category-grid .wp-block-cover {
	overflow: hidden;
	transition: transform var(--wp--custom--transition-speed) ease;
}

.multitrade-category-grid .wp-block-cover:hover {
	transform: scale(1.03);
}

/* Bottom-focused gradient overlay for text readability */
.multitrade-category-grid .wp-block-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.15) 40%,
		rgba(0, 0, 0, 0.55) 100%
	);
	z-index: 1;
	border-radius: 8px;
	pointer-events: none;
}

/* Lift text above gradient */
.multitrade-category-grid .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: 140px;
}

/* Text shadow for extra contrast */
.multitrade-category-grid .wp-block-cover h3 {
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.4);
}

.multitrade-category-grid .wp-block-cover h3 a {
	color: #fff;
	text-decoration: none;
}

.multitrade-category-grid .wp-block-cover h3 a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ============================================
   Block Styles: Buttons — Primary & Secondary (FSE-001)
   ============================================ */

/* ============================================
   Block Styles: Group — Soft Panel (FSE-001)
   ============================================ */

.is-style-multitrade-soft-panel {
	background: var(--wp--preset--color--secondary-background);
	border-radius: var(--wp--custom--card-border-radius);
	padding: var(--wp--preset--spacing--50);
}

/* ============================================
   Block Styles: Image — Shadow (FSE-001)
   ============================================ */

.is-style-multitrade-shadow img {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	border-radius: var(--wp--custom--card-border-radius);
	background: #f0f0f0;
}

/* ============================================
   Block Styles: Columns — Feature Row (FSE-001)
   ============================================ */

.is-style-multitrade-feature-row > .wp-block-column {
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--card-border-radius);
	box-shadow: var(--wp--custom--card-shadow);
	padding: var(--wp--preset--spacing--50);
	text-align: center;
	transition: box-shadow var(--wp--custom--transition-speed) ease,
		transform var(--wp--custom--transition-speed) ease;
}

.is-style-multitrade-feature-row > .wp-block-column:hover {
	box-shadow: var(--wp--preset--shadow--card-hover);
	transform: translateY(-2px);
}

/* ============================================
   Block Styles: Columns — Icon List (FSE-001)
   ============================================ */

.is-style-multitrade-icon-list {
	gap: var(--wp--preset--spacing--40) !important;
}

.is-style-multitrade-icon-list > .wp-block-column {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--35);
	padding: var(--wp--preset--spacing--40);
	border-left: 3px solid var(--wp--preset--color--tertiary);
}

/* ============================================
   Block Styles: Navigation — Pill & Compact (FSE-001)
   ============================================ */

.is-style-multitrade-pill .wp-block-navigation-item a {
	background: var(--wp--preset--color--secondary-background);
	border-radius: 20px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.is-style-multitrade-pill .wp-block-navigation-item a:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.is-style-multitrade-compact .wp-block-navigation-item a {
	padding: 0.2rem var(--wp--preset--spacing--30);
	font-size: 0.8rem;
	letter-spacing: 0;
}