/**
 * GENE Blocks — Section Builder Styles
 *
 * These classes are applied to core blocks generated by Section Builder.
 * The blocks remain fully editable in the editor — this CSS only adds
 * visual polish on top.
 *
 * @package GENE Blocks
 */

/* =========================================================================
   Shared design tokens
   ========================================================================= */

:root {
	--gene-radius: 16px;
	--gene-radius-sm: 12px;
	--gene-radius-pill: 100px;
	--gene-transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--gene-shadow-hover: 0 12px 32px rgba(45, 43, 40, 0.1);
}

/* =========================================================================
   HERO VARIANTS
   ========================================================================= */

/* Dark hero — dramatic dark background with subtle glow */
.gene-hero--dark {
	background: #1A1917 !important;
	position: relative;
	overflow: hidden;
}

.gene-hero--dark::before {
	content: '';
	position: absolute;
	top: -100px;
	right: -100px;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(124, 106, 232, 0.12) 0%, transparent 70%);
	pointer-events: none;
}

.gene-hero--dark::after {
	content: '';
	position: absolute;
	bottom: -80px;
	left: -80px;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(242, 167, 179, 0.08) 0%, transparent 70%);
	pointer-events: none;
}

.gene-hero--dark > * {
	position: relative;
	z-index: 1;
}

.gene-hero--dark h1,
.gene-hero--dark h2,
.gene-hero--dark .wp-block-heading {
	color: #FAFAF8 !important;
}

.gene-hero--dark p {
	color: #B5B0A8 !important;
}

/* Gradient hero — pastel gradient background */
.gene-hero--gradient {
	background: linear-gradient(135deg, #F3F0FF 0%, #FFF0F3 50%, #FFF5EA 100%) !important;
	position: relative;
}

/* Split hero — image + text side by side */
.gene-hero--split .wp-block-image img {
	border-radius: var(--gene-radius) !important;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* =========================================================================
   TAGS / LABELS
   ========================================================================= */

.gene-tag {
	display: inline-block !important;
	padding: 4px 16px !important;
	background: rgba(124, 106, 232, 0.15) !important;
	color: #7C6AE8 !important;
	font-size: 0.75rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	border-radius: var(--gene-radius-pill) !important;
	width: fit-content !important;
}

.gene-hero--dark .gene-tag {
	background: rgba(124, 106, 232, 0.2) !important;
	color: #B8A9E8 !important;
}

/* =========================================================================
   STATS BAR
   ========================================================================= */

.gene-stats {
	margin-top: 1.5rem !important;
}

.gene-stats .wp-block-column {
	border-right: 1px solid rgba(232, 229, 223, 0.15);
	padding-right: 1.5rem !important;
}

.gene-stats .wp-block-column:last-child {
	border-right: none;
	padding-right: 0 !important;
}

.gene-stats .wp-block-heading {
	font-size: 1.5rem !important;
	font-weight: 600 !important;
	color: #F4C08E !important;
	margin-bottom: 0 !important;
	line-height: 1.2 !important;
}

.gene-hero--dark .gene-stats .wp-block-heading {
	color: #F4C08E !important;
}

.gene-stats p {
	font-size: 0.75rem !important;
	color: #8A8680 !important;
	margin-top: 2px !important;
}

/* =========================================================================
   SERVICE / FEATURE CARDS
   ========================================================================= */

/* Elevated card style */
.gene-card-elevated {
	background: #FFFFFF !important;
	border: 0.5px solid #E8E5DF !important;
	border-radius: var(--gene-radius) !important;
	padding: 2rem 1.5rem !important;
	transition: transform var(--gene-transition), box-shadow var(--gene-transition) !important;
	position: relative !important;
	overflow: hidden !important;
}

.gene-card-elevated:hover {
	transform: translateY(-4px) !important;
	box-shadow: var(--gene-shadow-hover) !important;
}

/* Accent line at bottom of card */
.gene-card-elevated::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--gene-card-accent, var(--gene-accent, #7C6AE8));
	opacity: 0;
	transition: opacity var(--gene-transition);
}

.gene-card-elevated:hover::after {
	opacity: 1;
}

/* Card accent colors */
.gene-card--pink { --gene-card-accent: #F2A7B3; }
.gene-card--mint { --gene-card-accent: #7DD4B0; }
.gene-card--peach { --gene-card-accent: #F4C08E; }
.gene-card--lavender { --gene-card-accent: #B8A9E8; }
.gene-card--accent { --gene-card-accent: #7C6AE8; }

/* Icon wrapper inside cards */
.gene-icon-wrap {
	width: 48px !important;
	height: 48px !important;
	border-radius: var(--gene-radius-sm) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 1.5rem !important;
	margin-bottom: 1rem !important;
}

.gene-icon-wrap--pink { background: #FFF0F3 !important; }
.gene-icon-wrap--mint { background: #EDFAF3 !important; }
.gene-icon-wrap--peach { background: #FFF5EA !important; }
.gene-icon-wrap--lavender { background: #F3F0FF !important; }

/* Price tag in cards */
.gene-price-tag {
	color: #7C6AE8 !important;
	font-weight: 500 !important;
	font-size: 0.875rem !important;
	margin-top: 0.75rem !important;
}

/* =========================================================================
   TESTIMONIAL CARDS
   ========================================================================= */

.gene-testimonial {
	background: #FFFFFF !important;
	border: 0.5px solid #E8E5DF !important;
	border-radius: var(--gene-radius) !important;
	padding: 2rem 1.5rem !important;
	position: relative !important;
}

.gene-testimonial::before {
	content: '"';
	position: absolute;
	top: 16px;
	left: 20px;
	font-size: 3rem;
	line-height: 1;
	color: #E8E4FF;
	font-family: Georgia, serif;
}

.gene-testimonial blockquote,
.gene-testimonial .wp-block-quote {
	border-left: none !important;
	padding-left: 0 !important;
	font-style: italic !important;
}

/* Star rating row */
.gene-stars {
	color: #F4C08E !important;
	font-size: 0.875rem !important;
	letter-spacing: 2px !important;
	margin-bottom: 0.5rem !important;
}

/* =========================================================================
   TEAM MEMBER CARDS
   ========================================================================= */

.gene-team-member {
	text-align: center !important;
	padding: 2rem 1.5rem !important;
}

.gene-team-member .wp-block-image img {
	border-radius: 50% !important;
	width: 120px !important;
	height: 120px !important;
	object-fit: cover !important;
	border: 3px solid #F3F0FF !important;
	margin-bottom: 1rem !important;
}

.gene-team-member .wp-block-social-links {
	justify-content: center !important;
	margin-top: 0.75rem !important;
}

/* =========================================================================
   CTA SECTIONS
   ========================================================================= */

.gene-cta--bold {
	background: #7C6AE8 !important;
	position: relative;
	overflow: hidden;
}

.gene-cta--bold::before {
	content: '';
	position: absolute;
	top: -50px;
	right: -50px;
	width: 250px;
	height: 250px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
	pointer-events: none;
}

.gene-cta--bold h2,
.gene-cta--bold .wp-block-heading {
	color: #FFFFFF !important;
}

.gene-cta--bold p {
	color: rgba(255, 255, 255, 0.8) !important;
}

.gene-cta--bold .wp-block-button__link {
	background: #FFFFFF !important;
	color: #7C6AE8 !important;
}

/* Subtle CTA */
.gene-cta--subtle {
	border: 1.5px solid #E8E5DF !important;
	border-radius: var(--gene-radius) !important;
}

/* =========================================================================
   MENU / PRICING LIST
   ========================================================================= */

.gene-menu-item {
	display: flex !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
	padding: 1.25rem 0 !important;
	border-bottom: 1px solid #F3F1ED !important;
}

.gene-menu-item:last-child {
	border-bottom: none !important;
}

.gene-menu-price {
	font-family: Georgia, serif !important;
	font-size: 1.25rem !important;
	font-weight: 600 !important;
	color: #7C6AE8 !important;
	white-space: nowrap !important;
}

/* Menu card with image */
.gene-menu-card {
	background: #FFFFFF !important;
	border: 0.5px solid #E8E5DF !important;
	border-radius: var(--gene-radius) !important;
	overflow: hidden !important;
	transition: transform var(--gene-transition), box-shadow var(--gene-transition) !important;
}

.gene-menu-card:hover {
	transform: translateY(-4px) !important;
	box-shadow: var(--gene-shadow-hover) !important;
}

.gene-menu-card .wp-block-image img {
	border-radius: 0 !important;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.gene-menu-card .wp-block-group {
	padding: 1.25rem !important;
}

/* =========================================================================
   SECTION HEADERS
   ========================================================================= */

.gene-section-header {
	text-align: center !important;
	margin-bottom: 2.5rem !important;
}

.gene-section-header .wp-block-heading {
	margin-bottom: 0.5rem !important;
}

.gene-section-header p {
	color: #8A8680 !important;
	max-width: 480px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Decorative line under section heading (palette-driven) */
.gene-section-header::after {
	content: '';
	display: block;
	width: 48px;
	height: 3px;
	background: var(--gene-accent, #7C6AE8);
	border-radius: 2px;
	margin: 1.25rem auto 0;
}

/* =========================================================================
   UTILITY
   ========================================================================= */

.gene-rounded-img img {
	border-radius: var(--gene-radius) !important;
}

/* Background overlay for image sections */
.gene-overlay {
	position: relative !important;
}

.gene-overlay::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(26, 25, 23, 0.6);
	pointer-events: none;
	z-index: 0;
}

.gene-overlay > * {
	position: relative;
	z-index: 1;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 768px) {
	.gene-stats .wp-block-column {
		border-right: none;
		border-bottom: 1px solid rgba(232, 229, 223, 0.15);
		padding-bottom: 1rem !important;
		padding-right: 0 !important;
		margin-bottom: 1rem !important;
	}

	.gene-stats .wp-block-column:last-child {
		border-bottom: none;
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
	}
}

/* =========================================================================
   ACCESSIBILITY
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.gene-card-elevated,
	.gene-menu-card {
		transition: none !important;
	}

	.gene-card-elevated:hover,
	.gene-menu-card:hover {
		transform: none !important;
	}
}

/* =========================================================================
   CTA — LIST VARIANT (cafe)
   Horizontal banner: heading/text left (65%), button right (35%).
   Block markup already provides the 65/35 columns and inline colors;
   this only adds polish and a mobile stack.
   ========================================================================= */

.gene-cta--list {
	border-radius: var(--gene-radius) !important;
	overflow: hidden !important;
}

.gene-cta--list .wp-block-button__link {
	border-radius: var(--gene-radius-pill) !important;
}

@media (max-width: 781px) {
	.gene-cta--list .wp-block-columns {
		gap: 1.25rem !important;
	}

	.gene-cta--list .wp-block-buttons {
		justify-content: flex-start !important;
	}
}

/* =========================================================================
   TESTIMONIAL — LIST VARIANT (cafe)
   Stacked, full-width quotes on a soft band rather than a boxed card.
   Overrides the boxed .gene-testimonial look while keeping the quote mark.
   ========================================================================= */

.gene-testimonial--list {
	border: none !important;
	background: transparent !important;
	border-radius: var(--gene-radius) !important;
	padding: 2rem 2.5rem !important;
}

.gene-testimonial--list::before {
	top: 8px;
	left: 24px;
	font-size: 3.5rem;
	color: rgba(244, 192, 142, 0.45);
}

.gene-testimonial--list .gene-stars {
	position: relative;
	z-index: 1;
}

/* =========================================================================
   TEAM MEMBER — LIST VARIANT (cafe)
   Image left, text right. Cancels the base centered/circular treatment.
   ========================================================================= */

.gene-team-member--list {
	text-align: left !important;
	padding: 1rem 0 !important;
}

.gene-team-member--list .wp-block-image img {
	border-radius: var(--gene-radius) !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: cover !important;
	border: none !important;
	margin-bottom: 0 !important;
}

.gene-team-member--list .gene-price-tag {
	margin-top: 0.25rem !important;
}

@media (max-width: 781px) {
	.gene-team-member--list {
		text-align: center !important;
	}
}

/* =========================================================================
   TEAM MEMBER — GRID VARIANT (cafe)
   Larger rounded portraits in a centered grid. Cancels the base circular
   120px portrait so the full-width gene-rounded-img can breathe.
   ========================================================================= */

.gene-team-member--grid {
	text-align: center !important;
	padding: 0 !important;
}

.gene-team-member--grid .wp-block-image img {
	border-radius: var(--gene-radius) !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 5;
	object-fit: cover !important;
	border: none !important;
	margin-bottom: 1rem !important;
}

/* =========================================================================
   v2 — DEFAULT IMAGERY (画像をデフォルトで各セクションに)
   ========================================================================= */

/* カード上部の全幅画像（gene-card-elevated は padding/overflow:hidden 前提で端まで） */
.gene-card--media {
	padding-top: 0 !important;
}

.gene-card-img img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	margin: 0 0 1.25rem 0 !important;
	border-radius: 0 !important;
}

/* リスト行などの小サムネ */
.gene-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--gene-radius-sm) !important;
}

/* 証言の顔アバター */
.gene-quote-author {
	gap: 0.75rem !important;
	align-items: center !important;
	margin-top: 0.75rem !important;
}

.gene-quote-avatar img {
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
}

.gene-quote-meta {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
}

.gene-quote-name {
	margin: 0 !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
}

.gene-quote-role {
	margin: 0 !important;
	opacity: 0.7;
	line-height: 1.25 !important;
}

.gene-quote-text {
	margin: 0 0 0.6rem 0 !important;
}

/* CTA スプリットの画像 */
.gene-cta-split-img img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--gene-radius) !important;
}

/* ヒーローの横長バナー画像 */
.gene-hero-banner img {
	display: block;
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	border-radius: var(--gene-radius) !important;
	margin-top: 2.5rem !important;
}

/* QA の縦長画像（左カラム） */
.gene-qa-img img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--gene-radius) !important;
}

/* menu 上部の細い装飾バナー */
.gene-menu-banner img {
	display: block;
	width: 100%;
	aspect-ratio: 24 / 7;
	object-fit: cover;
	border-radius: var(--gene-radius) !important;
	margin-bottom: 2.5rem !important;
}

/* menu(list) の正方形サムネ */
.gene-menu-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--gene-radius-sm) !important;
}

/* =========================================================================
   v2 — CAROUSEL style (CSS scroll-snap horizontal slider, no JS)
   The template wraps items in a .gene-carousel group; children become
   snap-aligned slides that scroll horizontally. Accessible + degrades to a
   plain scroll if anything fails.
   ========================================================================= */

.gene-carousel {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 1.5rem !important;
	overflow-x: auto !important;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 1rem;
	padding-bottom: 1rem !important;
	-webkit-overflow-scrolling: touch;
}

.gene-carousel > * {
	flex: 0 0 clamp(260px, 78%, 340px) !important;
	scroll-snap-align: start;
	margin-top: 0 !important;
}

.gene-carousel::-webkit-scrollbar {
	height: 8px;
}

.gene-carousel::-webkit-scrollbar-thumb {
	background: var(--gene-accent-border, #dcdcdc);
	border-radius: 4px;
}

/* =========================================================================
   v2 — MASONRY style (CSS multi-column; items keep natural height)
   The template wraps items in a .gene-masonry group.
   ========================================================================= */

.gene-masonry {
	column-count: 3;
	column-gap: 1.5rem;
}

.gene-masonry > * {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin: 0 0 1.5rem 0 !important;
	display: inline-block;
	width: 100%;
}

@media (min-width: 782px) and (max-width: 1080px) {
	.gene-masonry {
		column-count: 2;
	}
}

@media (max-width: 781px) {
	.gene-masonry {
		column-count: 1;
	}
	.gene-carousel > * {
		flex-basis: 85% !important;
	}
}

/* =========================================================================
   v2 — PREMIUM POLISH (ランディングページ級の質感)
   ダークヒーロー・ピルボタン・アイブロウ・装飾数字・カードの厚み。
   すべてパレット変数駆動（テーマのフォントはそのまま）。
   ========================================================================= */

/* --- ダークヒーロー: 暗背景＋アクセント発光＋薄いグリッド --- */
.gene-hero--spotlight {
	position: relative !important;
	overflow: hidden !important;
	background: #16171d !important;
	border-radius: var(--gene-radius) !important;
	color: #fff !important;
}

.gene-hero--spotlight::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(700px 420px at 78% 8%, rgba(var(--gene-accent-rgb, 79, 111, 168), 0.38), transparent 60%),
		radial-gradient(560px 380px at 8% 100%, rgba(var(--gene-accent-rgb, 79, 111, 168), 0.16), transparent 60%);
	pointer-events: none;
}

.gene-hero--spotlight::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.05;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.6) 1px, transparent 1px);
	background-size: 54px 54px;
	-webkit-mask-image: radial-gradient(circle at 50% 30%, #000, transparent 78%);
	mask-image: radial-gradient(circle at 50% 30%, #000, transparent 78%);
	pointer-events: none;
}

.gene-hero--spotlight > * {
	position: relative;
	z-index: 1;
}

.gene-hero--spotlight :where(h1, h2, h3, .wp-block-heading) {
	color: #fff !important;
}

.gene-hero--spotlight :where(p) {
	color: #cfcbc4 !important;
}

/* スポットライト内のアクセント文字（タグ等）は明るめに */
.gene-hero--spotlight .gene-accent-text {
	color: #fff !important;
	opacity: 0.92;
}

/* --- アイブロウ（枠線付きピルのラベル） --- */
.gene-eyebrow {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5em !important;
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--gene-accent) !important;
	background: var(--gene-accent-soft) !important;
	border: 1px solid var(--gene-accent-border) !important;
	padding: 0.5em 1.1em !important;
	border-radius: var(--gene-radius-pill) !important;
	width: fit-content !important;
}

.gene-hero--spotlight .gene-eyebrow {
	color: #fff !important;
	background: rgba(var(--gene-accent-rgb, 79, 111, 168), 0.22) !important;
	border-color: rgba(255, 255, 255, 0.18) !important;
}

/* --- ピル型ボタン（影付き・ホバーで浮く） --- */
.gene-btn-accent .wp-block-button__link {
	border-radius: var(--gene-radius-pill) !important;
	padding: 0.85em 1.7em !important;
	font-weight: 700 !important;
	box-shadow: 0 10px 26px -10px rgba(var(--gene-accent-rgb, 79, 111, 168), 0.7) !important;
	transition: transform var(--gene-transition), box-shadow var(--gene-transition), background-color var(--gene-transition) !important;
}

.gene-btn-accent .wp-block-button__link:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 16px 34px -10px rgba(var(--gene-accent-rgb, 79, 111, 168), 0.8) !important;
}

.gene-btn-accent-outline .wp-block-button__link {
	border-radius: var(--gene-radius-pill) !important;
	padding: 0.85em 1.7em !important;
	font-weight: 700 !important;
	border-width: 1.5px !important;
	transition: transform var(--gene-transition), background-color var(--gene-transition) !important;
}

.gene-btn-accent-outline .wp-block-button__link:hover {
	transform: translateY(-2px) !important;
}

/* --- 大きな装飾数字（services--list 等の番号） --- */
.gene-num-lg {
	font-size: clamp(2.6rem, 6vw, 3.6rem) !important;
	font-weight: 800 !important;
	line-height: 0.9 !important;
	color: var(--gene-accent) !important;
	opacity: 0.9 !important;
}

/* --- カードの厚みアップ（角丸・ホバーで浮く＋影） --- */
.gene-card-elevated {
	border-radius: var(--gene-radius) !important;
	transition: transform var(--gene-transition), box-shadow var(--gene-transition) !important;
}

.gene-card-elevated:hover {
	transform: translateY(-6px) !important;
	box-shadow: 0 28px 50px -28px rgba(22, 23, 29, 0.28) !important;
}

/* アクセント色面のパネルは角を大きく */
.gene-accent-soft-bg,
.gene-accent-bg,
.gene-accent-strong-bg {
	border-radius: var(--gene-radius) !important;
}

/* 証言カードに上向きアクセントの引用符を確実に色連動 */
.gene-testimonial .gene-stars {
	color: var(--gene-accent) !important;
}

/* --- チェック項目の横並び（hero等） --- */
.gene-checks {
	color: inherit !important;
	opacity: 0.92;
	font-size: 0.92rem !important;
}

.gene-checks .gene-ck {
	color: #7fe0b0 !important;
	font-weight: 800;
	margin-right: 0.2em;
}

/* --- オファーバッジ（ゴールド系の枠ピル） --- */
.gene-offer {
	display: inline-block !important;
	margin: 1.4rem auto 0 !important;
	background: rgba(255, 197, 107, 0.12) !important;
	border: 1px solid rgba(255, 197, 107, 0.4) !important;
	color: #f0b860 !important;
	padding: 0.5em 1.1em !important;
	border-radius: 10px !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
}

.gene-hero--spotlight .gene-offer {
	color: #ffce82 !important;
}

/* --- カードの番号バッジ（services--cards） --- */
.gene-card--num {
	position: relative !important;
}

.gene-card-num {
	position: absolute !important;
	top: 0.6rem;
	right: 1rem;
	font-family: var(--gene-font-serif, Georgia, serif) !important;
	font-weight: 800 !important;
	font-size: 2.6rem !important;
	line-height: 1 !important;
	color: var(--gene-accent) !important;
	opacity: 0.16 !important;
	margin: 0 !important;
	pointer-events: none;
}

/* --- 小さなピルラベル（カード内カテゴリ） --- */
.gene-pill {
	display: inline-block !important;
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--gene-accent) !important;
	background: var(--gene-accent-soft) !important;
	padding: 0.35em 0.85em !important;
	border-radius: var(--gene-radius-pill) !important;
	margin: 0 0 0.6rem 0 !important;
}

/* =========================================================================
   MOBILE SIDE GUTTERS
   Generated sections are full-width (align:full) with only top/bottom padding,
   so on narrow screens the constrained content runs to the very edge and looks
   left-jammed. Add a horizontal gutter on small screens so content stays inset
   and balanced. Backgrounds still fill the full width (padding is inside the box).
   ========================================================================= */
@media (max-width: 781px) {
	[class*="gene-palette--"] {
		padding-left: clamp(1.25rem, 5vw, 2rem) !important;
		padding-right: clamp(1.25rem, 5vw, 2rem) !important;
	}
}