/*
 * Dianos dovanos (WPS-074)
 *
 * Built from Dovanos.dc.html. The warm paper surface (--tint-paper) is this
 * page's own identity, not the site's usual --color-bg - see the "letter
 * from Diana" comment in page-dovanos.php's hero section.
 */

.dv-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	padding-top: clamp( 28px, 5vw, 60px );
	padding-bottom: clamp( 24px, 3.5vw, 40px );
}

.dv-hero__title {
	margin: 0;
	max-width: 680px;
	font-size: clamp( 30px, 5vw, 46px );
	font-weight: var( --fw-black );
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var( --text-heading );
	text-wrap: pretty;
}

.dv-letter {
	width: 100%;
	max-width: 640px;
	box-sizing: border-box;
	margin-top: 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: clamp( 24px, 3.6vw, 34px ) clamp( 20px, 3vw, 34px );
	background: var( --tint-paper );
	border: 1px solid var( --tint-paper-border );
	border-radius: var( --radius-lg );
	/* Not one of --shadow-*: the mockup's own value, softer and wider than
	   --shadow-card, matching the paper card's lighter weight. */
	box-shadow: 0 14px 34px rgba( 23, 28, 33, 0.07 );
}

.dv-letter__quote {
	margin: 0;
	max-width: 520px;
	font-size: clamp( 16px, 2.1vw, 19px );
	line-height: 1.6;
	font-style: italic;
	color: var( --text-body );
	text-wrap: pretty;
}

.dv-letter__sign {
	margin: 0;
	font-size: clamp( 22px, 3vw, 27px );
	color: var( --color-signature-ink );
	line-height: 1.1;
}

.dv-section {
	padding-bottom: clamp( 40px, 6vw, 64px );
}

.dv-cards {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 16px;
}

@media ( min-width: 700px ) {
	.dv-cards {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

.dv-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: clamp( 20px, 3vw, 28px );
	background: var( --color-surface );
	border-radius: 22px;
	box-shadow: var( --shadow-card );
}

.dv-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.dv-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: var( --radius-sm );
}

.dv-card__icon .material-symbols-outlined {
	font-family: var( --font-icon );
	font-size: 24px;
}

/* The design system's ToothbrushIcon, shared with both printable memos. */
.dv-card__toothbrush {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	background: var( --color-accent-text );
	mask: url( '../../icons/toothbrush.svg' ) center / contain no-repeat;
}

.dv-card__icon--ice {
	background: var( --tint-ice );
}

.dv-card__icon--ice .material-symbols-outlined {
	color: var( --color-accent-text );
}

.dv-card__icon--leaf {
	background: var( --tint-leaf );
}

.dv-card__icon--leaf .material-symbols-outlined {
	color: var( --color-green-ink );
}

.dv-card__icon--amber {
	background: var( --tint-amber );
}

.dv-card__icon--amber .material-symbols-outlined {
	color: var( --color-amber-ink );
}

.dv-card__tag {
	padding: 5px 11px;
	font-size: 10.5px;
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-eyebrow );
	text-transform: uppercase;
	color: var( --text-meta );
	background: var( --tint-mist );
	border-radius: var( --radius-pill );
}

.dv-card__title {
	margin: 0;
	font-size: clamp( 18px, 2.4vw, 21px );
	font-weight: var( --fw-black );
	line-height: 1.2;
	color: var( --text-heading );
}

.dv-card__text {
	margin: 0;
	font-size: var( --fs-body );
	line-height: 1.6;
	color: var( --text-body );
}

.dv-card__list {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dv-card__list li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: var( --fs-caption );
	line-height: 1.5;
	color: var( --text-meta );
}

.dv-card__list .material-symbols-outlined {
	flex-shrink: 0;
	margin-top: 1px;
	font-family: var( --font-icon );
	font-size: 17px;
	color: var( --color-green-ink );
}

.dv-card__cta {
	align-self: flex-start;
	margin-top: auto;
}

.dv-card__downloads {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: auto;
}

.dv-card__downloads .btn {
	min-height: 44px;
}

.dv-card__downloads .material-symbols-outlined {
	font-size: 17px;
}

/*
 * Unavailable gifts remain inert (aria-disabled, not a link).
 * Visually distinct from an
 * enabled .btn--primary so it does not read as a working download.
 */
.dv-card__cta[aria-disabled='true'] {
	background: var( --tint-mist );
	color: var( --text-meta );
	cursor: default;
}

.dv-cards__note {
	margin: 14px 0 22px;
	text-align: center;
	font-size: var( --fs-caption );
	line-height: 1.5;
	color: var( --text-meta );
}