/* Fitxa Llibre — component BookDetail (R3awz). Prefix .fitxa per evitar col·lisions. */

.fitxa { padding: 40px var(--pad-x) 80px; display: flex; flex-direction: column; gap: 48px; }

.fitxa-crumb {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 1px;
	color: var(--ink-faint);
	text-transform: uppercase;
}

/* BookHero — alçada fixa, amplada segons la proporció real (aspect-ratio inline), sense retall. */
.fitxa-hero { display: flex; align-items: flex-start; gap: 56px; }
.fitxa-hero__cover {
	flex: 0 0 auto;
	height: 506px; max-width: 100%;
	border-radius: 3px; overflow: hidden;
	box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.22);
}
.fitxa-hero__cover img {
	width: 100%; height: 100%; object-fit: contain; display: block;
}
.fitxa-hero__left { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 100%; }
.fitxa-hero__info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 22px; }

/* Nota sota la portada: hi ha mostra de lectura. */
.fitxa-cover-note {
	display: inline-flex; align-items: center; gap: 8px; margin: 0;
	font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-faint);
}

.fitxa-tagrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.fitxa-kicker { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 2px; color: var(--wine); text-transform: uppercase; }
/* Variant exhaurit: el kicker passa a pastilla vinosa (frame Out of Print). */
.fitxa-kicker--pill {
	font-family: var(--font-ui); font-size: 11px; letter-spacing: 1.2px;
	background: var(--wine); color: var(--paper);
	padding: 7px 12px; border-radius: 2px;
}
.fitxa-stocktag {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 7px 12px; border: 1px solid var(--line); border-radius: 2px;
	font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: .4px;
	color: var(--ink-soft);
}
.fitxa-stocktag__dot { width: 7px; height: 7px; border-radius: 50%; background: #C8362A; }

.fitxa-titlewrap { display: flex; flex-direction: column; gap: 8px; }
.fitxa-title { font-family: var(--font-display); font-weight: 600; font-size: 48px; letter-spacing: -1px; line-height: 1.04; margin: 0; }
.fitxa-author { font-family: var(--font-body); font-size: 17px; color: var(--ink-soft); margin: 0; }

.fitxa-formats { display: flex; gap: 10px; padding: 6px 0; }
.fitxa-format {
	font-family: var(--font-ui); font-weight: 500; font-size: 13px;
	padding: 10px 18px; border-radius: 2px; border: 1px solid var(--line);
	background: var(--paper-card); color: var(--ink); cursor: pointer;
}
.fitxa-format.is-selected { background: var(--wine); border-color: var(--wine); color: #fff; font-weight: 600; }
.fitxa-format input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fitxa-format:has(input:focus-visible) { outline: 2px solid var(--wine); outline-offset: 2px; }
.fitxa-format.is-disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }

/* BuyRow */
.fitxa-buy { display: flex; align-items: center; gap: 20px; padding: 8px 0; flex-wrap: wrap; }
.fitxa-price { font-family: var(--font-display); font-weight: 700; font-size: 34px; color: var(--ink); }
.fitxa-buy__cart { gap: 10px; padding: 15px 28px; font-size: 15px; }
.fitxa-buy__wish {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 15px 18px; border: 1px solid var(--line); border-radius: 2px;
	font-family: var(--font-ui); font-size: 14px; color: var(--ink);
}
.fitxa-buy__wish:hover { border-color: var(--ink); }

.fitxa-intro { font-family: var(--font-body); font-size: 17px; line-height: 1.55; color: var(--ink-soft); margin: 0; }

/* Primer capítol en PDF (només si hi ha fitxer) */
.fitxa-chapter { display: flex; flex-wrap: wrap; gap: 12px; padding: 2px 0; }
.fitxa-chapter .btn { gap: 11px; padding: 14px 22px; }

/* Visor del capítol (dialog natiu) */
body:has(.pdf-modal[open]) { overflow: hidden; }
.pdf-modal {
	width: min(920px, 92vw);
	height: min(88vh, 1000px);
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: var(--paper);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45);
	overflow: hidden;

	/* Fade-in-up en obrir, fade-out-down en tancar. `allow-discrete` manté el
	   <dialog> en pantalla mentre dura la transició de tancament. */
	opacity: 0;
	transform: translateY(26px);
	transition:
		opacity .26s ease,
		transform .32s cubic-bezier(.16, 1, .3, 1),
		display .32s allow-discrete,
		overlay .32s allow-discrete;
}
.pdf-modal[open] { opacity: 1; transform: translateY(0); }
@starting-style {
	.pdf-modal[open] { opacity: 0; transform: translateY(26px); }
}

.pdf-modal::backdrop {
	background: rgba(28, 20, 24, .62);
	opacity: 0;
	transition: opacity .26s ease, display .26s allow-discrete, overlay .26s allow-discrete;
}
.pdf-modal[open]::backdrop { opacity: 1; }
@starting-style {
	.pdf-modal[open]::backdrop { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.pdf-modal, .pdf-modal::backdrop { transition: none; }
	.pdf-modal { transform: none; }
}
.pdf-modal__bar {
	display: flex; align-items: center; gap: 16px;
	padding: 12px 14px 12px 20px;
	border-bottom: 1px solid var(--line);
	background: var(--paper-card);
}
.pdf-modal__title {
	flex: 1 1 auto; min-width: 0;
	font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--ink);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdf-modal__dl {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 14px; border: 1px solid var(--ink); border-radius: 2px;
	font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--ink);
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}
.pdf-modal__dl:hover { background: var(--ink); color: var(--paper); }
.pdf-modal__close {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; padding: 0;
	border: 0; border-radius: 2px; background: transparent; color: var(--ink-soft);
	cursor: pointer;
}
.pdf-modal__close:hover { background: var(--line); color: var(--ink); }
.pdf-modal__frame {
	display: block; width: 100%; height: calc(100% - 61px);
	border: 0; background: var(--paper-2);
}

/* Sinopsi + Details */
.fitxa-detail { display: flex; align-items: flex-start; gap: 56px; }
.fitxa-sinopsi { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.fitxa-sinopsi p { font-family: var(--font-body); font-size: 17px; line-height: 1.65; color: var(--ink-soft); margin: 0; }
/* Contingut heretat: imatges contingudes i "títols" en negreta llegibles. */
.fitxa-sinopsi img { max-width: 100%; height: auto; border-radius: 2px; margin: 4px 0; }
.fitxa-sinopsi strong { color: var(--ink); font-weight: 700; }
.fitxa-sinopsi a { color: var(--wine); text-decoration: underline; }
.fitxa-h2 { font-family: var(--font-display); font-weight: 600; font-size: 26px; margin: 0; }

.fitxa-details-card { flex: 0 0 380px; background: var(--paper-card); border: 1px solid var(--line); border-radius: 2px; }
.fitxa-details-card__head {
	font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 1.5px;
	color: var(--ink); padding: 14px 20px; border-bottom: 1px solid var(--line);
}
.fitxa-details-card__row {
	display: flex; align-items: center; justify-content: space-between;
	padding: 13px 20px; border-bottom: 1px solid var(--line);
}
.fitxa-details-card__row:last-child { border-bottom: 0; }
.fitxa-details-card__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .5px; color: var(--ink-faint); }
.fitxa-details-card__value { font-family: var(--font-ui); font-weight: 500; font-size: 13px; color: var(--ink); text-align: right; }

/* També et pot agradar */
.fitxa-related { display: flex; flex-direction: column; gap: 24px; }
.fitxa-related .fitxa-h2 { font-size: 28px; }
/* Escriptori: el mateix flex que la resta de llistats. La graella 2×2 només en mòbil. */
.fitxa-related .book-grid { gap: 40px 32px; }

/* Avís Exhaurit: ocult per defecte (frame Out of Print) */
.fitxa-exhaurit-note {
	display: none; align-items: flex-start; gap: 14px;
	padding: 18px; border: 1px solid var(--line); border-radius: 2px;
	background: var(--paper-2);
}
.fitxa-exhaurit-note__icon { flex: 0 0 auto; color: var(--ink-soft); }
.fitxa-exhaurit-note__text { display: flex; flex-direction: column; gap: 6px; }
.fitxa-exhaurit-note__title { margin: 0; font-family: var(--font-ui); font-size: 16px; font-weight: 600; color: var(--ink); }
.fitxa-exhaurit-note__desc { margin: 0; font-family: var(--font-ui); font-size: 14px; line-height: 1.45; color: var(--ink-soft); }

/* On trobar-lo */
.fitxa-where {
	display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 0;
	font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
.fitxa-where__label { font-weight: 400; color: var(--ink-faint); }
.fitxa-where__sep { color: var(--line); font-weight: 400; }

/* ponytail: variant Out of Print. Afegir .is-exhaurit a .fitxa oculta la BuyRow i mostra l'avís. */
.fitxa.is-exhaurit .fitxa-buy,
.fitxa.is-exhaurit .fitxa-formats { display: none; }
.fitxa.is-exhaurit .fitxa-exhaurit-note { display: flex; }


@media (max-width: 900px) {
	.fitxa-hero { flex-direction: column; gap: 32px; }
	.fitxa-hero__cover { height: 380px; }
	.fitxa-detail { flex-direction: column; gap: 40px; }
	.fitxa-details-card { flex: 1 1 auto; width: 100%; }
}

@media (max-width: 768px) {
	.fitxa-title { font-size: 34px; }
	/* Mòbil: els 4 relacionats en graella 2×2 (el flex els deixaria en una fila estreta). */
	.fitxa-related .book-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	.fitxa-related .book-grid::after { content: none; }
	.fitxa-format { display: inline-flex; align-items: center; min-height: 44px; }
	.fitxa-chapter .btn { flex: 1 1 100%; justify-content: center; }
}

/* Bloc d'autor (des de la fitxa de l'autor, no de la descripció del llibre) */
.fitxa-autor {
	display: flex;
	align-items: flex-start;
	gap: 44px;
	padding: 44px 0;
	border-top: 1px solid var(--line);
}
.fitxa-autor__photo {
	flex: 0 0 auto;
	width: 200px;
	aspect-ratio: 3 / 4;
	border-radius: 2px;
	overflow: hidden;
	background: var(--paper-2);
}
.fitxa-autor__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fitxa-autor__photo--empty { display: flex; align-items: center; justify-content: center; }
.fitxa-autor__photo--empty .fitxa-autor__isotip { width: 46%; height: auto; object-fit: contain; opacity: .42; }
.fitxa-autor__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.fitxa-autor__name { margin: 0; font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--ink); }
.fitxa-autor__bio p { margin: 0 0 12px; font-family: var(--font-body); font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); }
.fitxa-autor__bio p:last-child { margin-bottom: 0; }
.fitxa-autor__link {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
	font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--wine);
}
.fitxa-autor__link:hover { text-decoration: underline; }

@media (max-width: 768px) {
	.fitxa-autor { flex-direction: column; gap: 24px; }
	.fitxa-autor__photo { width: 160px; }
}