/*
 * Gradient of the day (includes/daily.php): the feature card on the home page
 * and on /gradient-of-the-day/, and the date tag on past picks.
 */

.tg-daily {
	display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	background: #fff; border: 1px solid rgba(0, 0, 0, .06); border-radius: 28px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .05), 0 18px 40px -24px rgba(30, 20, 80, .25);
	overflow: hidden;
}
.tg-daily-preview { display: block; min-height: 300px; transition: opacity .15s; }
.tg-daily-preview:hover { opacity: .94; }

.tg-daily-body { display: flex; flex-direction: column; justify-content: center; padding: 32px 36px; }
.tg-daily-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px !important; font-size: 12px; color: #6E6E78; }
.tg-daily-eyebrow b {
	padding: 4px 10px; border-radius: 999px; background: #111; color: #fff;
	font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.tg-daily h2 { font-size: clamp(26px, 3vw, 34px) !important; line-height: 1.1 !important; letter-spacing: -.025em !important; margin: 0 0 4px !important; }
.tg-daily h2 a { color: #111 !important; text-decoration: none !important; }
.tg-daily h2 a:hover { color: #444 !important; }
.tg-daily-brand { margin: 0 !important; font-size: 14px; color: #6E6E78; }
.tg-daily-stops { margin: 16px 0 20px !important; }
.tg-daily-stops .gc-swatch { width: 18px; height: 18px; }
.tg-daily-stops .gc-hex { font-size: 13px; }

.tg-daily-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tg-daily .tg-daily-copy {
	width: auto !important; padding: 10px 22px !important; border: 0 !important;
	background: #111 !important; color: #fff !important; font-size: 14px !important; font-weight: 600 !important;
}
.tg-daily .tg-daily-copy:hover { background: #333 !important; }
.tg-daily .tg-daily-copy.ok { background: #166534 !important; color: #fff !important; }
.tg-daily-open { font-size: 14px; font-weight: 600; color: #55555F !important; text-decoration: none !important; margin-left: 4px; }
.tg-daily-open:hover { color: #111 !important; }
.tg-daily-next { margin: 18px 0 0 !important; font-size: 12px; color: #6E6E78; }

.tg-daily-page .tg-daily-sec { margin-top: 8px; }

/* Date on past picks */
.gc-day {
	display: inline-block; margin: 0 0 8px; padding: 3px 9px; border-radius: 999px;
	background: #F4F4F7; font-size: 11px; font-weight: 600; color: #45454F;
}

@media (max-width: 760px) {
	.tg-daily { grid-template-columns: 1fr; border-radius: 24px; }
	.tg-daily-preview { min-height: 200px; }
	.tg-daily-body { padding: 22px 20px 24px; }
}