/* Small overrides to restore the original “motion feel” without Next.js runtime. */

/* Avoid “flash” of the reference HTML before JS applies `PRESSKIT_DATA`. */
html.pk-preload body {
  opacity: 0;
}

body {
  opacity: 1;
  transition: opacity 120ms ease;
}

/* Tipografías:
   - `--font-primary`: títulos/banners/headlines
   - `--font-secondary`: texto general
   - `--font-tertiary`: código/monospace */
:root {
  --font-primary: "Bebas Neue", ui-sans-serif, system-ui, sans-serif;
  --font-secondary: "Unbounded", ui-sans-serif, system-ui, sans-serif;
  --font-tertiary: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

body {
  font-family: var(--font-secondary, var(--default-font-family));
}

h1,
h2,
h3,
h4,
h5,
h6,
[data-pk-title],
nav button,
.pk-bio-marquee h5 {
  font-family: var(--font-primary, var(--default-font-family));
}

code,
pre {
  font-family: var(--font-tertiary, var(--default-mono-font-family));
}

@media (prefers-reduced-motion: reduce) {
  .pk-marquee {
    animation: none !important;
    transform: none !important;
  }
}

@keyframes pk-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--pk-marquee-shift, -50%));
  }
}

.pk-marquee {
  will-change: transform;
  animation: pk-marquee 22s linear infinite;
}

.pk-banner {
  background-color: var(--pk-banner-bg, var(--color-accent)) !important;
}

.pk-banner [data-pk-banner-item] {
  color: var(--pk-banner-fg, var(--color-secondary)) !important;
}

/* The HTML was reformatted with newlines; original uses `white-space:pre`,
   which would turn newlines into line breaks (making titles “vertical”). */
span[style*="white-space:pre"] {
  white-space: nowrap !important;
}

/* En mobile, algunos títulos largos deben poder partir en 2 líneas (sin quedar cortados). */
@media (max-width: 768px) {
  h2[data-pk-title].whitespace-nowrap {
    white-space: normal !important;
  }
}

/* Evita cortes raros en títulos animados: permitir wrap entre palabras, no dentro. */
h2[data-pk-title] {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

@keyframes pk-bio-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.pk-bio-marquee {
  will-change: transform;
  animation: pk-bio-marquee 18s linear infinite;
  width: max-content;
  flex-wrap: nowrap;
}

/* BIO marquee position/rotation (editable via data.js /editor).
   Importante: evitamos `translate + rotate` en el mismo `transform` para que la rotación
   no “mueva” el centrado. El outer centra, el inner rota y recorta. */
[data-pk-bio-marquee-sticky="1"] {
  position: sticky;
  top: 0;
  height: 0; /* overlay sin empujar contenido */
  z-index: 5;
  pointer-events: none;
}

[data-pk-bio-marquee-wrap="1"] {
  position: absolute !important;
  top: var(--pk-bio-marquee-y, 50vh) !important;
  left: var(--pk-bio-marquee-x, 50%) !important;
  /* Anchor semantics: 0 = left, 50 = center, 100 = right. */
  transform: translate(calc(var(--pk-bio-marquee-x, 50%) * -1), -50%) !important;
  transform-origin: center;
  will-change: transform;
  z-index: 5 !important;
}

[data-pk-bio-marquee-inner="1"] {
  --pk-bio-marquee-rot-default: 0deg;
  transform: rotate(var(--pk-bio-marquee-rot, var(--pk-bio-marquee-rot-default)));
  transform-origin: center;
  display: inline-block;
  overflow: visible;
}

/* Mantener el look original: en desktop el marquee suele ir en vertical. */
@media (min-width: 1024px) {
  [data-pk-bio-marquee-inner="1"] {
    --pk-bio-marquee-rot-default: 90deg;
  }
}

.pk-bio-marquee h5 {
  white-space: nowrap;
}

.pk-gallery-title {
  will-change: opacity, transform;
}

.pk-gallery-carousel-track {
  display: flex;
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.pk-social-row {
  display: flex;
  gap: 42px;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1024px) {
  .pk-social-row {
    justify-content: flex-start;
  }
}

.pk-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
}

.pk-icon {
  width: 46px;
  height: 46px;
  display: inline-block;
  background-color: var(--pk-social-icon-color, var(--color-accent));
  opacity: 0.95;
  -webkit-mask-image: var(--pk-mask);
  mask-image: var(--pk-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  filter: drop-shadow(0 0 10px var(--pk-social-icon-shadow, rgba(80, 18, 105, 0.35)));
}

.pk-social-link:hover .pk-icon {
  opacity: 0.6;
}

[data-pk="bio"] {
  white-space: pre-wrap !important;
}

[data-pk-biography-shell="1"] {
  position: relative;
  overflow: hidden;
}

[data-pk-biography-shell="1"] [data-pk-section="bio"],
[data-pk-biography-shell="1"] [data-pk-section="bio-extra"] {
  position: relative;
  z-index: 10;
}

[data-pk-biography-shell="1"] [data-pk-bio-mock-layer] {
  pointer-events: none;
  z-index: 1;
}

[data-pk-biography-shell="1"] [data-pk-bio-mock-layer="left"] {
  top: 50px;
  left: 0;
}

[data-pk-biography-shell="1"] [data-pk-bio-mock-layer="right"] {
  right: 0;
  bottom: 50px;
}

.pk-external-feed-shell {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: clamp(1rem, 2.2vw, 1.75rem);
  background: color-mix(in srgb, var(--color-secondary-lighter) 84%, transparent);
  border: 1px solid rgb(var(--pk-accent-rgb) / 0.16);
  box-shadow: 3px 3px 2px var(--color-accent);
  overflow: hidden;
}

.pk-external-feed-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.pk-external-feed-message {
  margin: 0;
  color: var(--color-primary);
  opacity: 0.82;
  line-height: 1.6;
}

.pk-external-feed-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.9rem 1.4rem;
  border: 2px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity 180ms ease, background-color 180ms ease, color 180ms ease;
}

.pk-external-feed-link:hover {
  background: var(--color-secondary-lighter);
}

.pk-media-embed-shell {
  width: min(100%, 72rem);
  margin: 0 auto;
}

.pk-media-embed-frame {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
}

.pk-resident-advisor-shell iframe,
.pk-resident-advisor-shell embed,
.pk-resident-advisor-shell object {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
}

.pk-bandsintown-shell .bit-widget-container,
.pk-bandsintown-shell iframe {
  width: 100% !important;
  max-width: 100% !important;
}

/* Hero mobile: desplazar la foto hacia la derecha con una regla fluida,
   tomando como referencia el encuadre del iPhone 14 Pro Max pero adaptando
   el offset al ancho real del viewport. */
@media (max-width: 767px) {
  [data-pk-section="portada"] img[alt="home-mock-1"] {
    padding-inline-start: clamp(3.5rem, 22vw, 6.75rem);
    padding-inline-end: clamp(0.75rem, 3vw, 1.5rem);
  }

  [data-pk-gallery-layer="masonry"] [data-pk-gallery-masonry-inner] {
    height: auto !important;
    grid-template-rows: none !important;
  }

  [data-pk-gallery-layer="masonry"] [data-pk-gallery-masonry-inner] > div {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
  }

  [data-pk-gallery-layer="masonry"] [data-pk-gallery-masonry-img] {
    display: block;
    width: 100%;
    height: min(58vh, 28rem) !important;
  }
}

/* Cards grids (Releases / DJ Sets)
   El HTML original usa grid con columnas `1fr`, que “pega” los items a la izquierda
   cuando hay pocos. Forzamos columnas con ancho máximo y centramos el track. */
[data-pk="releases"],
[data-pk="dj-sets"] {
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(170px, 260px));
}

a.pk-release-linked-card article[data-pk-linked-release-card="1"],
a.pk-djset-linked-card article[data-pk-linked-djset-card="1"] {
  padding: 0 !important;
  background: transparent !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0.9rem !important;
  box-shadow: none !important;
}

a.pk-release-linked-card [data-pk-linked-card-accent="1"],
a.pk-djset-linked-card [data-pk-linked-card-accent="1"] {
  display: none !important;
}

a.pk-release-linked-card [data-pk-linked-card-media="1"],
a.pk-djset-linked-card [data-pk-linked-card-media="1"] {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  opacity: 1 !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

a.pk-release-linked-card img[data-pk="release-image"],
a.pk-djset-linked-card img[data-pk="release-image"] {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border: 0 !important;
  border-radius: 0 !important;
}

a.pk-release-linked-card [data-pk-linked-card-content="1"],
a.pk-djset-linked-card [data-pk-linked-card-content="1"] {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.35rem !important;
  padding: 0 !important;
}

a.pk-release-linked-card [data-pk-linked-card-title="1"],
a.pk-release-linked-card [data-pk-linked-card-label="1"],
a.pk-djset-linked-card [data-pk-linked-card-title="1"],
a.pk-djset-linked-card [data-pk-linked-card-label="1"] {
  display: block !important;
  width: 100%;
  text-align: center !important;
}

a.pk-release-linked-card [data-pk-linked-card-title="1"],
a.pk-djset-linked-card [data-pk-linked-card-title="1"] {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

a.pk-release-linked-card [data-pk-linked-card-label="1"],
a.pk-djset-linked-card [data-pk-linked-card-label="1"] {
  display: none !important;
}

@media (min-width: 768px) {
  [data-pk="releases"],
  [data-pk="dj-sets"] {
    grid-template-columns: repeat(auto-fit, minmax(200px, 280px));
  }
}

@media (min-width: 1280px) {
  [data-pk="releases"],
  [data-pk="dj-sets"] {
    grid-template-columns: repeat(auto-fit, minmax(220px, 320px));
  }
}

/* Technical rider items: render dinámico + centrado (incluso con 1 solo item). */
section [data-pk="rider-items"] {
  display: grid !important;
  gap: 20px;
  justify-content: center !important; /* centra el track cuando hay 1 card */
  justify-items: center !important; /* centra el item dentro de su columna */
  grid-template-columns: repeat(auto-fit, minmax(280px, 520px)) !important;
}

section [data-pk="rider-items"] > article {
  width: 100% !important;
  max-width: 520px;
}

@media (min-width: 768px) {
  section [data-pk="rider-items"] {
    grid-template-columns: repeat(auto-fit, minmax(340px, 560px)) !important;
  }
  section [data-pk="rider-items"] > article {
    max-width: 560px;
  }
}