/* اصفهان — Isfahan journey (cobalt / turquoise / gold tilework theme) */
:root {
  --cobalt: #12408a;
  --cobalt-deep: #0a2456;
  --turquoise: #3fc4c0;
  --gold: #e6b93c;
  --gold-soft: #f2d888;
  --cream: #f5edd6;
  --ink: #1c2b3a;
  --rug: #7a1f1a;
  --font-en: "Cormorant Garamond", Georgia, serif;
  --font-fa: "Vazirmatn", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  font-family: var(--font-en);
  color: var(--cream);
  /* TILEWORK BACKGROUND. To use a real gallery tile photo instead, replace the
     url("data:image/svg+xml,...") below with url('/static/img/gallery/YOURTILE.jpg')
     and keep the dark gradient overlay in front of it. */
  background:
    linear-gradient(rgba(8,26,66,0.74), rgba(8,26,66,0.80)),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27140%27%20height%3D%27140%27%20viewBox%3D%270%200%20140%20140%27%3E%3Crect%20width%3D%27140%27%20height%3D%27140%27%20fill%3D%27%2312408a%27/%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%233fc4c0%27%20stroke-width%3D%272%27%20opacity%3D%270.85%27%3E%3Crect%20x%3D%2726%27%20y%3D%2726%27%20width%3D%2788%27%20height%3D%2788%27/%3E%3Crect%20x%3D%2726%27%20y%3D%2726%27%20width%3D%2788%27%20height%3D%2788%27%20transform%3D%27rotate%2845%2070%2070%29%27/%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%2770%27%20r%3D%2736%27/%3E%3C/g%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23e6b93c%27%20stroke-width%3D%271.6%27%20opacity%3D%270.9%27%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%2770%27%20r%3D%2715%27/%3E%3Cpath%20d%3D%27M70%206%20L78%2062%20L134%2070%20L78%2078%20L70%20134%20L62%2078%20L6%2070%20L62%2062%20Z%27/%3E%3C/g%3E%3Cg%20fill%3D%27%23e6b93c%27%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%2770%27%20r%3D%274.5%27/%3E%3Ccircle%20cx%3D%270%27%20cy%3D%270%27%20r%3D%273.5%27/%3E%3Ccircle%20cx%3D%27140%27%20cy%3D%270%27%20r%3D%273.5%27/%3E%3Ccircle%20cx%3D%270%27%20cy%3D%27140%27%20r%3D%273.5%27/%3E%3Ccircle%20cx%3D%27140%27%20cy%3D%27140%27%20r%3D%273.5%27/%3E%3Ccircle%20cx%3D%270%27%20cy%3D%2770%27%20r%3D%273%27/%3E%3Ccircle%20cx%3D%27140%27%20cy%3D%2770%27%20r%3D%273%27/%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%270%27%20r%3D%273%27/%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%27140%27%20r%3D%273%27/%3E%3C/g%3E%3Cg%20fill%3D%27%233fc4c0%27%20opacity%3D%270.6%27%3E%3Ccircle%20cx%3D%2735%27%20cy%3D%2735%27%20r%3D%273%27/%3E%3Ccircle%20cx%3D%27105%27%20cy%3D%2735%27%20r%3D%273%27/%3E%3Ccircle%20cx%3D%2735%27%20cy%3D%27105%27%20r%3D%273%27/%3E%3Ccircle%20cx%3D%27105%27%20cy%3D%27105%27%20r%3D%273%27/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: auto, 300px 300px;
}
.frame { position: fixed; inset: 12px; pointer-events: none; z-index: 1; border: 3px solid var(--gold); outline: 1px solid var(--turquoise); outline-offset: 6px; box-shadow: inset 0 0 0 10px rgba(18,64,138,0.5); }

.iz-back { position: fixed; top: 1.2rem; left: 1.6rem; z-index: 5; color: var(--gold-soft); text-decoration: none; font-size: 0.95rem; letter-spacing: 0.05em; opacity: 0.85; }
.iz-back:hover { opacity: 1; }

header { text-align: center; padding: 3.2rem 1rem 1rem; position: relative; z-index: 2; }
header .fa { font-family: var(--font-fa); font-size: 3.2rem; color: var(--gold); font-weight: 600; text-shadow: 0 2px 16px rgba(0,0,0,0.55); }
header .en { font-size: 1.6rem; letter-spacing: 0.3em; text-transform: uppercase; margin-top: 0.3rem; }
header .sub { font-style: italic; color: var(--gold-soft); margin-top: 0.4rem; font-size: 1.15rem; }

/* sections — WIDER now */
.iz-section { position: relative; z-index: 2; max-width: 1140px; margin: 4rem auto 0; padding: 0 2rem; }
.sec-head { text-align: center; margin-bottom: 1.2rem; }
.sec-head .fa { font-family: var(--font-fa); font-size: 1.8rem; color: var(--gold); }
.sec-head .en { font-size: 1.25rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--turquoise); margin-top: 0.15rem; }
.sec-head .rule { width: 140px; height: 2px; margin: 0.9rem auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

.railway { margin: 1.8rem 0 0.5rem; }
.track { position: relative; height: 100px; }
.rail { position: absolute; left: 0; right: 0; top: 58px; height: 5px; background: repeating-linear-gradient(90deg, var(--gold) 0 16px, #b8901f 16px 20px); border-radius: 3px; }
.ties { position: absolute; left: 0; right: 0; top: 50px; height: 21px; background: repeating-linear-gradient(90deg, transparent 0 24px, rgba(18,64,138,0.75) 24px 30px); }
.stations { position: relative; display: flex; justify-content: space-between; }
.station { position: relative; flex: 1; min-width: 74px; text-align: center; cursor: pointer; background: none; border: none; color: inherit; font-family: var(--font-en); }
.station .star { display: block; width: 22px; height: 22px; margin: 48px auto 0; background: var(--cream); border: 2px solid var(--turquoise); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transition: transform 0.2s, background 0.2s, filter 0.2s; }
.station.active .star { background: var(--gold); border-color: var(--gold); transform: scale(1.35); filter: drop-shadow(0 0 9px var(--gold)); }
.station .label { display: block; margin-top: 0.55rem; font-size: 0.95rem; color: var(--gold-soft); line-height: 1.2; }
.station.active .label { color: var(--cream); font-weight: 600; }

.train { position: absolute; top: 26px; width: 54px; height: 34px; z-index: 3; transform: translateX(-50%); transition: left 0.9s cubic-bezier(0.5,0,0.2,1); }
.train .body { width: 100%; height: 22px; background: var(--turquoise); border: 2px solid var(--gold); border-radius: 6px 6px 3px 3px; position: relative; }
.train .body::before, .train .body::after { content: ""; position: absolute; top: 4px; width: 11px; height: 7px; background: var(--gold); border-radius: 2px; }
.train .body::before { left: 6px; } .train .body::after { right: 6px; }
.train .wheels { display: flex; justify-content: space-around; margin-top: 1px; }
.train .wheels span { width: 8px; height: 8px; background: var(--cobalt-deep); border: 2px solid var(--gold); border-radius: 50%; }
.train .smoke { position: absolute; top: -8px; left: 8px; width: 8px; height: 8px; background: rgba(245,237,214,0.6); border-radius: 50%; animation: iz-puff 1.5s infinite; }
@keyframes iz-puff { 0% { transform: translateY(0) scale(0.6); opacity: 0.7; } 100% { transform: translateY(-22px) scale(1.5); opacity: 0; } }

/* detail card — LARGER */
.detail { margin-top: 1.6rem; }
.card { background: rgba(245,237,214,0.98); color: var(--ink); border: 2px solid var(--gold); border-radius: 10px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,0.5); display: grid; grid-template-columns: 420px 1fr; min-height: 340px; }
.card .img { background: #cdbfa0 center/cover no-repeat; }
.card .img.empty { background: #cdbfa0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23cdbfa0'/%3E%3Cpath d='M0 0h20v20H0zM20 20h20v20H20z' fill='%23c3b494'/%3E%3C/svg%3E") center/40px; }.card .cbody { padding: 2rem 2.2rem; display: flex; flex-direction: column; }
.card .fa-name { font-family: var(--font-fa); font-size: 1.8rem; color: var(--rug); font-weight: 600; }
.card .en-name { font-size: 1.9rem; color: var(--cobalt); margin-top: 0.15rem; }
.card .desc { margin-top: 1rem; line-height: 1.65; font-size: 1.12rem; color: #33261a; flex: 1; overflow-y: auto; }
.card .desc .loading { font-style: italic; color: #9a7d54; }
.card .credit { margin-top: 1rem; font-size: 0.75rem; color: #9a7d54; font-family: var(--font-fa); }

/* geometric buttons — properly styled arrows */
.controls { text-align: center; margin-top: 1.6rem; display: flex; gap: 1rem; justify-content: center; }
.controls button {
  font-family: var(--font-en); font-size: 1.05rem; letter-spacing: 0.1em; font-weight: 600;
  background: var(--cobalt); color: var(--gold-soft); border: 2px solid var(--gold);
  padding: 0.7rem 2rem; cursor: pointer; position: relative;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
  transition: background 0.2s, color 0.2s;
}
.controls button:hover { background: var(--gold); color: var(--cobalt-deep); }

footer { text-align: center; padding: 3.5rem 1rem 4.5rem; color: var(--gold-soft); font-style: italic; position: relative; z-index: 2; }

@media (max-width: 760px) {
  .card { grid-template-columns: 1fr; min-height: 0; }
  .card .img { min-height: 200px; }
  header .fa { font-size: 2.4rem; }
  .station .label { font-size: 0.72rem; }
  .iz-section { padding: 0 1rem; }
}