/* ==========================================
   HAMPI CHRONICLES — Components
   File: css/components.css
   ========================================== */
 
/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 3rem;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: all .4s var(--ease);
}
.nav.scrolled {
  background: rgba(10,8,4,.97);
  border-bottom-color: rgba(201,146,42,.12);
  padding: .85rem 3rem;
  backdrop-filter: blur(12px);
}
.nav-logo { font-family: var(--fd); font-size: .95rem; letter-spacing: .22em; color: var(--gold-lt); text-decoration: none; cursor: none; }
.nav-logo small { display: block; font-size: .5rem; letter-spacing: .4em; color: var(--mist); margin-top: 3px; }
.nav-links { display: flex; gap: 1.75rem; list-style: none; }
.nav-links a { font-family: var(--fd); font-size: .6rem; letter-spacing: .18em; color: var(--mist); text-decoration: none; text-transform: uppercase; cursor: none; padding-bottom: 3px; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.nav-links a:hover, .nav-links a.active { color: var(--gold-lt); border-bottom-color: rgba(245,200,66,.4); }
.nav-cta { font-family: var(--fd); font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; color: var(--night); background: var(--gold); border: none; padding: .52rem 1.3rem; cursor: none; transition: background .3s; }
.nav-cta:hover { background: var(--gold-lt); }
 
/* ---------- Marquee ---------- */
.mq-bar { background: var(--gold); padding: .85rem 0; overflow: hidden; white-space: nowrap; }
.mq-in  { display: inline-flex; animation: marquee 38s linear infinite; }
.mq-it  { font-family: var(--fd); font-size: .58rem; letter-spacing: .28em; color: var(--night); text-transform: uppercase; padding: 0 2.5rem; }
 
/* ---------- Stat Band ---------- */
.sb { display: grid; grid-template-columns: repeat(4,1fr); background: var(--charcoal); border-top: 1px solid rgba(201,146,42,.15); border-bottom: 1px solid rgba(201,146,42,.15); }
.sc { padding: 2.5rem 2rem; text-align: center; border-right: 1px solid rgba(201,146,42,.1); }
.sc:last-child { border-right: none; }
.sn  { font-family: var(--fd); font-size: clamp(2.5rem,4vw,4.5rem); font-weight: 700; color: var(--gold-lt); display: block; line-height: 1; margin-bottom: .4rem; }
.sl  { font-family: var(--fd); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--mist); display: block; margin-bottom: .25rem; }
.snt { font-size: .75rem; color: rgba(184,168,130,.45); font-style: italic; }
 
/* ---------- Mode Cards (Home) ---------- */
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; }
.mc { padding: 4rem; position: relative; overflow: hidden; cursor: none; transition: transform .4s var(--ease); }
.mc:hover { transform: translateY(-3px); }
.mc.ex { background: linear-gradient(140deg,#181008,#100c05); }
.mc.st { background: linear-gradient(140deg,#0c0e18,#080a12); }
.mc::after { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .4s; pointer-events: none; }
.mc.ex::after { background: radial-gradient(ellipse at 30% 30%,rgba(201,146,42,.07),transparent 65%); }
.mc.st::after { background: radial-gradient(ellipse at 70% 30%,rgba(139,159,212,.07),transparent 65%); }
.mc:hover::after { opacity: 1; }
.mc-brd { position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(201,146,42,.15); transition: border-color .4s; }
.mc.ex:hover .mc-brd { border-color: rgba(201,146,42,.5); }
.mc.st .mc-brd { border-color: rgba(139,159,212,.15); }
.mc.st:hover .mc-brd { border-color: rgba(139,159,212,.5); }
.mc-ico { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1.8rem; }
.mc-ico.g { background: rgba(201,146,42,.14); }
.mc-ico.i { background: rgba(139,159,212,.14); }
.mc-tag { font-family: var(--fd); font-size: .58rem; letter-spacing: .35em; text-transform: uppercase; margin-bottom: .7rem; display: block; }
.mc-tag.g { color: var(--gold); }
.mc-tag.i { color: var(--indigo); }
.mc h3 { font-family: var(--fd); font-size: 1.9rem; font-weight: 600; color: var(--cream); margin-bottom: 1.1rem; line-height: 1.1; }
.mc p { font-size: 1rem; color: var(--mist); line-height: 1.75; margin-bottom: 1.8rem; }
.mc-fl { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.mc-fl li { font-size: .83rem; color: var(--mist); display: flex; align-items: center; gap: .7rem; }
.mc-fl li::before { content: ''; width: 18px; height: 1px; background: var(--gold); flex-shrink: 0; }
.mc.st .mc-fl li::before { background: var(--indigo); }
 
/* ---------- Places Horizontal Scroll ---------- */
.places-scroll { display: flex; gap: 1.25rem; padding: 0 3rem; overflow-x: auto; scrollbar-width: none; cursor: grab; }
.places-scroll:active { cursor: grabbing; }
.places-scroll::-webkit-scrollbar { display: none; }
.plc { flex: 0 0 300px; height: 400px; position: relative; overflow: hidden; cursor: none; }
.plb { position: absolute; inset: 0; transition: transform .6s var(--ease); }
.plc:hover .plb { transform: scale(1.05); }
.plo { position: absolute; inset: 0; background: linear-gradient(to top,rgba(10,8,4,.96) 0%,rgba(10,8,4,.35) 50%,rgba(10,8,4,.1) 100%); z-index: 1; }
.pli { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.75rem; z-index: 2; }
.ple { font-family: var(--fd); font-size: .52rem; letter-spacing: .32em; color: var(--gold); text-transform: uppercase; margin-bottom: .45rem; display: block; }
.pln { font-family: var(--fd); font-size: 1.2rem; font-weight: 600; color: var(--cream); margin-bottom: .4rem; line-height: 1.2; }
.pld { font-size: .82rem; color: var(--mist); line-height: 1.55; transform: translateY(8px); opacity: 0; transition: all .4s; }
.plc:hover .pld { transform: translateY(0); opacity: 1; }
.plct { display: inline-block; margin-top: .9rem; font-family: var(--fd); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--night); background: var(--gold); padding: .35rem .8rem; transform: translateY(8px); opacity: 0; transition: all .4s .05s; cursor: none; }
.plc:hover .plct { transform: translateY(0); opacity: 1; }
 
/* ---------- Story Arc Cards ---------- */
.arc { background: var(--stone); border: 1px solid rgba(201,146,42,.12); padding: 2.5rem; cursor: none; transition: border-color .35s, transform .35s var(--ease); position: relative; overflow: hidden; }
.arc:hover { border-color: rgba(201,146,42,.45); transform: translateY(-3px); }
.arc::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); transform: scaleY(0); transform-origin: bottom; transition: transform .35s var(--ease); }
.arc:hover::before { transform: scaleY(1); }
.arc.i::before { background: var(--indigo); }
.arc.t::before  { background: var(--teal); }
.arc.r::before  { background: var(--ruby); }
.arc-char { font-family: var(--fd); font-size: .58rem; letter-spacing: .28em; text-transform: uppercase; margin-bottom: .4rem; display: block; }
.arc-ttl  { font-family: var(--fd); font-size: 1.4rem; font-weight: 600; color: var(--cream); margin-bottom: .25rem; line-height: 1.15; }
.arc-sub  { font-family: var(--fi); font-size: .95rem; font-style: italic; color: var(--mist); margin-bottom: 1.25rem; }
.arc-syn  { font-size: .88rem; color: var(--mist); line-height: 1.7; margin-bottom: 1.5rem; }
.arc-meta { display: flex; gap: 1.25rem; font-family: var(--fd); font-size: .58rem; letter-spacing: .12em; color: rgba(184,168,130,.55); text-transform: uppercase; flex-wrap: wrap; }
.chl { list-style: none; display: flex; flex-direction: column; gap: .5rem; counter-reset: ch; margin-top: 1.25rem; }
.chi { font-size: .82rem; color: var(--mist); display: flex; align-items: center; gap: .75rem; counter-increment: ch; }
.chi::before { content: counter(ch,decimal-leading-zero); font-family: var(--fd); font-size: .6rem; color: var(--gold); min-width: 1.4rem; }
 
/* ---------- Monument Cards (Explore) ---------- */
.mcard { background: var(--stone); border: 1px solid rgba(201,146,42,.12); overflow: hidden; cursor: none; transition: border-color .3s, transform .35s var(--ease); }
.mcard:hover { border-color: rgba(201,146,42,.45); transform: translateY(-3px); }
.mimg  { height: 185px; position: relative; overflow: hidden; }
.mib   { position: absolute; inset: 0; transition: transform .5s var(--ease); }
.mcard:hover .mib { transform: scale(1.05); }
.mio   { position: absolute; inset: 0; background: linear-gradient(to top,rgba(10,8,4,.8) 0%,transparent 60%); }
.mbody { padding: 1.5rem; }
.mera  { font-family: var(--fd); font-size: .52rem; letter-spacing: .25em; color: var(--gold); text-transform: uppercase; margin-bottom: .4rem; display: block; }
.mname { font-family: var(--fd); font-size: 1.05rem; color: var(--cream); margin-bottom: .5rem; }
.mdesc { font-size: .85rem; color: var(--mist); line-height: 1.6; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mmeta { display: flex; gap: 1rem; font-size: .75rem; color: rgba(184,168,130,.6); font-family: var(--fd); letter-spacing: .08em; flex-wrap: wrap; }
 
/* ---------- AR Frame ---------- */
.ar-frame { position: relative; background: #080a14; border: 1px solid rgba(201,146,42,.25); overflow: hidden; }
.ar-scan  { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(to right,transparent,var(--gold-lt),transparent); animation: scanLine 3.5s ease-in-out infinite; opacity: .65; pointer-events: none; }
.ar-c     { position: absolute; width: 22px; height: 22px; border-color: var(--gold); border-style: solid; }
.ar-c.tl  { top: 1.25rem;    left: 1.25rem;  border-width: 2px 0 0 2px; }
.ar-c.tr  { top: 1.25rem;    right: 1.25rem; border-width: 2px 2px 0 0; }
.ar-c.bl  { bottom: 1.25rem; left: 1.25rem;  border-width: 0 0 2px 2px; }
.ar-c.br  { bottom: 1.25rem; right: 1.25rem; border-width: 0 2px 2px 0; }
 
/* ---------- Journey / Day Cards ---------- */
.day-card { background: var(--stone); border: 1px solid rgba(201,146,42,.15); padding: 1.75rem; margin-bottom: 1rem; }
.day-head { font-family: var(--fd); font-size: .65rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.25rem; display: flex; justify-content: space-between; align-items: center; }
.stop-row { display: flex; gap: 1rem; align-items: flex-start; padding: .7rem 0; border-bottom: 1px solid rgba(201,146,42,.08); }
.stop-row:last-child { border-bottom: none; }
.stop-time { font-family: var(--fd); font-size: .58rem; letter-spacing: .08em; color: var(--gold); min-width: 50px; padding-top: 2px; }
.stop-icon { width: 30px; height: 30px; background: rgba(201,146,42,.1); display: flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; }
.stop-name { font-family: var(--fd); font-size: .8rem; color: var(--cream); margin-bottom: .2rem; }
.stop-note { font-size: .78rem; color: var(--mist); line-height: 1.5; }
 
/* ---------- AI Panel ---------- */
.ai-panel { background: linear-gradient(135deg,#180e04,#120a04); border: 1px solid rgba(201,146,42,.25); padding: 2rem; margin-bottom: 1.5rem; }
.ai-head  { font-family: var(--fd); font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-lt); margin-bottom: 1.5rem; display: flex; align-items: center; gap: .6rem; }
.ai-chip  { display: inline-flex; align-items: center; gap: .4rem; background: rgba(201,146,42,.1); border: 1px solid rgba(201,146,42,.25); color: var(--gold); font-family: var(--fd); font-size: .55rem; letter-spacing: .12em; padding: .35rem .75rem; margin: 0 .4rem .4rem 0; cursor: none; transition: all .3s; }
.ai-chip:hover { background: rgba(201,146,42,.22); }
 
/* ---------- Journey Option Selector ---------- */
.j-opt { flex: 1; background: var(--stone); border: 1px solid rgba(201,146,42,.18); padding: 1.5rem; cursor: none; transition: all .3s; }
.j-opt:hover { border-color: rgba(201,146,42,.45); }
.j-opt.on   { border-color: var(--gold); background: rgba(201,146,42,.06); }
.j-opt .jd  { font-family: var(--fd); font-size: .55rem; letter-spacing: .15em; color: var(--gold); text-transform: uppercase; display: block; margin-bottom: .5rem; }
.j-opt h4   { font-family: var(--fd); font-size: .82rem; color: var(--cream); margin-bottom: .35rem; }
.j-opt p    { font-size: .8rem; color: var(--mist); }
 
/* ---------- Info Panel (Monument Detail) ---------- */
.info-panel { background: var(--stone); border: 1px solid rgba(201,146,42,.15); padding: 1.75rem; position: sticky; top: 6rem; }
.info-row   { display: flex; justify-content: space-between; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid rgba(201,146,42,.08); gap: 1rem; }
.info-row:last-child { border-bottom: none; }
.info-key  { font-size: .8rem; color: var(--mist); white-space: nowrap; }
.info-val  { font-family: var(--fd); font-size: .78rem; color: var(--cream); text-align: right; }
 
/* ---------- Methodology Cards (Research) ---------- */
.method-card { background: var(--stone); border: 1px solid rgba(201,146,42,.15); padding: 1.75rem; transition: border-color .3s, transform .3s var(--ease); }
.method-card:hover { border-color: rgba(201,146,42,.4); transform: translateY(-2px); }
.method-card .ico { font-size: 1.6rem; display: block; margin-bottom: 1rem; }
.method-card h4   { font-family: var(--fd); font-size: .85rem; color: var(--gold-lt); margin-bottom: .7rem; }
.method-card p    { font-size: .85rem; color: var(--mist); line-height: 1.7; }
 
/* ---------- Tables (Research) ---------- */
.comp-table { width: 100%; border-collapse: collapse; }
.comp-table th { font-family: var(--fd); font-size: .55rem; letter-spacing: .15em; text-transform: uppercase; text-align: center; padding: .85rem .75rem; border-bottom: 1px solid rgba(201,146,42,.22); }
.comp-table th:first-child { text-align: left; }
.comp-table td { padding: .8rem .75rem; border-bottom: 1px solid rgba(201,146,42,.08); font-size: .85rem; color: var(--mist); text-align: center; }
.comp-table td:first-child { text-align: left; color: var(--cream); }
.comp-table td.ck { color: var(--teal);  font-size: 1rem; }
.comp-table td.cx { color: rgba(184,168,130,.28); font-size: 1rem; }
.comp-table td.cp { color: var(--gold);  font-size: .72rem; }
.tech-table { width: 100%; border-collapse: collapse; }
.tech-table th { font-family: var(--fd); font-size: .58rem; letter-spacing: .18em; color: var(--gold); text-transform: uppercase; text-align: left; padding: .8rem 1rem; border-bottom: 1px solid rgba(201,146,42,.2); }
.tech-table td { padding: .9rem 1rem; border-bottom: 1px solid rgba(201,146,42,.08); font-size: .85rem; color: var(--mist); vertical-align: top; line-height: 1.6; }
.tech-table td.ly { font-family: var(--fd); font-size: .72rem; color: var(--gold-lt); white-space: nowrap; }
.tech-table td.tc { color: var(--indigo); }
 
/* ---------- CTA Section ---------- */
.cta-sec  { position: relative; padding: 9rem 3rem; text-align: center; overflow: hidden; }
.cta-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 700px; height: 450px; background: radial-gradient(ellipse,rgba(201,146,42,.12) 0%,transparent 70%); pointer-events: none; }
.cta-sec h2  { font-family: var(--fd); font-size: clamp(2.5rem,5vw,5rem); font-weight: 700; color: var(--cream); margin-bottom: 1.4rem; line-height: 1.05; }
.cta-sec p   { font-family: var(--fi); font-size: 1.25rem; font-style: italic; color: var(--mist); max-width: 560px; margin: 0 auto 2.5rem; line-height: 1.8; }
.cta-acts    { display: flex; justify-content: center; gap: 1.25rem; flex-wrap: wrap; }
 
/* ---------- Footer ---------- */
.site-footer { background: var(--deep); border-top: 1px solid rgba(201,146,42,.15); padding: 4.5rem 3rem 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3.5rem; }
.footer-brand-name { font-family: var(--fd); font-size: 1rem; letter-spacing: .2em; color: var(--gold-lt); display: block; margin-bottom: .9rem; }
.footer-brand p { font-size: .85rem; color: var(--mist); line-height: 1.7; max-width: 240px; margin-bottom: 1.25rem; }
.footer-col h5  { font-family: var(--fd); font-size: .56rem; letter-spacing: .3em; color: var(--gold); text-transform: uppercase; margin-bottom: 1.2rem; }
.footer-col ul  { list-style: none; display: flex; flex-direction: column; gap: .65rem; }
.footer-col ul li a { font-size: .85rem; color: var(--mist); text-decoration: none; cursor: none; transition: color .3s; }
.footer-col ul li a:hover { color: var(--gold-lt); }
.footer-bottom  { border-top: 1px solid rgba(201,146,42,.1); padding: 1.35rem 0; display: flex; justify-content: space-between; align-items: center; }
.footer-bottom p    { font-size: .72rem; color: rgba(184,168,130,.4); }
.footer-bottom span { font-family: var(--fd); font-size: .55rem; letter-spacing: .28em; color: var(--gold); }
 
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .mode-grid  { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .sb { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav .nav-links, .nav .nav-cta { display: none; }
  .nav { padding: .9rem 1.5rem; }
  .mc { padding: 2.5rem; }
  .places-scroll { padding: 0 1.5rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-sec { padding: 5rem 1.5rem; }
}