/**
 * AEO Onboarding Process Widget — Responsive Breakpoints
 *
 * Tablet ≤992px, Mobile ≤767px
 */

/* ==================================================================
   TABLET (≤992px)
   ================================================================== */

@media (max-width: 992px) {

	/* Hero */
	.aeo-hero-grid {
		flex-direction: column;
		gap: 32px;
	}

	.aeo-hero-content {
		flex: 1;
		max-width: 100%;
	}

	.aeo-hero-h1 {
		font-size: 32px;
	}

	/* Businesses */
	.aeo-biz-cards {
		grid-template-columns: 1fr;
	}

	/* Process stepper — step list becomes horizontal scroll row */
	.aeo-process-card {
		flex-direction: column;
	}

	.aeo-step-list {
		flex: none;
		width: 100%;
		max-width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		border-right: none;
		border-bottom: 1px solid var(--aeo-border);
		padding: 12px 16px;
		gap: 8px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	.aeo-step-row {
		flex: 0 0 auto !important;
		flex-direction: row !important;
		align-items: center;
		justify-content: center;
		padding: 8px 16px !important;
		min-width: auto !important;
		text-align: left;
		border-left: none !important;
		border-bottom: 3px solid transparent !important;
		border-radius: var(--aeo-radius-pill) !important;
		background: var(--aeo-bg-soft);
		gap: 8px !important;
		white-space: nowrap;
		cursor: pointer;
	}

	.aeo-step-row.aeo-step-active {
		background: var(--aeo-blue-light) !important;
		border-left-color: transparent !important;
		border-bottom-color: var(--aeo-blue) !important;
	}

	.aeo-step-label {
		font-size: 13px !important;
		font-weight: 600;
		color: var(--aeo-muted);
		white-space: nowrap !important;
	}

	.aeo-step-num {
		width: 28px !important;
		height: 28px !important;
		font-size: 12px !important;
		flex-shrink: 0 !important;
	}

	/* Panel body */
	.aeo-panel-body {
		flex-direction: column;
		align-items: center;
	}

	.aeo-panel-icon {
		width: 80px;
		height: 80px;
	}

	.aeo-panel-icon svg {
		width: 36px;
		height: 36px;
	}

	/* Transition icons — 2×2 grid */
	.aeo-trans-row {
		flex-wrap: wrap;
		gap: 24px;
	}

	.aeo-trans-arrow {
		display: none;
	}

	.aeo-trans-item {
		flex: 0 0 calc(50% - 12px);
	}

	/* Complete cards */
	.aeo-complete-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Section headings */
	.aeo-section-h2 {
		font-size: 28px;
	}

	/* CTA */
	.aeo-cta-heading {
		font-size: 28px;
	}
}

/* ==================================================================
   MOBILE (≤767px)
   ================================================================== */

@media (max-width: 767px) {

	.aeo-section {
		padding: 32px 0;
	}

	.aeo-container {
		padding: 0 16px;
	}

	/* Hero */
	.aeo-hero {
		padding: 20px 0 40px;
	}

	.aeo-hero-h1 {
		font-size: 26px;
	}

	.aeo-hero-text {
		font-size: 14px;
	}


	/* Section headings */
	.aeo-section-h2 {
		font-size: 24px;
	}

	.aeo-section-intro {
		font-size: 14px;
	}

	/* Business cards */
	.aeo-biz-card {
		padding: 24px;
	}

	/* Process step list — compact horizontal scroll */
	.aeo-step-list {
		padding: 10px 12px;
	}

	.aeo-step-panels {
		padding: 20px 16px;
	}

	.aeo-panel-title {
		font-size: 18px;
	}

	.aeo-panel-body {
		gap: 20px;
	}

	.aeo-panel-icon {
		width: 64px;
		height: 64px;
	}

	.aeo-panel-icon svg {
		width: 28px;
		height: 28px;
	}

	/* Transition — full stack */
	.aeo-trans-item {
		flex: 0 0 100%;
	}

	/* Complete cards — stack */
	.aeo-complete-cards {
		grid-template-columns: 1fr;
	}

	/* CTA */
	.aeo-cta {
		padding: 56px 0;
	}

	.aeo-cta-heading {
		font-size: 24px;
	}

	.aeo-cta-subtext {
		font-size: 14px;
	}

	.aeo-cta-btn {
		padding: 12px 28px;
		font-size: 14px;
	}

	/* FAQ */
	.aeo-faq-question {
		padding: 14px 16px;
	}

	.aeo-faq-q-text {
		font-size: 14px;
	}

	.aeo-faq-answer {
		padding: 0 16px;
	}

	.aeo-faq-item.aeo-faq-open .aeo-faq-answer {
		padding: 0 16px 14px;
	}
}