/*
 * Duck Mark pattern: membership signup banner.
 *
 * A thin, four-zone horizontal band — CTA text, Japanese copy, a slogan, and
 * one round badge image — laid out with CSS grid so each zone stays an
 * independent DOM element (no zone is baked into a raster image except the
 * badge itself). Column ratios below are a measured starting point, not a
 * locked layout: `minmax()` lets every zone breathe instead of clipping if
 * copy runs long, and the whole row can be restacked (2x2, then a single
 * column) in a later responsive pass without touching the renderer.
 *
 * Paper tone (#e0caae) matches the same value already used by
 * street-paper-ticket.css / the street-collage skin — no new texture asset,
 * no new torn-paper engine; final grain/edge treatment is deferred to the
 * shared Street Texture System (2026-08-20).
 */

.dm-membership-banner {
	--dm-mb-paper: #e0caae;
	--dm-mb-ink: #0a0a0a;
	--dm-mb-green: var(--dm-accent, #7ed321);
	--dm-mb-accent: var(--dm-mb-green);

	display: grid;
	grid-template-columns: minmax(220px, 27%) minmax(280px, 37%) minmax(170px, 20%) minmax(110px, 16%);
	align-items: center;
	column-gap: clamp(20px, 2.4vw, 40px);

	/*
	 * No max-width here on purpose — this is presentation.width:"full" in the
	 * schema, and the previous pass's `max-width:var(--dm-container,1680px)`
	 * silently resolved to this site's real --dm-container value (1120px,
	 * confirmed live), producing a narrow centered widget instead of a wide
	 * strip. Width now comes purely from side padding, giving ~85-92%
	 * content occupancy across normal desktop widths (2026-08-20, geometry
	 * correction pass).
	 */
	width: 100%;
	padding-inline: clamp(24px, 6vw, 110px);

	min-height: clamp(125px, 8.2vw, 155px);
	padding-block: clamp(8px, 1vw, 14px);

	background: var(--dm-mb-paper);
	color: var(--dm-mb-ink);
}

/* ---------------------------------------------------------------- CTA */

.dm-membership-banner__cta {
	display: flex;
	align-items: center;
	gap: .55em;
	text-decoration: none;
	color: inherit;
	width: fit-content;
}

.dm-membership-banner__cta-text {
	display: flex;
	flex-direction: column;
	gap: .03em;
}

.dm-membership-banner__cta-line1,
.dm-membership-banner__cta-line2 {
	display: block;
	font-family: var(--dm-font-display, inherit);
	font-weight: var(--dm-display-weight, 900);
	letter-spacing: var(--dm-display-track, -.01em);
	text-transform: uppercase;
	font-size: clamp(24px, 2.5vw, 36px);
	line-height: 1;
}

.dm-membership-banner__cta-line1 { color: var(--dm-mb-ink); }
.dm-membership-banner__cta-line2 { color: var(--dm-mb-accent); }

.dm-membership-banner__arrow {
	flex: 0 0 auto;
	display: inline-block;
	width: 1.6em;
	height: 2px;
	background: currentColor;
	position: relative;
	color: var(--dm-mb-accent);
}

.dm-membership-banner__arrow::after {
	content: "";
	position: absolute;
	right: 0;
	top: -4px;
	width: 10px;
	height: 10px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}

.dm-membership-banner__cta:hover .dm-membership-banner__cta-line2,
.dm-membership-banner__cta:focus-visible .dm-membership-banner__cta-line2 {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- copy */

.dm-membership-banner__copy {
	display: flex;
	flex-direction: column;
	gap: .3em;
}

.dm-membership-banner__copy p {
	margin: 0;
	font-family: var(--dm-font-body, inherit);
	font-weight: 500;
	font-size: clamp(15px, 1.25vw, 19px);
	line-height: 1.45;
	color: var(--dm-mb-ink);
	opacity: .85;
}

/* ---------------------------------------------------------------- slogan */

.dm-membership-banner__slogan {
	display: flex;
	flex-direction: column;
	gap: 0;
	text-align: left;
}

.dm-membership-banner__slogan span {
	display: block;
	font-family: var(--dm-font-display, inherit);
	font-weight: var(--dm-display-weight, 900);
	letter-spacing: var(--dm-display-track, -.01em);
	text-transform: uppercase;
	font-size: clamp(20px, 2.1vw, 29px);
	line-height: 1;
	color: var(--dm-mb-accent);
}

/* ---------------------------------------------------------------- tone: dark */

/*
 * dark-membership (2026-08-21, source-v2 migration) — same 4-zone markup, no
 * paper/grain, opt-in via the `tone` setting the schema now declares. Every
 * colour the pattern already reads as a local token gets a new value here;
 * nothing about the layout, spacing or badge sizing changes.
 */
.dm-membership-banner[data-tone="dark"] {
	--dm-mb-paper: #171a16;
	--dm-mb-ink: #f0eadc;
	--dm-mb-accent: #b89a5b;
}
.dm-membership-banner[data-tone="dark"] .dm-membership-banner__copy p {
	opacity: .78;
}

/* ---------------------------------------------------------------- badge */

.dm-membership-banner__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.dm-membership-banner__badge img {
	/* site-shell.css's global `body.dm-site-shell-enabled img{height:auto}`
	   outranks a single-class selector on specificity alone — confirmed live
	   the same way as level-select-showcase's and the featured-products
	   strip's own img-height overrides earlier. !important only counters
	   that, scoped to this badge image (2026-08-20). */
	width: auto;
	height: clamp(90px, 8.5vw, 118px) !important;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 900px) {
	.dm-membership-banner {
		grid-template-columns: 1fr 1fr;
		row-gap: 16px;
	}
	.dm-membership-banner__badge { justify-content: flex-end; }
}

@media (max-width: 620px) {
	.dm-membership-banner {
		grid-template-columns: 1fr;
		row-gap: 12px;
		text-align: left;
	}
	.dm-membership-banner__badge { justify-content: flex-start; }
}