/* ElOficio — extraído de src/lib/components/ElOficio.svelte.
   Scopeado con anidamiento nativo bajo su raíz para evitar colisiones
   de nombres de clase al pasar de CSS scoped de Svelte a CSS global. */

.oficio {
	background: var(--bg);
	color: var(--fg);
	padding: var(--section-y) 0;

	.head {
		padding: 0 var(--pad);
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		flex-wrap: wrap;
		gap: var(--space-5);
		margin-bottom: var(--space-9);
	}

	.head .eyebrow {
		color: var(--on-dark-muted);
		margin-bottom: var(--space-4);
	}

	.title {
		font-family: var(--serif);
		font-size: var(--fs-h2);
		font-weight: 400;
		line-height: 0.96;
	}

	.ital {
		font-style: italic;
	}

	.intro {
		max-width: 38ch;
		margin: 0;
		color: var(--on-dark-muted);
		font-size: var(--fs-lg);
		line-height: 1.55;
		text-wrap: pretty;
	}

	.viewport {
		padding: 0 var(--pad);
	}

	.track {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: var(--space-5);
	}

	/* Horizontal mode (desktop, motion on): a single off-screen row that the
	   pinned ScrollTrigger translates on the x-axis. The off-screen track must
	   not stretch the section past the viewport, or the (centered) header gets
	   pushed off-screen — so cap the section to 100vw and clip the overflow. */
	&.horizontal {
		padding-bottom: var(--section-y);
		min-height: 100vh;
		max-width: 100vw;
		overflow-x: clip;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--space-8);
	}

	&.horizontal .head {
		width: 100%;
		margin-bottom: 0;
	}

	&.horizontal .viewport {
		width: 100%;
		overflow: hidden;
		padding-right: 0;
	}

	&.horizontal .track {
		display: flex;
		grid-template-columns: none;
		gap: var(--space-6);
		width: max-content;
		will-change: transform;
		padding-right: var(--pad);
	}

	&.horizontal .sc-card {
		width: 340px;
		flex: 0 0 340px;
	}

	.sc-card {
		display: flex;
		flex-direction: column;
	}

	.frame {
		position: relative;
		overflow: hidden;
		aspect-ratio: 3 / 4;
		border-radius: var(--radius);
		margin-bottom: var(--space-5);
		background: var(--tinta-2);
	}

	.frame .photo {
		transition: transform 0.7s var(--ease);
	}

	.sc-card:hover .frame .photo,
	.sc-card:hover .frame {
		transform: none;
	}

	.sc-card:hover .frame .photo {
		transform: scale(1.06);
	}

	.meta {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		border-top: 1px solid var(--line-on-dark);
		padding-top: var(--space-4);
		margin-bottom: var(--space-3);
	}

	.n {
		font-family: var(--sans);
		font-size: var(--fs-sm);
		font-weight: 600;
		color: var(--on-dark);
		transition: color 0.3s;
	}

	.sc-card:hover .n {
		color: var(--accent);
	}

	.tag {
		font-family: var(--sans);
		font-size: var(--fs-micro);
		font-weight: 600;
		letter-spacing: var(--track-caps-xs);
		text-transform: uppercase;
		color: var(--on-dark-muted);
	}

	h3 {
		font-family: var(--serif);
		font-size: var(--fs-h3);
		font-weight: 400;
		margin: 0 0 var(--space-2);
		line-height: 1.02;
	}

	.sc-card p {
		margin: 0;
		color: var(--on-dark-muted);
		font-size: var(--fs-sm);
		line-height: 1.55;
	}

	/* Desde que cada capítulo es un producto, la tarjeta es comprable: enlaza,
	   muestra precio y cierra con su botón. Antes era sólo texto y foto. */
	h3 a,
	.frame.hot {
		color: inherit;
		text-decoration: none;
		display: block;
	}

	h3 a:hover {
		color: var(--accent);
	}

	.sc-card .foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-4);
		border-top: 1px solid var(--line-on-dark);
		margin-top: var(--space-4);
		padding-top: var(--space-4);
	}

	.sc-card .price {
		font-family: var(--sans);
		font-weight: 700;
		font-size: var(--fs-sm);
		color: var(--on-dark);
		white-space: nowrap;
	}

	.sc-card .foot .btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-family: var(--sans);
		font-size: var(--fs-micro);
		font-weight: 600;
		letter-spacing: var(--track-caps-md);
		text-transform: uppercase;
		text-decoration: none;
		padding: var(--btn-pad-sm);
		border: 1px solid var(--line-on-dark-strong);
		border-radius: 100px;
		color: var(--on-dark);
		white-space: nowrap;
		transition: background-color 0.25s, color 0.25s, border-color 0.25s;
	}

	.sc-card .foot .btn:hover {
		background: var(--accent);
		border-color: var(--accent);
		color: var(--accent-ink);
	}

	@media (max-width: 899px) {
		.track {
			grid-template-columns: 1fr 1fr;
			gap: var(--space-4);
		}
		.head {
			margin-bottom: var(--space-7);
		}
	}

	@media (max-width: 540px) {
		.track {
			grid-template-columns: 1fr;
			gap: var(--space-6);
		}
		.frame {
			aspect-ratio: 4 / 3;
		}
	}
}