/**
 * Home page styles.
 *
 * Screen 01 in Card Room design spec.
 *
 * @package Gutshot
 */

/* 1. Felt Hero */
.gs-home-hero {
	background-color: var(--gs-felt);
	background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
	background-size: 6px 6px;
	padding: 56px 0;
	color: var(--gs-paper);
}

.gs-home-hero__grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 48px;
	align-items: center;
}

.gs-home-hero__main {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.gs-home-hero__tags {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.gs-tag--on-felt {
	background: var(--gs-felt-deep);
	color: var(--gs-paper);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.gs-home-hero__title {
	margin: 0;
	font-family: var(--gs-font-display);
	font-size: 56px;
	line-height: 1.05;
	text-wrap: balance;
	color: var(--gs-paper);
}

.gs-home-hero__title a {
	color: inherit;
	text-decoration: none;
}

.gs-home-hero__title a:hover {
	color: var(--gs-marigold);
}

.gs-home-hero__meta {
	font-family: var(--gs-font-body);
	font-size: 18px;
	line-height: 1.4;
	color: var(--gs-midnight);
	font-weight: 500;
	margin: 4px 0 12px;
}

.gs-home-hero__actions {
	display: flex;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
}

/* Fanned Playing Cards */
.gs-home-hero__cards {
	position: relative;
	height: 380px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gs-fanned-card {
	width: 260px;
	height: 340px;
	background: var(--gs-paper);
	border: 2px solid var(--gs-midnight);
	border-radius: var(--gs-r-panel);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
	padding: 18px;
	position: absolute;
	text-decoration: none;
	color: var(--gs-midnight);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: transform var(--gs-ease-fast), box-shadow var(--gs-ease-fast);
}

.gs-fanned-card:hover {
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

.gs-fanned-card--1 {
	transform: rotate(-9deg);
	left: 30px;
	top: 15px;
	z-index: 1;
}

.gs-fanned-card--1:hover {
	transform: rotate(-6deg) translateY(-8px);
	z-index: 3;
}

.gs-fanned-card--2 {
	transform: rotate(5deg);
	left: 190px;
	top: 10px;
	z-index: 2;
}

.gs-fanned-card--2:hover {
	transform: rotate(2deg) translateY(-8px);
	z-index: 3;
}

.gs-fanned-card__index {
	font-family: var(--gs-font-display);
	font-size: 28px;
	line-height: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.gs-fanned-card__media {
	height: 140px;
	border-radius: 6px;
	overflow: hidden;
}

.gs-fanned-card__title {
	font-weight: 600;
	font-size: 16px;
	line-height: 1.3;
	color: var(--gs-midnight);
}

.gs-fanned-card__guest {
	font-family: var(--gs-font-mono);
	font-size: 12px;
	color: var(--gs-muted);
}

/* 2. By Topic Section */
.gs-home-topics {
	padding: 48px 0 24px;
}

.gs-section-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 24px;
}

.gs-section-header__title {
	margin: 0;
	font-family: var(--gs-font-display);
	font-size: 32px;
	color: var(--gs-midnight);
}

.gs-section-header__link {
	font-family: var(--gs-font-mono);
	font-size: 13px;
	color: var(--gs-midnight);
	text-decoration: none;
	font-weight: 500;
}

.gs-section-header__link:hover {
	color: var(--gs-felt-deep);
}

.gs-home-topics__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.gs-topic-card {
	background: var(--gs-card);
	border: 2px solid var(--gs-midnight);
	border-radius: var(--gs-r-card);
	padding: 18px 20px;
	display: flex;
	align-items: center;
	gap: 16px;
	text-decoration: none;
	color: var(--gs-midnight);
	transition: transform var(--gs-ease-fast), box-shadow var(--gs-ease-fast);
}

.gs-topic-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 0 var(--gs-midnight);
}

.gs-topic-card__glyph {
	font-size: 30px;
	width: 36px;
	text-align: center;
	flex-shrink: 0;
}

.gs-topic-card--economy .gs-topic-card__glyph {
	color: var(--gs-midnight);
}

.gs-topic-card--education .gs-topic-card__glyph {
	color: var(--gs-vermilion-deep);
}

.gs-topic-card--politics .gs-topic-card__glyph {
	color: var(--gs-felt-deep);
}

.gs-topic-card--race-religion .gs-topic-card__glyph {
	color: var(--gs-sky);
}

.gs-topic-card__content {
	flex: 1;
}

.gs-topic-card__title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
}

.gs-topic-card__count {
	font-family: var(--gs-font-mono);
	font-size: 12px;
	color: var(--gs-muted);
	margin-top: 4px;
}

.gs-topic-card__arrow {
	font-family: var(--gs-font-mono);
	font-size: 18px;
	color: var(--gs-muted);
}

/* 3. Recent Hands Grid */
.gs-home-recent {
	padding: 40px 0 56px;
}

.gs-home-recent__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

/* 4. Host & Regular Panels */
.gs-home-people {
	padding: 0 0 56px;
}

.gs-home-people__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.gs-person-panel {
	border-radius: var(--gs-r-panel);
	padding: 28px;
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 24px;
	align-items: center;
}

.gs-person-panel--host {
	background: var(--gs-midnight);
	color: var(--gs-paper);
}

.gs-person-panel--regular {
	background: var(--gs-card);
	border: 2px solid var(--gs-midnight);
	color: var(--gs-midnight);
}

.gs-person-panel__photo-wrap {
	height: 180px;
	border-radius: var(--gs-r-media);
	overflow: hidden;
}

.gs-person-panel__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gs-person-panel__placeholder--dark {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #1A2B40 0 8px, #213650 8px 16px);
}

.gs-person-panel__placeholder--light {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, var(--gs-linen) 0 8px, #E9E1CF 8px 16px);
}

.gs-person-panel__content {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gs-person-panel__label {
	font-family: var(--gs-font-mono);
	font-size: 12px;
	letter-spacing: 0.1em;
}

.gs-person-panel__label--host {
	color: var(--gs-marigold);
}

.gs-person-panel__label--regular {
	color: var(--gs-vermilion-deep);
}

.gs-person-panel__name {
	margin: 0;
	font-family: var(--gs-font-display);
	font-size: 34px;
	line-height: 1.1;
}

.gs-person-panel__bio {
	font-size: 16px;
	line-height: 1.5;
}

.gs-person-panel--host .gs-person-panel__bio {
	color: #D6DCE3;
}

.gs-person-panel--regular .gs-person-panel__bio {
	color: var(--gs-ink-2);
}

.gs-person-panel__link {
	font-family: var(--gs-font-mono);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}

.gs-person-panel__link--host {
	color: var(--gs-marigold);
}

.gs-person-panel__link--regular {
	color: var(--gs-felt-deep);
}

.gs-person-panel__link:hover {
	text-decoration: underline;
}

/* 5. Support & Newsletter Slots */
.gs-home-support {
	padding: 0 0 56px;
}

.gs-home-newsletter-slot {
	padding: 0 0 48px;
}

/* Responsive */
@media (max-width: 1024px) {
	.gs-home-hero__grid {
		grid-template-columns: 1fr;
	}

	.gs-home-hero__cards {
		display: none;
	}

	.gs-home-topics__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.gs-home-recent__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.gs-home-people__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.gs-home-hero {
		padding: 36px 0;
	}

	.gs-home-hero__title {
		font-size: 36px;
	}

	.gs-home-topics__grid {
		grid-template-columns: 1fr;
	}

	.gs-home-recent__grid {
		grid-template-columns: 1fr;
	}

	.gs-person-panel {
		grid-template-columns: 1fr;
	}

	.gs-person-panel__photo-wrap {
		height: 140px;
	}
}