/* /festivals/ hub — additions on top of the shared festival stylesheet
   (varanasi-airshow-2026.css, scope .vas). Everything here is prefixed fst-. */

.vas-hero--hub { min-height: 620px; padding-top: 64px; }
.vas-hero--hub h1 { font-size: clamp(36px, 4.8vw, 60px); }

/* Status pill: Coming up / Happening now / Concluded (set server-side from IST time) */
.fst-status {
	display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px;
	font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	background: #e3eeff; color: var(--vas-blue);
}
.fst-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: vas-pulse 1.6s ease-in-out infinite; }
.fst-status[data-phase="live"] { background: #e1f6e0; color: #0d6a05; }
.fst-status[data-phase="ended"] { background: #eceff5; color: #55627a; }
.fst-status[data-phase="ended"]::before { animation: none; }
.vas-card .fst-status { background: rgba(255,153,51,.2); color: #ffd9a0; }
.vas-card .fst-status[data-phase="live"] { background: rgba(31,174,18,.22); color: #8bf07d; }
.vas-card .fst-status[data-phase="ended"] { background: rgba(255,255,255,.14); color: #dbe4f1; }

/* Hero card: the two dated events */
.fst-cal { display: grid; gap: 12px; margin: 0 0 6px; }
.fst-cal__item { display: flex; align-items: center; gap: 14px; padding: 14px 14px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff; text-decoration: none; transition: background .2s, transform .2s; }
.fst-cal__item:hover { background: rgba(255,255,255,.16); transform: translateX(4px); color: #fff; }
.fst-cal__date { flex: 0 0 auto; display: grid; place-items: center; width: 74px; padding: 6px 0; border-radius: 12px; background: #fff; color: var(--vas-ink); text-align: center; line-height: 1.1; }
.fst-cal__date b { font-family: 'Poppins', sans-serif; font-size: 21px; font-weight: 800; white-space: nowrap; }
.fst-cal__date small { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--vas-blue); }
.fst-cal__text { flex: 1; min-width: 0; }
.fst-cal__text strong { display: block; font-size: 16px; line-height: 1.3; }
.fst-cal__text span { display: block; margin-top: 4px; font-size: 13px; color: rgba(255,255,255,.75); }

/* Feature cards */
.fst-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.fst-card { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid var(--vas-line); box-shadow: 0 14px 36px rgba(6,26,58,.09); transition: transform .3s ease, box-shadow .3s ease; }
.fst-card:hover { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(11,61,145,.18); }
.fst-card__art { position: relative; height: 220px; overflow: hidden; border-radius: 0; }
.fst-card__badge { position: absolute; left: 18px; top: 18px; z-index: 3; box-shadow: 0 6px 16px rgba(0,0,0,.25); background: #fff; }
.fst-card__body { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 28px; }
.fst-card__body h3 { font-size: 27px; margin-bottom: 8px; }
.fst-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 14.5px; font-weight: 600; color: var(--vas-gray); }
.fst-meta li { display: inline-flex; align-items: center; gap: 8px; }
.fst-meta .ico { color: var(--vas-sky); }
.fst-card__body > p { color: var(--vas-gray); font-size: 15.5px; }
.fst-points { margin: 4px 0 6px; padding: 0; list-style: none; }
.fst-points li { display: flex; gap: 10px; padding: 5px 0; font-size: 15px; color: #33415f; }
.fst-points .ico { margin-top: 5px; font-size: 13px; color: var(--vas-green); }
.fst-card .vas-cta-row { margin-top: auto; padding-top: 20px; }

/* Dev Diwali artwork: rows of glowing diyas above the river, pure CSS */
.fst-art--diya { background: linear-gradient(180deg, #1b0c33 0%, #5a2146 46%, #d2661c 100%); }
.fst-art--diya::before, .fst-art--diya::after {
	content: ""; position: absolute; left: -20px; right: -20px; background-repeat: repeat-x;
	background-image: radial-gradient(circle at 50% 50%, #ffe08a 0 4px, rgba(255,170,50,.65) 5px, rgba(255,140,30,0) 18px);
	animation: fst-flicker 2.6s ease-in-out infinite alternate;
}
.fst-art--diya::before { bottom: 58px; height: 36px; background-size: 54px 36px; }
.fst-art--diya::after { bottom: 20px; height: 30px; background-size: 42px 30px; background-position: 21px 0; animation-delay: -1.3s; }
.fst-moon { position: absolute; right: 12%; top: 22px; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fffdf0, #ffe9b0 60%, #f3c76a); box-shadow: 0 0 60px 18px rgba(255,226,150,.45); }
.fst-water { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: linear-gradient(180deg, rgba(10,20,60,.1), rgba(10,20,60,.7)); }
@keyframes fst-flicker { from { opacity: .72; } to { opacity: 1; } }

/* Kumbh archive tiles */
.fst-archive { max-width: 940px; margin: 0 auto; }
.fst-archive .vas-note { margin-bottom: 24px; }
.fst-tile-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; font-size: 14.5px; text-decoration: none; }

@media (max-width: 960px) {
	.fst-grid { grid-template-columns: 1fr; }
	.vas-hero--hub { min-height: 0; }
}
@media (max-width: 720px) {
	.fst-card__body { padding: 22px 20px 24px; }
	.fst-card__body h3 { font-size: 23px; }
	.fst-card__art { height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
	.fst-status::before, .fst-art--diya::before, .fst-art--diya::after { animation: none !important; }
}
