/* ===========================================================
   TALENT PAGE — page-specific styles (artists.php)
   Load AFTER style.css (uses its CSS variables: --surface,
   --surface-2, --gold, --line, --bone, --bone-dim, --font-body,
   --font-mono)
   =========================================================== */

/* Remove the grey .section-alt background behind the enquiry
   form — let the page's own black background show through, so
   only the form card itself is visible. */
/* Category card images — full-bleed cover behind the label, with
   a dark overlay so the text stays readable on any photo. */
.category-photo-card {
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}

.category-photo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(230, 185, 100, 0.4);
}

.category-photo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 1;
  transition: transform .5s ease, opacity .3s ease;
}

.category-photo-card:hover img {
  transform: scale(1.08);
}

/* Mouse-follow gold spotlight, driven by --mx/--my set in JS on
   mousemove; invisible until hovered. */
.category-photo-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(230, 185, 100, 0.28), transparent 70%);
}

.category-photo-card:hover::before {
  opacity: 1;
}
.category-photo-card img + .category-photo-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 40px 16px 18px;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
}
.category-photo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.55) 35%, rgba(0,0,0,0) 65%);
}

#enquiry.section-alt {
  background: transparent !important;
}

/* Proper spacing between "Book Artist Pan India" and the
   enquiry form right below it — enough breathing room so the
   form doesn't sit flush against the slider's arrows/scrollbar. */
.pan-india-section {
  padding-bottom: 40px !important;
  margin-bottom: 0 !important;
}

#enquiry.section-alt {
  padding-top: 40px !important;
  margin-top: 0 !important;
}

/* "Tell Us What You're Looking For" enquiry card — restyled to
   match the dark, bordered card look used on the Brand Enquiry
   page (.enquiry-card-v2), instead of the plain light card. */
.talent-enquiry-card {
  background: #000 !important;
  border: 1px solid rgba(243, 241, 236, 0.14) !important;
  border-radius: 12px !important;
  padding: 32px !important;
}

.talent-enquiry-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--bone);
  margin: 0 0 6px;
}

.talent-enquiry-card p.hint {
  color: var(--bone-dim);
  font-size: 13.5px;
  margin: 0 0 22px;
}

/* Inputs: transparent, bordered — matches the v2 form fields
   instead of the filled --surface-2 boxes */
.talent-enquiry-card .form-group input,
.talent-enquiry-card .form-group select,
.talent-enquiry-card .form-group textarea {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 14px;
}
.talent-enquiry-card .form-group textarea {
  min-height: 100px;
  resize: vertical;
}
.talent-enquiry-card .form-group input:focus,
.talent-enquiry-card .form-group select:focus,
.talent-enquiry-card .form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
}

/* Fix the native date input on a dark background — the calendar
   icon defaults to a dark glyph that's invisible (and hard to
   click) here, so invert it and force a dark date-picker popup. */
.talent-enquiry-card .form-group input[type="date"] {
  color-scheme: dark;
}

.talent-enquiry-card .form-group input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 1;
}
.talent-enquiry-card .form-group label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.talent-enquiry-card .form-note {
  color: var(--bone-dim);
}

/* Fix native <select> dropdown readability — force dark UI so the
   option list isn't rendered white-on-white/light-on-light. */
.talent-enquiry-card .form-group select {
  color-scheme: dark;
}
.talent-enquiry-card .form-group select option {
  background: #16151a;
  color: var(--bone);
}

/* Full-width card: lay fields out in a 2-column grid instead of
   one long stacked column, so the wider card doesn't leave inputs
   stretched edge-to-edge. */
.talent-enquiry-card form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
}

.talent-enquiry-card .form-group-full,
.talent-enquiry-card form > button,
.talent-enquiry-card form > .form-note {
  grid-column: 1 / -1;
}

@media (max-width: 700px) {
  .talent-enquiry-card form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .talent-enquiry-card {
    padding: 24px 20px !important;
    border-radius: 10px !important;
  }
}
/* ===========================================================
   "Celebs We've Worked With" — infinite auto-scrolling slider.
   6 unique images, list duplicated once in markup (12 slides)
   so the CSS animation loops seamlessly. 4 slides visible at a
   time on desktop; fewer on smaller screens.
   =========================================================== */
.celeb-cta-section {
  padding-bottom: 40px !important;
}

.celebs-worked-section {
  overflow: hidden;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.celebs-worked-section h2 {
  margin-bottom: 20px;
}

.celebs-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
}

.celebs-heading-line {
  flex: 1 1 auto;
  max-width: 140px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.celebs-heading span.celebs-heading-line:last-child {
  background: linear-gradient(90deg, var(--gold), transparent);
}

.celebs-heading-text {
  text-align: center;
  flex: 0 0 auto;
}

.celebs-heading-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 6px;
}

.celebs-heading-text h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin: 0;
}

@media (max-width: 560px) {
  .celebs-heading-line {
    max-width: 40px;
  }
}

.celebs-slider-wrap {
  overflow: hidden;
  width: 100%;
  margin-top: 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.celebs-slider-track {
  display: flex;
  width: max-content;
  gap: 20px;
  animation: celebs-scroll 24s linear infinite;
}

.celebs-slider-wrap:hover .celebs-slider-track {
  animation-play-state: paused;
}

.celeb-slide {
  position: relative;
  flex: 0 0 auto;
  width: calc((min(100vw - 48px, 1200px) - 3 * 20px) / 4);
  max-width: 280px;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.celeb-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Name label — always visible, on its own gradient strip, so it
   never fades or gets lost once the artist photo loads in. */
/* Instagram icon button — top-right corner of each slide */
.celeb-slide-ig {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  transition: transform .2s ease;
}

.celeb-slide-ig:hover {
  transform: scale(1.1);
}

.celeb-slide-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 28px 14px 12px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bone);
  background: linear-gradient(0deg, rgba(0,0,0,.85) 30%, rgba(0,0,0,0) 100%);
}

@keyframes celebs-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 900px) {
  .celeb-slide {
    width: calc((100vw - 32px - 40px) / 2.4);
  }
}

@media (max-width: 560px) {
  .celeb-slide {
    width: calc((100vw - 24px - 24px) / 1.6);
  }
  .celebs-slider-track {
    gap: 12px;
    animation-duration: 18s;
  }
}
/* ===========================================================
   "Find the Right Celebrity for Your Brand" — gradient CTA
   banner shown after the enquiry form.
   =========================================================== */
.brand-cta-section {
  padding-top: 32px !important;
}

#enquiry.section-alt {
  padding-bottom: 32px !important;
}

.brand-cta-box {
  background: radial-gradient(120% 160% at 50% 0%, #6b2323 0%, #4a1a1a 60%, #3a1414 100%);
  border: 1px solid rgba(230, 185, 100, 0.25);
  border-radius: 20px;
  padding: 32px 32px;
  text-align: center;
}

.brand-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(230, 185, 100, 0.5);
  border-radius: 999px;
  padding: 8px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.brand-cta-box h2 {
  font-family: var(--font-display);
  color: #fff;
  font-size: clamp(26px, 3.8vw, 40px);
  margin: 0 0 14px;
}

.brand-cta-box h2 .accent {
  color: var(--gold);
}

.brand-cta-box p {
  color: rgba(243, 241, 236, 0.75);
  font-size: 15px;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto 22px;
}

.brand-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.brand-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  padding: 14px 26px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}

.brand-cta-btn-solid {
  background: linear-gradient(135deg, #f3d488 0%, var(--gold) 55%, #c99a3f 100%);
  color: #1a0808;
}

.brand-cta-btn-solid:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #f7dea0 0%, #e0b452 55%, #d4a747 100%);
}

.brand-cta-btn-outline {
  background: transparent;
  border: 1px solid rgba(230, 185, 100, 0.6);
  color: var(--gold);
}

.brand-cta-btn-outline:hover {
  background: rgba(230, 185, 100, 0.1);
}

@media (max-width: 560px) {
  .brand-cta-box {
    padding: 32px 20px;
  }
  .brand-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .brand-cta-btn {
    justify-content: center;
  }
}

/* NOTE: the old page-specific .btn-gold override that used to live
   here has been removed. It was scoped "only to this page" in
   comment, but since the shared header (with its "Book Now" button)
   is included on every page including this one, the !important
   override was also hijacking the header button's color here —
   making it look different from every other page. The site-wide
   .btn-gold gradient in style.css now already matches this page's
   intended look, so no override is needed anymore.
   =========================================================== */