/* =============================================================
   TMLC Tournament Calendar — homepage schedule
   Prefix: tmlc-cal-
   Inherits: OnePress (Raleway headings, Open Sans body, #03c4eb)
   ============================================================= */

.tmlc-cal-section {
	--cal-accent: #03c4eb;
	--cal-accent-dark: #0296b0;
	--cal-ink: #0e1a24;
	--cal-muted: #596573;
	--cal-line: #e6ecf0;
	--cal-tbd: #6c5ce7;
	--cal-bg: #f7fafc;

	padding: 56px 0 60px;
	background: var(--cal-bg);
}

.tmlc-cal-section .container {
	max-width: 1180px;
}

/* ---------- header ---------- */

.tmlc-cal-header {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 40px;
}

.tmlc-cal-eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--cal-accent);
	margin-bottom: 8px;
}

.tmlc-cal-title {
	font-size: 32px;
	line-height: 1.15;
	margin: 0 0 16px;
	color: var(--cal-ink);
	letter-spacing: -0.01em;
}

.tmlc-cal-intro {
	font-size: 15px;
	line-height: 1.7;
	color: var(--cal-muted);
	margin: 0;
}

@media (max-width: 700px) {
	.tmlc-cal-title { font-size: 26px; }
}

/* ---------- card list ---------- */

.tmlc-cal-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: 18px;
}

.tmlc-cal-card {
	position: relative; /* anchor for the stretched-link overlay */
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--cal-line);
	border-radius: 10px;
	overflow: hidden;
	min-width: 0; /* allow inner content to shrink without overflowing */
	transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}

.tmlc-cal-card:hover {
	box-shadow: 0 18px 40px -22px rgba(14, 26, 36, 0.35);
	border-color: rgba(3, 196, 235, 0.4);
	transform: translateY(-2px);
}

.tmlc-cal-card:hover .tmlc-cal-hero {
	background-size: 108% auto;
}

/* ---------- hero banner ---------- */

.tmlc-cal-hero {
	position: relative;
	min-height: 180px;
	padding: 14px;
	background-color: #0e1a24;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: background-size 400ms ease;
}

/* Bottom-up gradient for title legibility, plus a softer top vignette behind the date tile. */
.tmlc-cal-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(14, 26, 36, 0.55) 0%, rgba(14, 26, 36, 0) 35%),
		linear-gradient(180deg, rgba(14, 26, 36, 0) 40%, rgba(14, 26, 36, 0.85) 100%);
	pointer-events: none;
}

.tmlc-cal-card--no-hero .tmlc-cal-hero {
	background-image: linear-gradient(160deg, #0e1a24 0%, #1a3142 100%);
}

.tmlc-cal-card--tbd .tmlc-cal-hero {
	background-color: #2a2050;
}

.tmlc-cal-card--no-hero.tmlc-cal-card--tbd .tmlc-cal-hero {
	background-image: linear-gradient(160deg, #2a2050 0%, #1a1340 100%);
}

/* ---------- date tile ---------- */

.tmlc-cal-tile {
	position: relative; /* lift above the hero gradient */
	z-index: 1;
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(14, 26, 36, 0.78);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #fff;
	border-radius: 8px;
	padding: 8px 12px;
	text-align: center;
	min-width: 56px;
	box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5);
}

.tmlc-cal-tile-month {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--cal-accent);
	line-height: 1;
}

.tmlc-cal-tile-day {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.05;
	margin: 2px 0 1px;
	letter-spacing: -0.02em;
}

.tmlc-cal-tile-year {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 1.4px;
	color: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
}

.tmlc-cal-tile-tbd {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--cal-accent);
}

.tmlc-cal-card--tbd .tmlc-cal-tile {
	background: linear-gradient(160deg, #2a2050 0%, #1a1340 100%);
}

.tmlc-cal-card--tbd .tmlc-cal-tile-tbd {
	color: #c8b6ff;
}

/* ---------- card footer (chip + meta beneath the hero) ---------- */

.tmlc-cal-footer {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 14px 14px;
	min-width: 0; /* prevent flex/grid blowout from long inline content */
}

.tmlc-cal-name {
	position: relative; /* lift above the hero gradient */
	z-index: 1;
	margin: 0;
	font-size: 19px;
	line-height: 1.2;
	color: #fff;
	letter-spacing: -0.01em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
	max-width: 100%;
}

.tmlc-cal-link {
	color: inherit;
	text-decoration: none;
	transition: color 180ms ease;
}

.tmlc-cal-link:hover,
.tmlc-cal-link:focus-visible {
	color: var(--cal-accent);
}

/* Stretched link — make the entire card surface clickable while keeping
   the <a> on the title for assistive tech. The overlay sits above the card
   background but below interactive elements. */
.tmlc-cal-link::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	z-index: 1;
}

.tmlc-cal-link:focus-visible::before {
	outline: 2px solid var(--cal-accent);
	outline-offset: 2px;
}

/* Status chip — sized small, never overflows. Allowed to wrap as a safety net. */
.tmlc-cal-chip {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(3, 196, 235, 0.10);
	color: var(--cal-accent-dark);
	border: 1px solid rgba(3, 196, 235, 0.25);
	max-width: 100%;
	white-space: normal;
	line-height: 1.3;
}

.tmlc-cal-chip--open {
	background: rgba(31, 157, 85, 0.10);
	color: #178148;
	border-color: rgba(31, 157, 85, 0.25);
}

.tmlc-cal-chip--sold_out {
	background: rgba(176, 106, 31, 0.10);
	color: #8a541a;
	border-color: rgba(176, 106, 31, 0.25);
}

.tmlc-cal-chip--tbd {
	background: rgba(108, 92, 231, 0.10);
	color: #5042c2;
	border-color: rgba(108, 92, 231, 0.25);
}

.tmlc-cal-chip--past {
	background: rgba(136, 146, 160, 0.10);
	color: var(--cal-muted);
	border-color: rgba(136, 146, 160, 0.25);
}

/* ---------- meta line ---------- */

.tmlc-cal-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 3px 7px;
	margin: 0;
	font-size: 12px;
	color: var(--cal-muted);
	line-height: 1.4;
}

.tmlc-cal-meta-sep {
	color: rgba(89, 101, 115, 0.5);
}

/* ---------- responsive ---------- */

/* Narrow screens — drop to a single-column list and let the hero get a touch taller. */
@media (max-width: 760px) {
	.tmlc-cal-list {
		grid-template-columns: 1fr;
	}
	.tmlc-cal-hero {
		min-height: 200px;
	}
}

/* Smallest — slightly shorter hero, slightly smaller title. */
@media (max-width: 420px) {
	.tmlc-cal-hero {
		min-height: 160px;
		padding: 12px;
	}
	.tmlc-cal-name {
		font-size: 17px;
	}
}