/* ==========================================================================
   Caràtules de programa: disc de vinil o CD generats només amb CSS.
   Colors per programa: --c1 (fons) i --c2 (accent). Estampat: data-patro 1–6.
   ========================================================================== */

.caratula {
	--radi: 3px;
	position: relative;
	display: block;
	aspect-ratio: 1;
	color: #111;
	text-decoration: none;
	isolation: isolate;
	container-type: inline-size;
}

/* ---- Funda ---- */
.caratula__funda {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	border-radius: var(--radi);
	background-color: var(--c1, #1d3557);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 24px -8px rgba(0, 0, 0, .55), 0 2px 4px rgba(0, 0, 0, .25);
}

.caratula__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Estampats */
.caratula[data-patro="1"] .caratula__funda { background-image: repeating-linear-gradient(135deg, var(--c2) 0 7%, transparent 7% 14%); }
.caratula[data-patro="2"] .caratula__funda { background-image: repeating-radial-gradient(circle at 78% 22%, var(--c2) 0 5%, transparent 5% 10%); }
.caratula[data-patro="3"] .caratula__funda { background-image: repeating-conic-gradient(from 0deg at 50% 108%, var(--c2) 0 5deg, transparent 5deg 10deg); }
.caratula[data-patro="4"] .caratula__funda { background-image: radial-gradient(circle, var(--c2) 30%, transparent 32%); background-size: 14% 14%; background-position: 3% 3%; }
.caratula[data-patro="5"] .caratula__funda { background-image: repeating-linear-gradient(180deg, var(--c2) 0 8%, transparent 8% 16%); }
.caratula[data-patro="6"] .caratula__funda {
	background-image:
		linear-gradient(var(--c2) 0 2px, transparent 2px),
		linear-gradient(90deg, var(--c2) 0 2px, transparent 2px),
		radial-gradient(circle at 75% 25%, var(--c2) 0 18%, transparent 18.5%);
	background-size: 12.5% 12.5%, 12.5% 12.5%, 100% 100%;
}

/* Etiqueta amb el nom: sempre fons clar i text fosc, perquè es llegeixi bé. */
.caratula__text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: .25em;
	max-width: calc(100% - 14cqi);
	margin: 7cqi;
	padding: 3.2cqi 4cqi 3.4cqi;
	background: #fffdf8;
	border-radius: 2px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}

.caratula__nom {
	font-family: var(--lletra-titol, system-ui, sans-serif);
	font-size: 1.1rem;
	font-size: 10cqi;
	font-weight: 800;
	line-height: .98;
	letter-spacing: -.02em;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.caratula__amb {
	font-size: .8rem;
	font-size: 6.2cqi;
	font-weight: 500;
	line-height: 1.2;
	color: #3b3f46;
}

/* Caràtula amb imatge pròpia: la imatge ja duu el títol, l'etiqueta queda només per als lectors de pantalla. */
.caratula--imatge .caratula__text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.caratula--imatge .caratula__img { z-index: 1; }
.caratula--imatge.caratula--cd .caratula__funda::before { z-index: 2; }
.caratula--imatge.caratula--cd .caratula__funda::after { z-index: 2; }

/* ---- Disc de vinil ---- */
.caratula__disc {
	position: absolute;
	inset: 3%;
	z-index: 1;
	border-radius: 50%;
	background:
		conic-gradient(from 30deg, rgba(255, 255, 255, 0) 0 10%, rgba(255, 255, 255, .16) 14%, rgba(255, 255, 255, 0) 20% 55%, rgba(255, 255, 255, .12) 60%, rgba(255, 255, 255, 0) 66%),
		repeating-radial-gradient(circle, #121212 0 1.2%, #1f1f1f 1.2% 1.6%);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
	transform: translateX(10%);
	transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.caratula__galeta {
	position: absolute;
	inset: 34%;
	border-radius: 50%;
	background: radial-gradient(circle, #111 0 7%, var(--c2) 7.5% 100%);
	box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .15);
}

/* ---- CD ---- */
.caratula--cd { --radi: 5px; }

.caratula--cd .caratula__funda::before { /* llom de la capsa */
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 6%;
	background: rgba(0, 0, 0, .28);
	border-right: 1px solid rgba(255, 255, 255, .35);
}

.caratula--cd .caratula__funda::after { /* reflex del plàstic */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(125deg, rgba(255, 255, 255, .38) 0 18%, rgba(255, 255, 255, 0) 32% 100%);
	pointer-events: none;
}

.caratula--cd .caratula__text { margin-left: 11cqi; max-width: calc(100% - 18cqi); }

.caratula--cd .caratula__disc {
	inset: 5%;
	background:
		radial-gradient(circle, transparent 0 7%, rgba(255, 255, 255, .9) 7.5% 16%, rgba(200, 205, 212, .9) 16.5% 17.5%, transparent 18%),
		conic-gradient(from 0deg, #dfe3e8, #f6d7f0, #cfe8ff, #e9f7d5, #fff1c9, #dfe3e8, #c7f0f0, #f3d6ff, #dfe3e8);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 6px 18px rgba(0, 0, 0, .35);
}
.caratula--cd .caratula__galeta { display: none; }

/* ---- Interacció: el disc surt de la funda ---- */
a.caratula:hover .caratula__disc,
a.caratula:focus-visible .caratula__disc {
	transform: translateX(34%) rotate(120deg);
}

a.caratula:focus-visible { outline: none; }
a.caratula:focus-visible .caratula__funda { outline: 3px solid #ffb703; outline-offset: 3px; }

/* ---- Mida petita (targetes): el nom ja surt al costat, la caràtula només és la imatge ---- */
.caratula--petita .caratula__text { display: none; }
.caratula--petita .caratula__disc { transform: translateX(8%); }

@media (prefers-reduced-motion: reduce) {
	.caratula__disc { transition: none; }
}