/* cards.css — scrumline-tick cards, data-strip variants, match-card. */

.card {
	position: relative;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	padding: var(--s-40) var(--s-24) var(--s-24);
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
	text-decoration: none;
	color: var(--c-text);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	min-width: 0;
}

/* Scrumline tick — 3-tick pattern (three rows of a rugby scrum) */
.card::before {
	content: '';
	position: absolute;
	top: var(--s-16);
	left: var(--s-24);
	width: 68px;
	height: 1px;
	background-image: linear-gradient(to right,
		var(--c-accent) 0 20px,
		transparent 20px 24px,
		var(--c-accent) 24px 44px,
		transparent 44px 48px,
		var(--c-accent) 48px 68px
	);
	transition: background-image var(--dur) var(--ease);
}

.card:hover {
	border-color: var(--c-accent);
	transform: translateY(-2px);
}

.card:hover::before {
	background-image: linear-gradient(to right,
		var(--c-accent-hover) 0 20px,
		transparent 20px 24px,
		var(--c-accent-hover) 24px 44px,
		transparent 44px 48px,
		var(--c-accent-hover) 48px 68px
	);
}

/* Variant: home (default claret) — no changes, already default. */

/* Variant: away — cream ticks (used for sport/travel cards on dark surfaces) */
.card[data-strip="away"]::before {
	background-image: linear-gradient(to right,
		var(--c-accent-sec) 0 20px,
		transparent 20px 24px,
		var(--c-accent-sec) 24px 44px,
		transparent 44px 48px,
		var(--c-accent-sec) 48px 68px
	);
}

/* Variant: european — deep-claret background */
.card[data-strip="european"] {
	background: var(--c-special);
}


.card__kicker {
	font-family: var(--f-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 1.75px;
	text-transform: uppercase;
	color: var(--c-accent-sec);
	margin-bottom: var(--s-12);
}

.card h3,
.card__title {
	font-family: var(--f-heading);
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.3;
	margin-bottom: var(--s-12);
	color: var(--c-white);
}

.card p,
.card__body {
	font-size: 0.9375rem;
	color: var(--c-text-dim);
	line-height: 1.65;
	margin-bottom: var(--s-16);
	flex-grow: 1;
}

.card__meta {
	font-family: var(--f-body);
	font-size: 0.75rem;
	letter-spacing: 1px;
	color: var(--c-text-dim);
	text-transform: uppercase;
	margin-bottom: var(--s-8);
}

.card__footer {
	margin-top: var(--s-16);
}

.card__link {
	font-family: var(--f-body);
	font-size: 0.75rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--c-accent);
	font-weight: 600;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: border-color var(--dur) var(--ease);
}

.card__link:hover {
	border-bottom-color: var(--c-accent);
}

/* Date label (used on match-cards) */
.card__date {
	font-family: var(--f-heading);
	font-style: italic;
	font-weight: 500;
	font-size: 1.125rem;
	color: var(--c-accent-sec);
	margin-bottom: var(--s-4);
}

/* ----- Match card with score-display typography ----- */

.match-card {
	composes: card;
}

.match-card__teams {
	font-family: var(--f-body);
	font-weight: 500;
	font-size: 0.9375rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--c-white);
	margin-bottom: var(--s-8);
}

.match-card__kickoff {
	font-family: var(--f-heading);
	font-style: italic;
	font-weight: 500;
	font-size: 1.25rem;
	color: var(--c-accent-sec);
	margin-bottom: var(--s-12);
}

.match-card__broadcaster {
	font-family: var(--f-body);
	font-size: 0.75rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--c-text-dim);
}

.match-card__score {
	font-family: var(--f-heading);
	font-weight: 600;
	font-style: italic;
	font-size: 2.5rem;
	letter-spacing: 0.05em;
	color: var(--c-text);
	margin: var(--s-8) 0;
}


/* ----- Shirt-number variant for testimonials ----- */

.card--testimonial {
	padding-top: var(--s-48);
}

.card--testimonial .shirt-badge {
	position: absolute;
	top: var(--s-16);
	right: var(--s-16);
}

.card--testimonial .card__quote {
	font-family: var(--f-heading);
	font-style: italic;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--c-text);
	padding-left: var(--s-16);
	border-left: 2px solid var(--c-accent);
	margin-bottom: var(--s-16);
}

.card--testimonial .card__author {
	font-family: var(--f-body);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--c-white);
}

.card--testimonial .card__role {
	font-size: 0.75rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--c-text-dim);
	margin-top: var(--s-4);
}

/* ----- Gallery (3 framed images) ----- */

.gallery-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-16);
}

@media (min-width: 768px) {
	.gallery-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.gallery-grid__item {
	position: relative;
	border: 1px solid var(--c-border);
	overflow: hidden;
	border-radius: var(--r-md);
	max-height: 480px;
}

.gallery-grid__item img {
	width: 100%;
	height: 100%;
	max-height: 480px;
	object-fit: cover;
	display: block;
}

/* Zone card variant (larger padding) */
.zone-card {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	padding: var(--s-48);
	position: relative;
}

.zone-card::before {
	content: '';
	position: absolute;
	top: var(--s-24);
	left: var(--s-48);
	width: 68px;
	height: 1px;
	background-image: linear-gradient(to right,
		var(--c-accent) 0 20px,
		transparent 20px 24px,
		var(--c-accent) 24px 44px,
		transparent 44px 48px,
		var(--c-accent) 48px 68px
	);
}

.zone-card h3 {
	font-size: 1.75rem;
	margin-top: var(--s-24);
	margin-bottom: var(--s-16);
}

/* Steps (3-col flow) */
.steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-24);
}

@media (min-width: 768px) {
	.steps {
		grid-template-columns: repeat(3, 1fr);
	}
}

.step {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	padding: var(--s-32) var(--s-24);
	position: relative;
}

.step__num {
	font-family: var(--f-heading);
	font-style: italic;
	font-weight: 500;
	font-size: 2rem;
	color: var(--c-accent);
	display: block;
	margin-bottom: var(--s-12);
	line-height: 1;
}

.step h4 {
	font-family: var(--f-heading);
	font-weight: 500;
	font-size: 1.125rem;
	margin-bottom: var(--s-8);
}