/* Pic-O-Pine (v2) — Frontend styles
   Goal: predictable grid sizing (2–6 images), non-giant images, clear selection + results.
*/

.picopine {
	max-width: 980px;
	margin: 16px auto;
	padding: 14px;
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 14px;
	background: #fff;
	box-sizing: border-box;
}

.picopine-title,
.picopine__title {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}

.picopine-note,
.picopine__message,
.picopine__rules {
	font-size: 13px;
	opacity: .85;
}

/* ------------------------------------------------------------
 * New markup (current renderer)
 * ---------------------------------------------------------- */

.picopine-options {
	display: grid;
	gap: 10px;
	/* Responsive grid: 2 columns on phones, 3 on larger screens.
	   Tiles will not become gigantic because height is constrained via aspect-ratio.
	*/
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 720px) {
	.picopine-options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 420px) {
	.picopine-options {
		grid-template-columns: 1fr;
	}
}

.picopine-option {
	position: relative;
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 14px;
	overflow: hidden;
	background: #fafafa;
	cursor: pointer;
	user-select: none;
	/* Keep tiles consistent */
	aspect-ratio: 1 / 1;
}

.picopine-option img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.picopine-option.is-selected {
	outline: 3px solid rgba(0,0,0,.35);
	outline-offset: -3px;
}

.picopine-option.is-dimmed {
	opacity: 0.45;
}

.picopine-actions {
	margin-top: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.picopine-selection-count {
	font-size: 13px;
	opacity: .85;
}

.picopine-vote-btn {
	padding: 10px 14px;
	border-radius: 12px;
	border: 1px solid rgba(0,0,0,.15);
	background: #fff;
	font-weight: 700;
	cursor: pointer;
}

.picopine-vote-btn[disabled] {
	opacity: .55;
	cursor: not-allowed;
}

/* Results overlay (bar + percent) */
.picopine-bar {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 26%;
	background: rgba(0,0,0,.18);
	width: 0%;
	transition: width 250ms ease;
}

.picopine-percent {
	position: absolute;
	inset: auto 10px 10px 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 26%;
	border-radius: 999px;
	background: rgba(255,255,255,.85);
	border: 1px solid rgba(0,0,0,.10);
	font-size: 12px;
	font-weight: 800;
}

/* Locking state — prevent any interaction */
.picopine--locking {
	opacity: 0.9;
	pointer-events: none;
}

/* ------------------------------------------------------------
 * Backward compatibility (older markup still present in codebase)
 * ---------------------------------------------------------- */

.picopine__grid { display: grid; gap: 10px; }
.picopine__grid--2 { grid-template-columns: repeat(2, 1fr); }
.picopine__grid--3 { grid-template-columns: repeat(3, 1fr); }
.picopine__grid--4,
.picopine__grid--5,
.picopine__grid--6 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 720px) {
	.picopine__grid--2 { grid-template-columns: 1fr; }
	.picopine__grid--3,
	.picopine__grid--4,
	.picopine__grid--5,
	.picopine__grid--6 { grid-template-columns: repeat(2, 1fr); }
}

.picopine__card {
	width: 100%;
	text-align: left;
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 14px;
	overflow: hidden;
	background: transparent;
	padding: 0;
	cursor: pointer;
}

.picopine__card[disabled] { opacity: .65; cursor: not-allowed; }
.picopine__card.is-selected { outline: 3px solid rgba(0,0,0,.35); outline-offset: -3px; }

.picopine__img img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.picopine__result {
	display: block;
	position: relative;
	height: 16px;
	margin: 10px;
	border-radius: 999px;
	overflow: hidden;
	border: 1px solid rgba(0,0,0,.10);
	background: rgba(0,0,0,.04);
}

.picopine__bar { display: block; height: 100%; background: rgba(0,0,0,.18); width: 0%; }
.picopine__pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 800; }

.picopine--error { border-color: rgba(220,0,0,.25); }
.picopine--info { border-color: rgba(0,120,220,.20); }