/* Panchang — the daily utility page.
   Reuses the mystic-night language of .sign-hero (dusk gradient + hand-placed
   stars) so it reads as the same product, but the body is deliberately plainer:
   this is a page people scan for a time, not one they linger on. */

.pan-hero {
  position: relative; overflow: hidden; color: #fff;
  padding-block: var(--s-5) clamp(3.5rem, 7vw, 5.5rem);
  background:
    radial-gradient(1.5px 1.5px at 10% 28%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 24% 66%, rgba(255,255,255,.55), transparent),
    radial-gradient(2px 2px at 36% 16%, rgba(255,201,60,.85), transparent),
    radial-gradient(1px 1px at 49% 44%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 61% 72%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 70% 20%, rgba(255,201,60,.7), transparent),
    radial-gradient(2px 2px at 79% 54%, rgba(255,255,255,.75), transparent),
    radial-gradient(1px 1px at 88% 32%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 94% 70%, rgba(255,201,60,.7), transparent),
    var(--g-dusk);
}
.pan-hero__wm {
  position: absolute; right: -2%; top: 50%; transform: translateY(-50%);
  font-size: clamp(11rem, 26vw, 20rem); line-height: 1;
  color: rgba(255,255,255,.05); pointer-events: none; user-select: none;
}
.pan-hero__row {
  position: relative; display: flex; flex-wrap: wrap; gap: var(--s-5);
  align-items: flex-end; justify-content: space-between;
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
}
.pan-hero__eyebrow {
  margin: 0 0 .35rem; font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-yellow-200);
}
.pan-hero__date { margin: 0; font-size: clamp(1.9rem, 4.6vw, 2.9rem); line-height: 1.1; color: #fff; }
.pan-hero__vara { margin: .35rem 0 0; color: rgba(255,255,255,.72); font-size: var(--fs-sm); }

.pan-hero__sun { display: flex; gap: var(--s-5); flex: 0 0 auto; }
.pan-sun {
  display: grid; justify-items: center; gap: .1rem; min-width: 92px;
  padding: .7rem 1rem; border-radius: var(--r-md);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(4px);
}
.pan-sun__ico { font-size: 1.1rem; color: var(--c-gold-400); text-shadow: 0 0 12px rgba(255,201,60,.55); }
.pan-sun__ico--set { color: var(--c-purple-400); text-shadow: 0 0 12px rgba(155,107,227,.5); }
.pan-sun__lbl { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.pan-sun__val { font-size: 1.15rem; color: #fff; font-variant-numeric: tabular-nums; }

.pan-nav {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-top: var(--s-5);
}
.pan-nav__arrow, .pan-nav__today {
  padding: .4rem .95rem; border-radius: var(--r-pill); font-size: var(--fs-sm);
  font-weight: var(--fw-medium); color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pan-nav__arrow:hover, .pan-nav__today:hover {
  background: rgba(255,255,255,.13); border-color: var(--c-yellow-300); color: #fff;
}
.pan-nav__today { border-color: var(--c-yellow-400); color: var(--c-yellow-200); }

/* Same gutter-aware overlap as .sign-body — a flat negative margin gets cancelled
   by Bootstrap's row gutter and the cards end up kissing the hero. */
.pan-body { position: relative; z-index: 2; }
.pan-body > .container-fb > .row,
.pan-body > .container-fb > .pan-cities {
  margin-top: calc(-1 * var(--bs-gutter-y, 0rem) + clamp(-2.75rem, -4vw, -1.5rem));
}
.pan-body .fb-card { box-shadow: var(--sh-md); }

.pan-cities {
  position: relative; display: flex; flex-wrap: wrap; gap: .4rem;
  margin-bottom: var(--s-5);
}
.pan-cities__item {
  padding: .38rem .9rem; border-radius: var(--r-pill); font-size: var(--fs-sm);
  font-weight: var(--fw-medium); color: var(--c-plum-800);
  background: var(--c-surface); border: 1.5px solid var(--c-line);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pan-cities__item:hover { border-color: var(--c-yellow-400); background: var(--c-yellow-50); }
.pan-cities__item.is-on { background: var(--c-yellow-400); border-color: var(--c-yellow-400); color: var(--c-on-yellow); }

.pan-card { padding: clamp(1.35rem, 3.2vw, 2rem); height: 100%; }
.pan-card__h { margin: 0; font-size: var(--fs-lg); }
.pan-card__sub { margin: .3rem 0 var(--s-4); font-size: var(--fs-sm); color: var(--c-muted); }

.pan-table { width: 100%; border-collapse: collapse; }
.pan-table tr { border-top: 1px solid var(--c-line); }
.pan-table tr:first-child { border-top: 0; }
.pan-table th, .pan-table td { padding: .85rem 0; text-align: left; vertical-align: baseline; }
.pan-table th { font-weight: var(--fw-medium); width: 34%; }
.pan-table__k { display: block; font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: .09em; text-transform: uppercase; color: var(--c-saffron-700); }
.pan-table__n { display: block; font-size: .78rem; color: var(--c-plum-300); }
.pan-table td strong { font-size: 1.05rem; color: var(--c-plum-900); }
.pan-table__t { text-align: right !important; font-size: var(--fs-sm); color: var(--c-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.pan-slots { list-style: none; margin: 0; padding: 0; }
.pan-slot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: .8rem .9rem; margin-bottom: .5rem; border-radius: var(--r-sm);
  border: 1px solid var(--c-line); border-left-width: 3px;
}
.pan-slot:last-child { margin-bottom: 0; }
.pan-slot--good { border-left-color: var(--c-green-400); background: rgba(52,199,89,.05); }
.pan-slot--bad  { border-left-color: var(--c-coral-400); background: rgba(237,106,94,.05); }
.pan-slot__name { display: grid; gap: .1rem; font-weight: var(--fw-semi); color: var(--c-plum-900); font-size: var(--fs-sm); }
.pan-slot__name em { font-style: normal; font-weight: var(--fw-normal); font-size: .75rem; color: var(--c-muted); }
.pan-slot__time { font-variant-numeric: tabular-nums; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-plum-700); white-space: nowrap; }

.pan-chog__h {
  display: flex; align-items: baseline; gap: .5rem; margin: 0 0 var(--s-3);
  font-size: var(--fs-sm); font-weight: var(--fw-semi); letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-saffron-700);
}
.pan-chog__h span { font-size: .78rem; letter-spacing: 0; text-transform: none; color: var(--c-plum-300); font-weight: var(--fw-normal); font-variant-numeric: tabular-nums; }
.pan-chog { list-style: none; margin: 0; padding: 0; }
.pan-chog__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: .5rem .7rem; border-radius: 8px; border-left: 3px solid transparent;
  font-size: var(--fs-sm);
}
.pan-chog__row:nth-child(odd) { background: var(--c-yellow-50); }
.pan-chog__row--good { border-left-color: var(--c-green-400); }
.pan-chog__row--bad { border-left-color: var(--c-coral-400); }
.pan-chog__row--neutral { border-left-color: var(--c-plum-300); }
.pan-chog__nm { font-weight: var(--fw-semi); color: var(--c-plum-900); }
.pan-chog__tm { font-variant-numeric: tabular-nums; color: var(--c-plum-700); white-space: nowrap; }

.pan-chog__key { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin: var(--s-4) 0 0; font-size: .78rem; color: var(--c-muted); }
.pan-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.pan-dot + .pan-dot, .pan-chog__key .pan-dot:not(:first-child) { margin-left: var(--s-3); }
.pan-dot--good { background: var(--c-green-400); }
.pan-dot--neutral { background: var(--c-plum-300); }
.pan-dot--bad { background: var(--c-coral-400); }

.pan-cta { padding: var(--s-5); text-align: center; }

@media (max-width: 575.98px) {
  .pan-hero__row { align-items: flex-start; }
  .pan-hero__sun { width: 100%; }
  .pan-sun { flex: 1; min-width: 0; }
  .pan-nav { flex-wrap: wrap; }
  .pan-nav__arrow { flex: 1; text-align: center; }
  .pan-table th { width: 42%; }
}