/* ==========================================================================
   Homepage (page-home.php). Builds on css/looc-ui.css.
   ========================================================================== */

/* ---------- Hero (next production) ---------- */
.looc-home-hero {
  padding: 56px 0 40px;
  background:
    radial-gradient(900px 520px at 78% 30%, rgba(28, 47, 117, 0.85), transparent 70%),
    radial-gradient(700px 400px at 10% 90%, rgba(252, 159, 19, 0.10), transparent 70%);
}
@media (max-width: 900px) { .looc-home-hero { padding-top: 24px; } }

/* ---------- Buy tickets (On The Stage tile widget) ---------- */
.looc-home-tickets { padding-top: 24px; }
.looc-home-tickets__panel { padding: 18px 18px 10px; min-height: 320px; } /* reserve space while the widget loads */

/* ---------- Who we are + small carousel ----------
   The photos are 2:1 with lettering placed anywhere, so they're shown whole (no cropping). */
.looc-home-story { padding-top: 8px; }
.looc-home-story__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.looc-home-story__grid--text-only { grid-template-columns: 1fr; max-width: 760px; }
.looc-home-story__text { margin: 14px 0 22px; }
@media (max-width: 900px) { .looc-home-story__grid { grid-template-columns: 1fr; gap: 24px; } }

.looc-home-carousel {
  position: relative; aspect-ratio: 2 / 1; overflow: hidden; border-radius: var(--looc-radius);
  background: var(--looc-navy-800); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--looc-line);
}
.looc-home-carousel__slide { position: absolute; inset: 0; opacity: 0; }
/* Only animate after the first paint (js/looc-ui.js adds .is-ready), so the first photo shows instantly. */
.looc-home-carousel.is-ready .looc-home-carousel__slide { transition: opacity 1.2s ease; }
.looc-home-carousel__slide.is-active { opacity: 1; }
.looc-home-carousel__img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.looc-home-carousel__controls {
  position: absolute; right: 10px; bottom: 10px; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: 4px 6px 4px 10px; border-radius: 999px; background: rgba(6, 10, 34, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.looc-home-carousel__dots { display: flex; gap: 6px; }
.looc-home-carousel__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); cursor: pointer; }
.looc-home-carousel__dot[aria-current="true"] { background: var(--looc-gold); }
.looc-home-carousel__toggle { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--looc-line-2); color: var(--looc-ink); display: grid; place-items: center; cursor: pointer; font-size: 9px; }
.looc-home-carousel__toggle .fa-play, .looc-home-carousel__toggle.is-paused .fa-pause { display: none; }
.looc-home-carousel__toggle.is-paused .fa-play { display: inline; }

/* ---------- Instagram (plugin output) ---------- */
.looc-home-instagram { border-radius: var(--looc-radius); overflow: hidden; }
.looc-home-instagram #sb_instagram { padding: 0 !important; }