/* Projects: page hero, filters, card grid, detail page, CTA band. Card and filters from prototype/index.html. */

@layer inntek {
	.inntek-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--inntek-r-pill); background: var(--inntek-brand-soft); color: var(--inntek-brand-strong); font-size: 13px; font-weight: 600; white-space: nowrap; }

	/* Page hero */
	.inntek-page-hero { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--inntek-line); background: linear-gradient(180deg, var(--inntek-hero-bg-3), var(--inntek-bg)); }
	.inntek-page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgb(12 60 110 / 4.5%) 1px, transparent 1px), linear-gradient(90deg, rgb(12 60 110 / 4.5%) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(50% 60% at 70% 50%, #000 20%, transparent 80%); }
	.inntek-page-hero__inner { display: grid; gap: 16px; padding-block: clamp(40px, 6vw, 72px); }
	.inntek-page-hero h1 { max-width: 28ch; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.16; letter-spacing: -0.01em; }
	.inntek-page-hero .inntek-pill { justify-self: start; }
	.inntek-page-hero__media { margin-top: clamp(24px, 3vw, 40px); overflow: hidden; border: 1px solid var(--inntek-line); border-radius: var(--inntek-r-xl); background: var(--inntek-brand-tint); aspect-ratio: 16 / 9; }
	.inntek-page-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }

	/* Filters (links; current group has aria-current) */

	/* Grid and card */
	.inntek-project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
	.inntek-project-grid > li[hidden] { display: none; }
	.inntek-project-card { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--inntek-line); border-radius: var(--inntek-r-lg); background: var(--inntek-bg); transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; }
	.inntek-project-card:has(h3 a):hover { transform: translateY(-4px); box-shadow: var(--inntek-shadow-lift); }
	.inntek-project-card .inntek-thumb { overflow: hidden; border-bottom: 1px solid var(--inntek-line); background: var(--inntek-brand-tint); aspect-ratio: 16 / 10; }
	.inntek-project-card .inntek-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform 0.4s ease-out; }
	.inntek-project-card:has(h3 a):hover .inntek-thumb img { transform: scale(1.03); }
	.inntek-project-card__body { display: grid; flex: 1; gap: 8px; align-content: start; padding: 20px 22px 22px; }
	.inntek-project-card__body h3 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.45; }
	.inntek-project-card__body h3 a { color: inherit; text-decoration: none; }
	.inntek-project-card__body h3 a::after { content: ""; position: absolute; inset: 0; }
	.inntek-project-card__body h3 a:focus-visible { outline: none; }
	.inntek-project-card:has(h3 a:focus-visible) { outline: 2px solid var(--inntek-brand); outline-offset: 3px; }
	.inntek-project-card__body p { margin: 0; color: var(--inntek-muted); font-size: 14.5px; }
	.inntek-project-card__body .inntek-pill { justify-self: start; }
	.inntek-project-card__body .inntek-mono { color: var(--inntek-brand-strong); font-size: 14px; font-weight: 600; }
	.inntek-project-empty { color: var(--inntek-muted); }

	/* Detail */
	.inntek-project-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: clamp(24px, 3vw, 40px) 0 0; overflow: hidden; border: 1px solid var(--inntek-line); border-radius: var(--inntek-r-lg); background: var(--inntek-line); }
	.inntek-project-facts > div { padding: 18px 20px; background: var(--inntek-bg); }
	.inntek-project-facts dt { color: var(--inntek-muted); font-size: 13px; font-weight: 600; }
	.inntek-project-facts dd { margin: 4px 0 0; color: var(--inntek-ink); font-weight: 600; }
	.inntek-project__content { max-width: 760px; margin-inline: auto; padding-block: clamp(40px, 6vw, 72px); }
	.inntek-project__content > * + * { margin-top: 1.1em; }
	.inntek-project__content h2 { margin-top: 1.8em; font-size: clamp(22px, 2.2vw, 28px); }

	/* CTA band */
	.inntek-cta-band { padding-block: clamp(48px, 6vw, 80px); background: var(--inntek-brand-soft); text-align: center; }
	.inntek-cta-band .inntek-container { display: grid; gap: 16px; justify-items: center; }
	.inntek-cta-band h2 { font-size: clamp(24px, 2.6vw, 34px); }

	@media (max-width: 1023px) {
		.inntek-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		.inntek-project-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}

	@media (max-width: 639px) {
		.inntek-project-grid { grid-template-columns: 1fr; }
	}
}

/* Home project rail (prototype lines 357-391). Card rules above take precedence where repeated. */
@layer inntek {
	/* Projects */
	/* Dự án: slide cuộn ngang, ẩn thanh scroll, điều hướng bằng nút, kéo chuột, vuốt */
	.inntek-project-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 40px) / 3);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;padding:6px 2px 12px;margin:-6px -2px 0;scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
	.inntek-project-rail::-webkit-scrollbar{display:none}
	.inntek-project-rail.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
	.inntek-project-rail:focus-visible{outline:2px solid var(--inntek-brand);outline-offset:4px;border-radius:var(--inntek-r-lg)}
	.inntek-project-rail .inntek-project-card img{-webkit-user-drag:none}
	.inntek-project-rail__foot{display:flex;align-items:center;gap:20px;margin-top:20px}
	.inntek-project-rail__progress{flex:1;height:2px;background:var(--inntek-line);border-radius:2px;overflow:hidden}
	.inntek-project-rail__progress i{display:block;height:100%;background:var(--inntek-brand);border-radius:2px;transform-origin:left;transition:transform .25s ease-out,width .25s ease-out}
	.inntek-project-rail__count{font-size:13px;color:var(--inntek-muted);white-space:nowrap}
	.inntek-project-rail__nav{display:flex;gap:8px}
	.inntek-project-rail__nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--inntek-line-strong);background:var(--inntek-bg);color:var(--inntek-ink);display:grid;place-items:center;cursor:pointer;transition:border-color .15s ease-out,color .15s ease-out,background-color .15s ease-out,opacity .15s ease-out}
	.inntek-project-rail__nav button:hover:not(:disabled){border-color:var(--inntek-brand);color:var(--inntek-brand)}
	.inntek-project-rail__nav button:disabled{opacity:.35;cursor:default}
	@media (max-width:1023px){.inntek-project-rail{grid-auto-columns:calc((100% - 20px) / 2)}}
	@media (max-width:640px){.inntek-project-rail{grid-auto-columns:84%;gap:14px}.inntek-project-rail__count,.inntek-project-rail__nav{display:none}.inntek-project-rail__foot{margin-top:14px}}
	@media (prefers-reduced-motion:reduce){.inntek-project-rail{scroll-behavior:auto}}
	.inntek-project-card:hover .inntek-thumb img{transform:scale(1.03)}
	.inntek-project-rail .inntek-project-card[hidden] { display: none; }
	/* Rail filters are buttons (in-page filter), prototype lines 359-362 */
}