/* ==========================================================================
   plugin.css — /plugins/ archive and plugin detail pages.
   ========================================================================== */

/* Detail: top band ---------------------------------------------------------- */
.plugin-top { background: var(--cx-tint); }
.plugin-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
	padding-block: 24px 80px;
}
.plugin-hero .icon-tile { margin-bottom: 24px; }
.plugin-hero__title { font-size: clamp(38px, 4.6vw, 60px); }
.plugin-hero__text { margin-top: 24px; font-size: 18px; max-width: 60ch; }
.plugin-hero .btn-row { margin-top: 32px; }
.plugin-hero__tags { margin-top: 28px; }

.glance {
	background: #fff;
	border: 1px solid var(--cx-line);
	border-radius: var(--cx-r-card);
	padding: 28px;
	position: sticky;
	top: calc(var(--cx-header-h) + 24px);
}
.glance__title { font-size: 18px; margin-bottom: 16px; }
.glance__count { color: var(--cx-muted); font-weight: 400; font-size: 14px; }
.glance__btn { margin-top: 20px; }
.glance__note { font-size: 13px; color: var(--cx-soft); text-align: center; margin-top: 12px; }

@media (max-width: 991.98px) {
	.plugin-hero { grid-template-columns: 1fr; }
	.glance { position: static; }
}

.section--flush-bottom { padding-bottom: 0; }
.plugin-intro { max-width: 760px; }

/* Screenshots carousel ------------------------------------------------------ */
.shots__stage {
	border: 1px solid var(--cx-line);
	border-radius: var(--cx-r-card);
	background: var(--cx-grey);
	box-shadow: 0 24px 60px -32px rgba(31, 27, 89, .35);
}
.shots .carousel-item { margin: 0; padding: clamp(12px, 2vw, 24px); text-align: center; }
.shots .carousel-item img { max-height: 620px; width: auto; max-width: 100%; border-radius: 6px; border: 1px solid var(--cx-line-soft); background: #fff; }
.shots__ctrl {
	width: 48px; height: 48px; top: 50%; bottom: auto; transform: translateY(-50%);
	border-radius: 99px; background: #fff; border: 1px solid var(--cx-line);
	color: var(--cx-ink); opacity: 1; margin-inline: 16px;
	box-shadow: 0 8px 20px -10px rgba(7, 7, 7, .3);
}
.shots__ctrl:hover { color: var(--cx-indigo); border-color: var(--cx-indigo); }
.shots__thumbs {
	position: static; margin: 16px 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;
}
.shots__thumbs [data-bs-target].shots__thumb {
	width: auto; height: auto; margin: 0; text-indent: 0; opacity: 1;
	border: 1px solid var(--cx-line); border-radius: 6px; background: #fff;
	padding: 12px 14px; font-size: 14px; color: var(--cx-muted); text-align: left;
	display: flex; gap: 8px; align-items: baseline;
	transition: .15s;
}
.shots__thumbs .shots__thumb:hover { color: var(--cx-ink); border-color: var(--cx-indigo-300); }
.shots__thumbs .shots__thumb.active { border-color: var(--cx-indigo); color: var(--cx-indigo); box-shadow: 0 0 0 3px var(--cx-indigo-100); }
.shots__num { font-family: var(--cx-ff-mono); font-size: 12px; color: var(--cx-soft); }
.shots__thumb.active .shots__num { color: var(--cx-indigo); }
@media (max-width: 575.98px) { .shots__ctrl { display: none; } }

/* FAQ layout ---------------------------------------------------------------- */
.faq-split {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}
.faq-split__text { margin-top: 20px; font-size: 18px; }
.faq-split__text a { color: var(--cx-indigo); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 991.98px) { .faq-split { grid-template-columns: 1fr; } }