@use 'variables' as *;

// Hero Card — Figma node 240:865 (free state) / 240:2302 (paid state).
// Card: 1196 × 260 (h-content), white bg, 1px border, padding 32px.
// Internal layout via flex; right column is fixed 320px wide.
.simplestats-hero-card {
	position: relative;                     // anchors the paid-state close button
	display: flex;
	gap: 32px;
	padding: 32px;
	background: #fff;
	border: 1px solid #1A1A1C;              // Figma 240:865 outline
	border-radius: 12px;

	&__left {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	// Logo (240:868/869): 168×32, sits at the top of the left column.
	&__logo {
		display: block;
		width: 168px;
		height: 32px;
		margin-bottom: 20px;                // logo bottom y=32 → headline top y=52
	}

	&__text { margin-bottom: 20px; }       // text bottom y=128 → button top y=148

	// Headline (0:1145): Typography/Title/SemiBold 28/36 SemiBold, color neutral/900 #18191D.
	&__headline {
		margin: 0 0 12px;                   // headline → description gap = 12px
		font-size: 28px;
		font-weight: 600;
		line-height: 36px;
		color: #18191D;                     // neutral/900
	}

	// Description (0:1146): Typography/Body/Regular 20/28 Regular, color neutral/500 #7A7660.
	&__sub {
		margin: 0;
		font-size: 20px;
		font-weight: 400;
		line-height: 28px;
		color: #7A7660;                     // neutral/500
	}

	// Button (0:1147): bg brand/300 #FFE57D, text neutral/900 #18191D, padding 20/12, border-radius 2, gap 8.
	&__cta {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 48px;
		padding: 12px 20px;
		background: #FFE57D;                // brand/300
		color: #18191D;                     // neutral/900
		border-radius: 2px;                 // button/radius
		font-size: 14px;
		font-weight: 700;
		line-height: 20px;
		text-decoration: none;

		// WP admin's `#wpwrap a:hover` outranks a single-class color rule,
		// so pin the link states to keep the brand text color on hover/focus.
		&:hover,
		&:focus,
		&:focus-visible,
		&:active,
		&:visited {
			color: #18191D;
		}

		// WP admin styles `a:focus` with outline / box-shadow / border-radius —
		// pin these so the branded button shape stays put on focus.
		&:focus,
		&:focus-visible {
			outline: none;
			box-shadow: none;
			border-radius: 2px;
		}
	}
	&__cta-arrow {
		display: block;
		width: 16px;
		height: 16px;
	}

	// Right column USPs (240:874): 320 wide, label + 4 rows, 12px row gap.
	&__right {
		width: 320px;
		flex-shrink: 0;
		padding-left: 20px;                 // matches Figma USP-3 x=20 inset
	}

	// "What's included" label (0:1149): neutral/700 #32343A.
	&__usps-label {
		margin: 0 0 12px;
		font-size: 14px;
		font-weight: 400;
		line-height: 20px;
		color: #32343A;                     // neutral/700
	}

	&__usps {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	&__usp {
		display: flex;
		align-items: center;
		gap: 12px;
		height: 24px;
	}

	// 24×24 circle tile, bg brand/100 #FEF9C3, holding a 14×14 brand/600 #CA8A04 icon (Figma 0:1150–0:1173).
	&__usp-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		flex-shrink: 0;
		border-radius: 50%;
		background: #FEF9C3;                // brand/100
		color: #CA8A04;                     // brand/600 (icon stroke)

		svg { width: 14px; height: 14px; }
	}

	// USP text (0:1157 etc.): Typography/Body 2/SemiBold 16/24, color neutral/900 #18191D.
	&__usp-label {
		font-size: 16px;
		font-weight: 600;
		line-height: 24px;
		color: #18191D;                     // neutral/900
	}

	// Paid-plan variant — Figma 240:2302. Same chrome; CTA is hidden by v-if in the
	// template, and a small dismissible close button sits in the top-right corner.
	// Position from Figma: 20×20 button at x=1164, y=12 inside a 1196-wide card
	// (right inset = 1196 - 1164 - 20 = 12, top inset = 12).
	&__close {
		position: absolute;
		top: 12px;
		right: 12px;
		width: 20px;
		height: 20px;
		padding: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: #F3F4F6;                // Figma 240:2337 bg
		color: #212226;                     // X stroke (drives currentColor)
		border: 0;
		border-radius: 10px;                // 16px on a 20px box reads as fully rounded; we use 10px (half) for the same visual
		cursor: pointer;
		line-height: 0;

		svg { width: 14px; height: 14px; }

		&:hover, &:focus-visible {
			background: #E5E7EB;
			color: #1A1A1C;
		}

		&:focus-visible {
			outline: 2px solid #1A1A1C;
			outline-offset: 2px;
		}
	}

	@media ( max-width: 960px ) {
		flex-direction: column;

		&__right { width: 100%; padding-left: 0; }
	}
}
