/*
 * Features hub (templates/page-features.php).
 *
 * utilities.css is a static port (no build pipeline), so this file provides
 * everything the hub needs beyond the shared utilities: the browser-chrome
 * frame for product visuals, screenshot placeholder slots, the CSS-built UI
 * mockups (compliance card, quick-log form, supervisor list), and checkmark
 * capability lists.
 */

/* ---- Section scaffolding ------------------------------------------------ */

.ft-section {
	padding-top: 4.5rem;
	padding-bottom: 4.5rem;
}

/* Alternate column order on desktop so visuals zigzag down the page. */
@media (min-width: 1024px) {
	.ft-flip > :first-child { order: 2; }
	.ft-flip > :last-child  { order: 1; }
}

/* ---- Capability checklists ---------------------------------------------- */

.ft-check {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ft-check li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.625rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #4b5563;
}

.ft-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 9999px;
	background: #ecfdf5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23059669'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") center / 0.65rem no-repeat;
}

/* ---- Browser-chrome frame for product visuals --------------------------- */

.ft-frame {
	border-radius: 16px;
	background: #fff;
	border: 1px solid #e5e7eb;
	box-shadow: 0 18px 45px -18px rgba(34, 0, 102, 0.28);
	overflow: hidden;
}

.ft-frame-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	background: #f9fafb;
	border-bottom: 1px solid #e5e7eb;
}

.ft-frame-bar span {
	width: 10px;
	height: 10px;
	border-radius: 9999px;
	background: #e5e7eb;
}

/* Screenshot slot: replaced with a real export when provided. */
.ft-shot {
	aspect-ratio: 16 / 10;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1.5rem;
	background: linear-gradient(135deg, #f6f3fc 0%, #ece5f8 100%);
	color: #7c5ccf;
	font-size: 0.8125rem;
	font-weight: 600;
}

/* ---- CSS-built UI mockups ----------------------------------------------- */

.ft-mock {
	padding: 1.25rem;
	background: #fff;
}

.ft-mock-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.8125rem;
	font-weight: 700;
	color: #111827;
	margin-bottom: 0.875rem;
}

.ft-mock-tag {
	font-size: 0.6875rem;
	font-weight: 600;
	color: #6b7280;
	background: #f3f4f6;
	border-radius: 9999px;
	padding: 0.125rem 0.625rem;
}

.ft-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.625rem 0;
	border-top: 1px solid #f3f4f6;
	font-size: 0.8125rem;
	color: #374151;
}

.ft-row:first-of-type { border-top: 0; }

.ft-pill-ok,
.ft-pill-warn {
	flex-shrink: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	border-radius: 9999px;
	padding: 0.1875rem 0.625rem;
	white-space: nowrap;
}

.ft-pill-ok   { background: #ecfdf5; color: #047857; }
.ft-pill-warn { background: #fffbeb; color: #b45309; }

/* Mini progress bars used in mock rows. */
.ft-bar {
	flex: 1;
	height: 6px;
	border-radius: 9999px;
	background: #f3f4f6;
	overflow: hidden;
}

.ft-bar i {
	display: block;
	height: 100%;
	border-radius: 9999px;
	background: linear-gradient(90deg, #7c5ccf, #5b34b5);
}

/* Category chips in the quick-log mockup. */
.ft-chip {
	font-size: 0.6875rem;
	font-weight: 600;
	border-radius: 9999px;
	padding: 0.25rem 0.75rem;
	background: #f3f4f6;
	color: #6b7280;
}

.ft-chip-on {
	background: #5b34b5;
	color: #fff;
}

/* Faux input rows in the quick-log mockup. */
.ft-input {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.8125rem;
	color: #374151;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 0.5rem 0.75rem;
	margin-bottom: 0.5rem;
}

.ft-input b { font-weight: 700; color: #111827; }

/* ---- Achievements mockup badges ---------------------------------------- */
.ft-badges { display: flex; gap: 0.5rem; margin-bottom: 0.25rem; }
.ft-badge { width: 2.5rem; height: 2.5rem; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; border: 2px solid transparent; }
.ft-badge-gold   { background: #fffbeb; border-color: #f59e0b; }
.ft-badge-silver { background: #f8fafc; border-color: #94a3b8; }
.ft-badge-bronze { background: #fff7ed; border-color: #d97706; }
.ft-badge-locked { background: #f3f4f6; filter: grayscale(1); opacity: 0.5; }

/* ---- /features/ hub cards ---------------------------------------------- */
.feature-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e2e2ec;
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.feature-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -18px rgba(34, 0, 102, 0.28);
	border-color: #ddd0f7;
}
.feature-card-media { padding: 1.25rem 1.25rem 0; background: linear-gradient(135deg, #f7f4fd 0%, #eee8fb 100%); }
.feature-card-media .ft-frame { box-shadow: 0 10px 28px -14px rgba(34, 0, 102, 0.30); }
.feature-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.5rem 1.5rem; }
.feature-card-eyebrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.feature-card-icon { width: 2.25rem; height: 2.25rem; border-radius: 10px; background: #f7f4fd; color: #5b34b5; display: inline-flex; align-items: center; justify-content: center; }
.feature-card-icon svg { width: 1.25rem; height: 1.25rem; }
.feature-tag-free { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #047857; background: #ecfdf5; border-radius: 9999px; padding: 0.25rem 0.625rem; }
.feature-card-title { font-size: 1.125rem; font-weight: 800; color: #1a1a2e; letter-spacing: -0.01em; margin: 0 0 0.5rem; }
.feature-card-intro { font-size: 0.9375rem; line-height: 1.6; color: #5e5e78; margin: 0 0 1rem; flex: 1; }
.feature-card-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.875rem; font-weight: 700; color: #5b34b5; }
.feature-card-link svg { transition: transform 150ms ease; }
.feature-card:hover .feature-card-link svg { transform: translateX(3px); }

/* ---- Roadmap band ------------------------------------------------------ */
.roadmap-card { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border: 1px solid #e2e2ec; border-radius: 16px; padding: 1.5rem; }
.roadmap-icon { width: 2.75rem; height: 2.75rem; border-radius: 12px; background: #f7f4fd; color: #5b34b5; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.roadmap-icon svg { width: 1.4rem; height: 1.4rem; }
.roadmap-head { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.375rem; }
.roadmap-title { font-size: 1.0625rem; font-weight: 700; color: #1a1a2e; margin: 0; }
.roadmap-tag { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #92400e; background: #fef3c7; border-radius: 9999px; padding: 0.15rem 0.5rem; }
.roadmap-body { font-size: 0.9375rem; line-height: 1.6; color: #5e5e78; margin: 0; }

/* ---- Detail page: benefits / steps / faq -------------------------------- */
.benefit-card { background: #fff; border: 1px solid #e2e2ec; border-radius: 16px; padding: 1.5rem; }
.benefit-check { width: 2.5rem; height: 2.5rem; border-radius: 12px; background: #ecfdf5; color: #059669; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.benefit-title { font-size: 1.0625rem; font-weight: 700; color: #1a1a2e; margin: 0 0 0.5rem; }
.benefit-body { font-size: 0.9375rem; line-height: 1.65; color: #5e5e78; margin: 0; }
.step-card { text-align: center; padding: 0.5rem; }
.step-num { width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: #5b34b5; color: #fff; font-weight: 800; font-size: 1.125rem; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.step-title { font-size: 1.0625rem; font-weight: 700; color: #1a1a2e; margin: 0 0 0.5rem; }
.step-body { font-size: 0.9375rem; line-height: 1.6; color: #5e5e78; margin: 0; }
.faq-item { background: #fff; border: 1px solid #e2e2ec; border-radius: 14px; padding: 1.25rem 1.5rem; }
.faq-q { font-size: 1rem; font-weight: 700; color: #1a1a2e; margin: 0 0 0.375rem; }
.faq-a { font-size: 0.9375rem; line-height: 1.65; color: #5e5e78; margin: 0; }

/* Feature detail: utilities not present in the compiled subset */
@media (min-width: 1024px) { .lg\:justify-start { justify-content: flex-start; } }

/* Hour-logging allotment sections: green left-border/tint (matches the app's
   Supervised section). border-emerald-500 isn't in the compiled utility subset. */
.border-emerald-500 { border-color: var(--color-emerald-500); }

/* Features hub: alternating hero rows. On desktop, even rows put the mockup on the
   left; on mobile every row stacks text-first for consistency. */
@media (min-width: 64rem) {
  .feat-media-left { order: -1; }
}