@charset "UTF-8";

/* ─── 360° panorama cards (landing strip, /360/, chapter pages) ─────────── */
.pano-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.pano-grid--featured { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.pano-card { margin: 0; display: flex; flex-direction: column; border-radius: var(--radius-md); overflow: hidden; background: var(--pohaku-black); color: var(--pulu-white); box-shadow: 0 10px 30px -18px rgba(10,46,74,0.6); }
.pano-card__load {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; padding: 0; cursor: pointer;
  background: var(--ocean-deep) center/cover no-repeat; color: var(--pulu-white); overflow: hidden;
}
.pano-card__load::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 55%, rgba(10,46,74,0) 0%, rgba(10,46,74,0.45) 100%); }
.pano-card__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,14,0.05) 0%, rgba(14,14,14,0.55) 100%); transition: opacity 200ms ease; }
.pano-card__load:hover .pano-card__scrim, .pano-card__load:focus-visible .pano-card__scrim { opacity: 0.75; }
.pano-card__cta {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.95rem 0.55rem 0.7rem;
  background: rgba(14,14,14,0.62); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.28); border-radius: 999px;
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  transition: transform 180ms ease, background 180ms ease;
}
.pano-card__load:hover .pano-card__cta { transform: translate(-50%, -50%) scale(1.04); background: rgba(14,14,14,0.78); }
.pano-card__ring { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--sun-gold); position: relative; }
.pano-card__ring::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--sun-gold); animation: pano-spin 2.4s linear infinite; }
@keyframes pano-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pano-card__ring::after { animation: none; } }
.pano-card__frame { position: relative; aspect-ratio: 16 / 10; background: #000; }
.pano-card__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pano-card__cap { padding: 0.7rem 0.85rem 0.8rem; display: flex; flex-direction: column; gap: 0.15rem; background: color-mix(in srgb, var(--ocean-deep) 88%, var(--pohaku-black)); }
.pano-card__chapter { font-family: var(--font-data); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sun-gold); }
.pano-card__name { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.15; }
.pano-card__meta { font-family: var(--font-data); font-size: 0.64rem; letter-spacing: 0.02em; color: color-mix(in srgb, var(--pulu-white) 62%, transparent); }
.pano-card__meta a { color: inherit; }
.pano-empty { font-style: italic; opacity: 0.7; }

/* wide variant: one big card (chapter pages, first viewpoint) */
.pano-grid--wide { grid-template-columns: 2fr 1fr 1fr; }
.pano-grid--wide .pano-card:first-child { grid-row: span 2; }
@media (max-width: 900px) { .pano-grid--wide { grid-template-columns: 1fr 1fr; } .pano-grid--wide .pano-card:first-child { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 560px) { .pano-grid, .pano-grid--wide { grid-template-columns: 1fr; } }

/* official tour links (kept from v1.1) */
.tour-links { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.6rem; }
.tour-card { display: block; padding: 0.75rem 0.9rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 4px; text-decoration: none; color: inherit; }
.tour-card:hover { background: rgba(255,255,255,0.12); }
.tour-card__provider { display: block; font-family: var(--font-data); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sun-gold); margin-bottom: 0.2rem; }
.tour-card__name { display: block; font-size: 0.88rem; line-height: 1.35; }