/* home.css
 *
 * Homepage-only layout. Relies on the design tokens (--bg-color,
 * --accent-amber, etc.) defined in ajmarshall.xyz/styles.css, which is
 * linked before this file. Don't redefine tokens here — add to the
 * shared sheet if a new one is needed.
 *
 * styles.css centers body content as a single flex item (built for the
 * one-panel track.php "console"). This page is a scrolling list, so it
 * overrides that back to normal block flow.
 */

body {
  display: block;
  align-items: initial;
  justify-content: initial;
  padding: 0;
}

.page-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* --- TOP BAR --- */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 28px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--panel-border-solid);
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 18px;
}

.headshot {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--accent-amber);
  box-shadow: 0 0 12px rgba(245, 166, 35, 0.2);
  flex-shrink: 0;
  display: block;
}

.identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.wordmark {
  height: 22px;
  width: auto;
  display: block;
}

.tagline {
  font-size: 0.78rem;
  color: var(--text-muted);
  max-width: 46ch;
}

.social-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.social-link {
  color: var(--text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--panel-border-solid);
  padding: 7px 12px;
  border-radius: 4px;
  transition: all 0.2s;
}

.social-link:hover {
  color: var(--accent-amber);
  border-color: var(--accent-amber);
}

/* Booker page, not a profile — inverts the socials: their hover state is
   its resting state, and hovering it drops back to their resting look.
   A little extra space sets it apart from the socials. */
.social-link--hospitality {
  margin-left: 8px;
  color: var(--accent-amber);
  border-color: var(--accent-amber);
}

.social-link--hospitality:hover {
  color: var(--text-muted);
  border-color: var(--panel-border-solid);
}

/* --- GALLERY SECTION --- */
.gallery-viewport {
  position: relative;
}

/* The rotator stage. Cards are positioned absolutely, dead center, and
   home.js transforms each one (translateX/scale/rotateY/blur/opacity)
   based on its distance from the active index — a coverflow, not a
   scroller. Fixed height because absolutely-positioned children don't
   contribute to layout height on their own. */
.gallery-stage {
  position: relative;
  height: 560px; /* fallback until home.js measures the active card */
  perspective: 1400px;
  touch-action: pan-y;
  transition: height 0.3s ease;
}

.gallery-stage:focus-visible {
  outline: 2px solid var(--accent-amber);
  outline-offset: 6px;
}

.gallery-item {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Base (mobile) size — the already-tuned peeking level from the
     max-width:640px query stays untouched. Desktop gets a bigger size
     via the min-width:641px override below instead of sharing this. */
  width: min(300px, 72vw);
  background: var(--panel-bg-solid);
  border: 1px solid var(--panel-border-solid);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  /* home.js sets transform/filter/opacity/z-index per-frame; this just
     smooths the transition between states. */
  transition: transform 0.4s ease, filter 0.4s ease, opacity 0.4s ease;
  will-change: transform, filter, opacity;
}

.gallery-item.is-active {
  cursor: default;
  border-color: var(--accent-amber);
  box-shadow:
    0 0 0 1px rgba(255, 183, 0, 0.25),
    0 0 28px rgba(212, 160, 89, 0.35),
    0 0 60px rgba(255, 183, 0, 0.15);
}

.item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px 0;
}

.item-date {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--accent-amber);
  font-weight: 700;
  text-transform: uppercase;
}

.gallery-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg-color);
  overflow: hidden;
  margin-top: 10px;
}

.gallery-media img,
.gallery-media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

/* Clickable YouTube thumbnail facade — swapped for a live iframe on click */
.video-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.play-glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(13, 11, 9, 0.72);
  border: 1px solid var(--accent-amber);
  color: var(--accent-amber);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: transform 0.2s, background 0.2s;
}

.video-facade:hover .play-glyph {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--accent-amber);
  color: #0d0b09;
}

/* Small, out-of-the-way signal that a linked-out Instagram post is a
   Reel — there's no embed for Instagram to hang a real play control on
   (see index.php), so this is decorative only, not a button. */
.reel-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(13, 11, 9, 0.72);
  border: 1px solid var(--accent-amber);
  color: var(--accent-amber);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  pointer-events: none;
}

.gallery-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

/* One look per kind so the three are distinguishable at a glance:
   track = filled amber (the thing for sale), DJ set = outlined orange,
   video = outlined muted. */
.kind-badge {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid var(--panel-border-solid);
  color: var(--text-muted);
}

.kind-badge--track {
  background: var(--accent-amber);
  border-color: var(--accent-amber);
  color: var(--bg-color);
}

.kind-badge--dj-set {
  border-color: var(--accent-orange);
  color: var(--accent-orange);
}

.kind-badge--instagram {
  border-color: var(--panel-border);
  color: var(--text-main);
}

.item-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.item-description {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Track-card sample player — same look as the /lps page's player,
   scaled down to card size. Behavior lives in home.js. */
.preview-player {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(13, 11, 9, 0.7);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 8px 10px;
}

.preview-play-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--accent-amber);
  color: var(--bg-color);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.preview-play-btn:hover {
  transform: scale(1.05);
}

.preview-player .preview-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-main);
}

/* Pinned YouTube comment — manual field, see gallery-data.php */
.pinned-comment {
  border-left: 2px solid var(--panel-border-solid);
  padding-left: 10px;
}

.pinned-comment-label {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.pinned-comment p {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pinned-comment cite {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-style: normal;
  margin-top: 2px;
}

.buy-btn {
  display: block;
  text-align: center;
  margin-top: auto;
  padding: 12px;
  background: linear-gradient(135deg, var(--accent-orange) 0%, #b04b15 100%);
  color: var(--text-main);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  box-shadow: 0 4px 15px rgba(217, 107, 39, 0.35);
  transition: opacity 0.2s;
}

.buy-btn:hover {
  opacity: 0.9;
}

/* Instagram's CTA doesn't need the full-width treatment the primary
   purchase/subscribe buttons use — it's a lighter-weight action, and a
   full-bleed button read as too heavy for it. Scoped to this modifier
   rather than changed on .buy-btn itself, since Get Track/Subscribe on
   YouTube weren't asked to change. */
.buy-btn--compact {
  display: inline-block;
  align-self: center;
  padding: 10px 20px;
}

/* Prev/next controls. Two earlier attempts (a diffuse edge gradient,
   then a solid-gold circle) both read as generic carousel-widget chrome
   instead of belonging to this page. This one is text, matching how
   every other control here works — GET TRACK, SUBSCRIBE ON YOUTUBE —
   none of which are icon-only, so an icon-only nav button was always
   the odd one out. Styled as a bordered secondary button (the same
   quiet-by-default, amber-on-hover treatment as .back-btn in the shared
   styles.css), not the filled gradient of the primary CTA buttons —
   navigation chrome shouldn't compete with the page's actual actions.
   home.js positions these horizontally, relative to the active card's
   own width (same translateX pattern the cards use), so they sit right
   next to it and move as the card resizes. Vertical position is a fixed
   `top` here instead — it used to be centered on the stage, but the
   stage's height changes with the active card's content (a pinned
   comment, or track vs. video card), so the buttons visibly bounced up
   and down on every rotation. A fixed `top` can't do that, by
   construction. z-index is above every card's range (home.js caps
   around 100) so a receded card swinging past never buries it. */
.gallery-nav {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%); /* home.js overrides with the real horizontal offset */
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  z-index: 200;
  white-space: nowrap;
}

.nav-glyph {
  display: inline-block;
  padding: 12px 19px;
  border: 1px solid var(--panel-border-solid);
  border-radius: 5px;
  background: rgba(20, 18, 16, 0.85);
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.2s;
}

.gallery-nav:hover .nav-glyph {
  color: var(--accent-amber);
  border-color: var(--accent-amber);
  box-shadow: 0 0 14px rgba(212, 160, 89, 0.25);
}

.gallery-nav:disabled {
  cursor: default;
}

.gallery-nav:disabled .nav-glyph {
  opacity: 0.3;
}

.gallery-nav:disabled:hover .nav-glyph {
  color: var(--text-muted);
  border-color: var(--panel-border-solid);
  box-shadow: none;
}

/* --- FOOTER --- */
.site-footer {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--panel-border-solid);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-credit {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.footer-lockup {
  height: 26px;
  width: auto;
  opacity: 0.8;
}

/* --- RESPONSIVE --- */
@media (max-width: 640px) {
  .top-bar {
    flex-direction: column;
    text-align: center;
  }

  .brand-block {
    flex-direction: column;
  }

  .identity {
    align-items: center;
  }

  .social-nav {
    justify-content: center;
  }

  .site-footer {
    flex-direction: column;
    text-align: center;
  }

  /* Cards are narrower here (min(300px, 72vw)), so shorter too. */
  .gallery-stage {
    height: 500px;
  }

  /* Reserve a band above the stage for the nav row (positioned below,
     via .gallery-nav's own `top`) instead of beside or under the card —
     there's no side room on a phone, and "below" wasn't an obvious place
     to look for navigation on first glance. */
  .gallery-viewport {
    margin-top: 64px;
  }

  .gallery-nav {
    top: -48px;
  }
}

@media (min-width: 641px) {
  /* The mobile card size (min(300px, 72vw)) was capping desktop too,
     which is why cards read as phone-sized with a lot of dead space
     around them. Let them actually scale up with the viewport here. */
  .gallery-item {
    width: clamp(380px, 30vw, 520px);
  }

  .gallery-stage {
    height: 650px; /* fallback until home.js measures the active card */
  }
}