/* ==========================================================================
   LILACS GALLERY — FLOW PAGE (arc carousel tab)
   Loaded AFTER style.css. Reuses tokens, nav, buttons, footer, toast.
   ========================================================================== */
.flow-page { background: var(--night); color: var(--ivory); }
.flow-main { padding-top: var(--nav-h); min-height: 100svh; display: flex; flex-direction: column; }

/* ---------- Header ---------- */
.flow-head { text-align: center; padding: clamp(34px, 5vh, 60px) 0 6px; }
.flow-title { font-size: clamp(38px, 5.4vw + 14px, 68px); margin: 16px 0 12px; }
.flow-sub { color: rgba(246, 241, 231, 0.7); max-width: 56ch; margin: 0 auto; }

/* ---------- Stage ---------- */
#flowStage {
  position: relative; flex: 1;
  height: min(66svh, 620px); min-height: 440px;
  overflow: hidden; cursor: grab; touch-action: pan-y;
  outline-offset: -3px; user-select: none; -webkit-user-select: none;
}
#flowDisc {
  position: absolute; transform: translateX(-50%); border-radius: 50%;
  pointer-events: none; border: 1px solid rgba(246, 241, 231, 0.09);
  background: radial-gradient(circle at 50% 0%, rgba(194, 160, 174, 0.09), transparent 60%);
}
.f-card { position: absolute; top: 0; left: 0; will-change: transform; visibility: hidden; cursor: pointer; }
.f-inner {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 10px; background: #232b26; opacity: 0;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.2);
}
.f-inner img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none; -webkit-user-drag: none;
}
.f-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.14) 45%, rgba(0,0,0,0.62) 100%);
  opacity: 0; transition: opacity 0.3s ease;
}
.f-cap {
  position: absolute; inset-inline: 0; bottom: 0; padding: 16px; color: #fff; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.28) 100%);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.35s var(--ease-out);
}
.f-card:hover .f-veil, .f-card:focus-visible .f-veil { opacity: 1; }
.f-card:hover .f-cap, .f-card:focus-visible .f-cap { opacity: 1; transform: none; }
@media (hover: none) { .f-veil { opacity: 1; } .f-cap { opacity: 1; transform: none; } }
.f-cat { font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lilac); }
html[lang="ar"] .f-cat { letter-spacing: 0.04em; font-size: 13px; }
.f-title { font-family: var(--font-display); font-weight: 550; font-size: clamp(17px, 1.6vw + 12px, 23px); line-height: 1.2; margin-top: 6px; }
html[lang="ar"] .f-title { font-family: var(--font-ar-display); }
.f-desc { font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Foot: counter + hint + CTAs ---------- */
.flow-foot { text-align: center; padding: 8px 0 clamp(48px, 6vh, 72px); display: grid; gap: 12px; justify-items: center; }
.flow-count { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.28em; text-indent: 0.28em; color: var(--gold); }
.flow-hint { font-size: 12px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(246, 241, 231, 0.45); }
html[lang="ar"] .flow-hint { letter-spacing: 0.05em; font-size: 13.5px; }
.flow-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }

/* Active tab state */
.nav-links a[aria-current="page"], .mobile-menu a[aria-current="page"] { opacity: 1; }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.mobile-menu a[aria-current="page"] { color: var(--lilac); }

@media (max-width: 640px) {
  #flowStage { min-height: 400px; height: 60svh; }
  .f-desc { display: none; }
  .f-cap { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .f-inner { opacity: 1 !important; transform: none !important; }
  .f-veil, .f-cap { opacity: 1 !important; transform: none !important; }
}

#flowStage.flow-empty { display: grid; place-items: center; padding: 24px; color: rgba(246, 241, 231, .64); text-align: center; cursor: default; }