/* Os Quatro Pilares - versao arco. Tudo escopado em .cdt-arco. */

.cdt-arco {
	--cdt-bg: #fff9f9;
	--cdt-border: #edcbcb;
	--cdt-title: #3f3f3f;
	--cdt-accent: #cc0000;
	--cdt-gold: #c9a227;

	container: cdt-arco / inline-size;
	box-sizing: border-box;
	max-width: 760px;
	margin: 0 auto;
	padding: 20px 12px;
	background: var(--cdt-bg);
	border: 1px solid var(--cdt-border);
	color: inherit;
	font: inherit;
}

.cdt-arco *,
.cdt-arco *::before,
.cdt-arco *::after {
	box-sizing: border-box;
}

/* ---------- Linha 1: maco em arco ---------- */

/* Unidades cqw = % da largura do palco; o arco escala com a coluna do post */
.cdt-arco__stage {
	container-type: inline-size;
	max-width: 660px;
	margin: 0 auto;
}

.cdt-arco__fan {
	--c: 10cqw;                        /* largura da carta */
	--h: calc(var(--c) * 130 / 61);     /* altura da carta */
	--R: 45cqw;                        /* distancia do pivo ate a base da carta */
	--pivot: 67cqw;                    /* altura do pivo a partir do topo */
	--lift: 3.5cqw;                    /* quanto a carta escolhida sobe */

	position: relative;
	height: 43cqw;
}

.cdt-arco__card {
	position: absolute;
	top: calc(var(--pivot) - var(--R) - var(--h));
	left: calc(50% - var(--c) / 2);
	width: var(--c);
	height: var(--h);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transform-origin: 50% calc(100% + var(--R));
	transform: rotate(var(--a, 0deg)) translateY(var(--dy, 0px));
	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
	transition-delay: var(--delay, 0s);
	-webkit-tap-highlight-color: transparent;
}

.cdt-arco__card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: -1px 0 3px rgba(0, 0, 0, 0.3);
	pointer-events: none;
	transition: box-shadow 0.25s;
}

.cdt-arco__badge {
	position: absolute;
	top: 4%;
	left: 6%;
	display: none;
	width: clamp(14px, 4.2cqw, 22px);
	height: clamp(14px, 4.2cqw, 22px);
	border-radius: 50%;
	background: var(--cdt-accent);
	color: #fff;
	font-size: clamp(9px, 2.6cqw, 13px);
	font-weight: bold;
	line-height: clamp(14px, 4.2cqw, 22px);
	text-align: center;
	box-shadow: 0 0 0 1px #fff;
}

.cdt-arco__card.is-picked {
	--dy: calc(var(--lift) * -1);
	cursor: default;
}

.cdt-arco__card.is-picked img {
	box-shadow: 0 0 0 2px var(--cdt-gold), 0 0 10px rgba(201, 162, 39, 0.8);
}

.cdt-arco__card.is-picked .cdt-arco__badge {
	display: block;
}

.cdt-arco.is-locked .cdt-arco__card {
	cursor: default;
}

.cdt-arco.is-dealing .cdt-arco__card {
	pointer-events: none;
}

@media (hover: hover) {
	.cdt-arco:not(.is-locked) .cdt-arco__card:not(.is-picked):hover {
		--dy: calc(var(--lift) * -0.5);
	}
}

.cdt-arco__card:focus-visible {
	--dy: calc(var(--lift) * -0.5);
	outline: none;
}

.cdt-arco__card:focus-visible img {
	box-shadow: 0 0 0 2px var(--cdt-accent);
}

.cdt-arco__status {
	min-height: 1.5em;
	margin: 6px 0 0;
	font-size: var(--cdt-status-size, inherit);
	color: var(--cdt-status-color, var(--cdt-accent));
	font-weight: bold;
	text-align: var(--cdt-status-align, center);
}

/* ---------- Linha 2: resultado ---------- */

/* Estreito (celular / tablet): uma carta abaixo da outra, imagem entre titulo e texto.
   So aparecem as posicoes ja escolhidas. */
.cdt-arco__results {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	margin-top: 20px;
}

.cdt-arco__results:not(:has(.is-active)) {
	margin-top: 0;
}

.cdt-arco__slot {
	display: grid;
	grid-template-areas:
		"label"
		"title"
		"img"
		"text";
	justify-items: center;
	row-gap: 8px;
	text-align: center;
}

.cdt-arco__slot:not(.is-active) {
	display: none;
}

.cdt-arco__label {
	grid-area: label;
	color: var(--cdt-position-color, var(--cdt-accent));
	font-size: var(--cdt-position-size, 0.78em);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: var(--cdt-position-align, center);
}

.cdt-arco .cdt-arco__title {
	grid-area: title;
	margin: 0;
	color: var(--cdt-card-title-color, var(--cdt-title));
	font: inherit;
	font-size: var(--cdt-card-title-size, inherit);
	font-weight: var(--cdt-card-title-weight, bold);
	letter-spacing: normal;
	text-transform: none;
	text-align: var(--cdt-card-title-align, center);
}

.cdt-arco__flip {
	grid-area: img;
	width: 74px;
	aspect-ratio: 74 / 180;
	perspective: 800px;
}

.cdt-arco__flip-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.6s ease;
}

.cdt-arco__slot.is-revealed .cdt-arco__flip-inner {
	transform: rotateY(180deg);
}

.cdt-arco__flip img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.cdt-arco__flip .cdt-arco__face {
	transform: rotateY(180deg);
}

.cdt-arco__text {
	grid-area: text;
	justify-self: stretch;
	margin: 0;
	line-height: 1.5;
	font-size: var(--cdt-card-text-size, inherit);
	color: var(--cdt-card-text-color, inherit);
	text-align: var(--cdt-card-text-align, left);
}

.cdt-arco__title:empty,
.cdt-arco__text:empty {
	display: none;
}

.cdt-arco__slot.is-revealed .cdt-arco__title,
.cdt-arco__slot.is-revealed .cdt-arco__text {
	animation: cdt-arco-fade 0.5s ease 0.3s both;
}

@keyframes cdt-arco-fade {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}

/* Largo (desktop): quadro 2x2 com as 4 posicoes, imagem a esquerda */
@container cdt-arco (min-width: 600px) {
	.cdt-arco {
		padding: 24px 16px;
	}

	.cdt-arco__results,
	.cdt-arco__results:not(:has(.is-active)) {
		grid-template-columns: 1fr 1fr;
		gap: 30px 24px;
		margin-top: 20px;
	}

	.cdt-arco__slot,
	.cdt-arco__slot:not(.is-active) {
		display: grid;
		grid-template-columns: 74px 1fr;
		grid-template-rows: auto auto 1fr;
		grid-template-areas:
			"img label"
			"img title"
			"img text";
		justify-items: start;
		align-content: start;
		column-gap: 12px;
		row-gap: 6px;
		text-align: left;
	}
}

/* ---------- Nova consulta ---------- */

.cdt-arco__actions {
	margin-top: 24px;
	text-align: center;
}

.cdt-arco__actions[hidden] {
	display: none;
}

.cdt-arco__reset {
	padding: 8px 18px;
	border: 1px solid var(--cdt-button-border, var(--cdt-border));
	border-radius: 4px;
	background: var(--cdt-button-bg, #fff);
	color: var(--cdt-button-text, var(--cdt-accent));
	font: inherit;
	font-weight: bold;
	cursor: pointer;
}

.cdt-arco__reset:hover {
	background: var(--cdt-bg);
}

@media (prefers-reduced-motion: reduce) {
	.cdt-arco__card,
	.cdt-arco__flip-inner {
		transition: none;
	}
	.cdt-arco__slot.is-revealed .cdt-arco__title,
	.cdt-arco__slot.is-revealed .cdt-arco__text {
		animation: none;
	}
}