/* =====================================================================
   Summer's End Angus: the TV card.
   One card shape for the whole site: the line-up grid, the related row on
   an artist page and the homepage teaser all render this markup.
   The screen, the tab and the test card are base.css primitives. This file
   only adds what the card needs on top of them.
   ===================================================================== */

/* --------------------------------------------- the tab as a card label */

/* base.css owns the --fixed width and the --sm size: these two are aliases. */
.se-tab--card .se-tab__row,
.se-tab--btn .se-tab__row {
	min-width: 10.75rem;
}

.se-tab--btn {
	transition: background-color var(--se-dur) var(--se-ease), transform var(--se-dur) var(--se-ease);
}

.se-tab--btn:hover {
	transform: translateY(-0.125rem);
}

.se-tab--btn:focus-visible {
	outline: 2px solid var(--se-red-hot);
	outline-offset: 3px;
}

/* ------------------------------------------------------------ the card */

.sea-card {
	position: relative;
	min-width: 0;
}

.sea-card__body {
	position: relative;
	display: block;
	color: inherit;
	text-decoration: none;
}

.sea-card__screen {
	display: block;
}

.sea-card__img {
	transition: transform 600ms var(--se-ease);
}

.sea-card .se-tab {
	position: absolute;
	top: -0.875rem;
	right: -0.75rem;
	transition: transform 300ms var(--se-ease);
}

.sea-card--lg .se-tab {
	top: -1.75rem;
	right: -1.5rem;
}

.sea-card__name {
	display: block;
	margin-top: 1.5rem;
	color: var(--se-bone);
	font-family: var(--se-font-display);
	font-weight: 900;
	font-size: clamp(2rem, 2.917vw, 3.5rem);
	line-height: 0.9;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.sea-card--lg .sea-card__name {
	font-size: clamp(2.75rem, 5vw, 6rem);
}

.sea-card__stage {
	display: block;
	margin-top: 0.625rem;
	color: var(--se-grey);
	font-family: var(--se-font-label);
	font-weight: 600;
	font-size: clamp(0.8125rem, 0.833vw, 1rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sea-card--lg .sea-card__stage {
	font-size: clamp(1rem, 1.354vw, 1.625rem);
}

/* Hover: the photo grows a little inside the screen and the tab slides in. */

a.sea-card__body:hover .sea-card__img,
a.sea-card__body:focus-visible .sea-card__img {
	transform: scale(1.04);
}

a.sea-card__body:hover .se-tab,
a.sea-card__body:focus-visible .se-tab {
	transform: translate(-0.375rem, 0.375rem);
}

a.sea-card__body:focus-visible {
	outline: 2px solid var(--se-red-hot);
	outline-offset: 0.5rem;
}

/*
 * The test card sits inside the screen, so it needs no shape of its own.
 * Figma sets the eight bars at half strength over black, which keeps the slot
 * quiet beside a real photo instead of shouting at full saturation.
 */

.sea-card--soon .se-testcard__bar {
	opacity: 0.5;
}

.sea-card--soon .sea-card__name {
	color: var(--se-bone);
}

/*
 * A headliner slot is twice as wide, so the plate is scaled with it. At the
 * small size it reads as a stray label lost inside a large screen, which is
 * what an empty headliner row looked like before the first names land.
 */
.sea-card--soon.sea-card--lg .se-testcard__plate {
	padding: 0.75rem 1.5rem;
	font-size: clamp(0.8125rem, 1.04vw, 1.25rem);
	letter-spacing: 0.16em;
}

/* ---------------------------------------------------------- small screens */

@media (max-width: 767px) {
	.sea-card__name,
	.sea-card--lg .sea-card__name {
		font-size: clamp(2.25rem, 11vw, 3.5rem);
	}

	.sea-card__stage,
	.sea-card--lg .sea-card__stage {
		font-size: 0.9375rem;
	}

	/*
	 * QA-MOBILE: on a desktop the tab hangs off the corner of the card, which is
	 * the launch creative device. The Figma mobile frame (162:323) brings it
	 * inside the screen, 12px down and 12px in, and sizes it to its own text at
	 * 89px rather than the 172px desktop track. Hanging it outside at 390 put
	 * half of it over the card above and 10px of it off the screen edge.
	 */
	.sea-card .se-tab,
	.sea-card--lg .se-tab {
		top: 0.75rem;
		right: 0.75rem;
	}

	.sea-card .se-tab--card .se-tab__row,
	.sea-card .se-tab .se-tab__row {
		min-width: 5.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sea-card__img,
	.sea-card .se-tab,
	.se-tab--btn {
		transition: none;
	}
}