/* =========================================================
   ARCHIVAS Y DOCUMENTAS — DOCUMENTOS RELACIONADOS DE ARTISTA

   Ruta:
   /var/www/html/themes/default/asset/css/ay-artist-documents.css

   Esta hoja complementa ay-document-show.css.
   ========================================================= */

:root {
  --ay-artist-documents-dark: #22061d;
  --ay-artist-documents-magenta: #a51d75;
  --ay-artist-documents-pink: #f3dde7;
  --ay-artist-documents-lavender: #9f9dff;
  --ay-artist-documents-content-width: min(1100px, calc(100vw - 140px));
}

.ay-artist-documents-page,
.ay-artist-documents-page *,
.ay-artist-documents-page *::before,
.ay-artist-documents-page *::after {
  box-sizing: border-box;
}

.ay-artist-documents-page {
  min-height: 100vh;
  color: var(--ay-artist-documents-dark);
  background:
    linear-gradient(
      180deg,
      var(--ay-artist-documents-lavender) 0%,
      #d9caef 6%,
      var(--ay-artist-documents-pink) 17%,
      var(--ay-artist-documents-pink) 82%,
      #d8c8ef 91%,
      var(--ay-artist-documents-lavender) 100%
    );
}

.ay-artist-documents-page a {
  color: inherit;
  text-decoration: none;
}

/* =========================================================
   1) CONTENIDO PRINCIPAL
   ========================================================= */
.ay-artist-documents-main {
  width: var(--ay-artist-documents-content-width) !important;
  max-width: var(--ay-artist-documents-content-width) !important;
  margin: 0 auto !important;
  padding: 0 0 118px !important;
  background: transparent !important;
}

.ay-artist-documents-heading {
  position: relative !important;
  width: 100% !important;
  margin: 0 0 36px !important;
  padding: 0 !important;
  color: var(--ay-artist-documents-dark) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ay-artist-documents-status {
  position: absolute !important;
  left: -70px !important;
  top: 43px !important;
  width: 58px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ay-artist-documents-magenta) !important;
  font-size: 9px !important;
  line-height: 1.18 !important;
  font-weight: 400 !important;
  text-align: left !important;
  text-transform: uppercase !important;
}

.ay-artist-documents-heading h1 {
  margin: 0 !important;
  padding: 0 0 12px !important;
  color: var(--ay-artist-documents-dark) !important;
  border-bottom: 1.5px solid var(--ay-artist-documents-magenta) !important;
  font-size: 31px !important;
  line-height: 1 !important;
  letter-spacing: 0.025em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.ay-artist-documents-context {
  width: 100% !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 9px 0 8px !important;
  color: var(--ay-artist-documents-magenta) !important;
  border-bottom: 1.5px solid var(--ay-artist-documents-magenta) !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

/* =========================================================
   2) LISTA PRINCIPAL
   ========================================================= */
.ay-artist-documents-list {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.ay-artist-documents-row {
  width: 100% !important;
  margin: 0 !important;
  padding: 28px 0 !important;
  border-bottom: 1.4px solid var(--ay-artist-documents-magenta) !important;
  scroll-margin-top: 26px !important;
}

.ay-artist-documents-row:last-child {
  border-bottom: 0 !important;
}

.ay-artist-documents-row-link {
  display: grid !important;
  grid-template-columns: 235px minmax(0, 1fr) !important;
  column-gap: 58px !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ay-artist-documents-dark) !important;
  background: transparent !important;
  border: 0 !important;
  text-decoration: none !important;
}

.ay-artist-documents-thumb {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 235px !important;
  height: 330px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.24) !important;
  border: 0 !important;
}

.ay-artist-documents-thumb::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  border: 2px solid var(--ay-artist-documents-magenta) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 160ms ease !important;
}

.ay-artist-documents-row-link:hover .ay-artist-documents-thumb::after,
.ay-artist-documents-row-link:focus-visible .ay-artist-documents-thumb::after {
  opacity: 1 !important;
}

.ay-artist-documents-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
}

.ay-artist-documents-placeholder {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 20px !important;
  color: var(--ay-artist-documents-magenta) !important;
  border: 1.5px solid var(--ay-artist-documents-magenta) !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

.ay-artist-documents-meta {
  display: block !important;
  width: 100% !important;
  max-width: 610px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ay-artist-documents-dark) !important;
}

.ay-artist-documents-meta > div {
  display: grid !important;
  grid-template-columns: 125px minmax(0, 1fr) !important;
  column-gap: 8px !important;
  align-items: baseline !important;
  width: 100% !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
}

.ay-artist-documents-meta dt,
.ay-artist-documents-meta dd {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ay-artist-documents-dark) !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  overflow-wrap: anywhere !important;
}

.ay-artist-documents-meta dt {
  white-space: nowrap !important;
}

.ay-artist-documents-row-link:hover .ay-artist-documents-meta dd,
.ay-artist-documents-row-link:focus-visible .ay-artist-documents-meta dd {
  color: var(--ay-artist-documents-magenta) !important;
}

.ay-artist-documents-row-link:focus-visible {
  outline: 2px solid var(--ay-artist-documents-magenta) !important;
  outline-offset: 7px !important;
}

.ay-artist-documents-empty {
  width: 100% !important;
  margin: 50px 0 120px !important;
  color: var(--ay-artist-documents-dark) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

/* =========================================================
   3) PAGINACIÓN
   ========================================================= */
.ay-artist-documents-pagination {
  display: grid !important;
  grid-template-columns: 34px 286px 34px !important;
  align-items: stretch !important;
  justify-content: center !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 58px auto 112px !important;
  padding: 0 !important;
  color: var(--ay-artist-documents-dark) !important;
  background: transparent !important;
  border: 0 !important;
}

.ay-artist-documents-page-arrow,
.ay-artist-documents-page-status {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ay-artist-documents-dark) !important;
  background: transparent !important;
  border: 1.5px solid var(--ay-artist-documents-dark) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.ay-artist-documents-page-status {
  border-left: 0 !important;
  border-right: 0 !important;
}

.ay-artist-documents-page-arrow:not(.is-disabled):hover,
.ay-artist-documents-page-arrow:not(.is-disabled):focus-visible {
  color: var(--ay-artist-documents-pink) !important;
  background: var(--ay-artist-documents-magenta) !important;
  border-color: var(--ay-artist-documents-magenta) !important;
}

.ay-artist-documents-page-arrow.is-disabled {
  opacity: 0.38 !important;
}

/* =========================================================
   4) SELECCIÓN INFERIOR
   ========================================================= */
.ay-artist-documents-featured {
  width: 100% !important;
  margin: 0 !important;
  padding: 48px 0 20px !important;
  border-top: 1.5px solid var(--ay-artist-documents-dark) !important;
  background: transparent !important;
}

.ay-artist-documents-featured-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 76px !important;
  row-gap: 68px !important;
  width: 100% !important;
}

.ay-artist-documents-featured-card {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 0 18px !important;
  border-bottom: 1px solid rgba(165, 29, 117, 0.55) !important;
}

.ay-artist-documents-featured-card h2 {
  min-height: 28px !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  color: var(--ay-artist-documents-dark) !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

.ay-artist-documents-featured-link {
  display: block !important;
  width: 100% !important;
  color: var(--ay-artist-documents-dark) !important;
  text-decoration: none !important;
}

.ay-artist-documents-featured-thumb {
  position: relative !important;
  width: 100% !important;
  height: 270px !important;
  margin: 0 0 14px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

.ay-artist-documents-featured-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
}

.ay-artist-documents-featured-link h3 {
  margin: 0 0 7px !important;
  color: var(--ay-artist-documents-dark) !important;
  font-size: 10.5px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

.ay-artist-documents-featured-link p {
  margin: 0 !important;
  color: var(--ay-artist-documents-dark) !important;
  font-size: 8.5px !important;
  line-height: 1.38 !important;
}

.ay-artist-documents-featured-link:hover h3,
.ay-artist-documents-featured-link:focus-visible h3 {
  color: var(--ay-artist-documents-magenta) !important;
}

.ay-artist-documents-featured-link:focus-visible {
  outline: 2px solid var(--ay-artist-documents-magenta) !important;
  outline-offset: 5px !important;
}

/* =========================================================
   5) TABLETA
   ========================================================= */
@media (min-width: 761px) and (max-width: 1180px) {
  :root {
    --ay-artist-documents-content-width: min(920px, calc(100vw - 80px));
  }

  .ay-artist-documents-row-link {
    grid-template-columns: 210px minmax(0, 1fr) !important;
    column-gap: 40px !important;
  }

  .ay-artist-documents-thumb {
    width: 210px !important;
    height: 300px !important;
  }

  .ay-artist-documents-featured-grid {
    column-gap: 42px !important;
  }
}

/* =========================================================
   6) MÓVIL — NORMALIZADO CON LAS FICHAS DE ARTISTA
   Solo afecta pantallas de hasta 767 px.
   ========================================================= */
@media (max-width: 767px) {
  :root {
    --ay-artist-documents-content-width: 100%;
  }

  .ay-artist-documents-page {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    background: var(--ay-artist-documents-pink) !important;
  }

  .ay-artist-documents-main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 24px 24px 90px !important;
    background:
      linear-gradient(
        180deg,
        #d8c7ee 0%,
        var(--ay-artist-documents-lavender) 18%,
        #c9b4ed 48%,
        var(--ay-artist-documents-pink) 100%
      ) !important;
  }

  .ay-artist-documents-heading {
    width: 100% !important;
    margin: 0 0 30px !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .ay-artist-documents-status {
    position: static !important;
    display: block !important;
    width: auto !important;
    margin: 0 0 9px !important;
    color: var(--ay-artist-documents-magenta) !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  .ay-artist-documents-heading h1 {
    width: min(320px, 100%) !important;
    margin: 0 auto !important;
    padding: 0 0 16px !important;
    color: var(--ay-artist-documents-dark) !important;
    border-bottom: 1.2px solid var(--ay-artist-documents-magenta) !important;
    font-size: 27px !important;
    line-height: 1 !important;
    letter-spacing: 0.035em !important;
    text-align: center !important;
  }

  .ay-artist-documents-context {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    color: var(--ay-artist-documents-magenta) !important;
    border-bottom: 1.2px solid var(--ay-artist-documents-magenta) !important;
    font-size: 8.5px !important;
    line-height: 1.4 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
  }

  .ay-artist-documents-list {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .ay-artist-documents-row {
    width: 100% !important;
    margin: 0 !important;
    padding: 34px 0 !important;
    border-bottom: 1.3px solid var(--ay-artist-documents-magenta) !important;
  }

  .ay-artist-documents-row:last-child {
    border-bottom: 0 !important;
  }

  .ay-artist-documents-row-link {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .ay-artist-documents-thumb {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 141 / 200 !important;
    margin: 0 0 18px !important;
    overflow: hidden !important;
  }

  .ay-artist-documents-thumb::after {
    display: none !important;
  }

  .ay-artist-documents-thumb img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .ay-artist-documents-placeholder {
    font-size: 11px !important;
  }

  .ay-artist-documents-meta {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .ay-artist-documents-meta > div {
    display: grid !important;
    grid-template-columns: 106px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    align-items: start !important;
    width: 100% !important;
    margin: 0 0 7px !important;
  }

  .ay-artist-documents-meta dt,
  .ay-artist-documents-meta dd {
    display: block !important;
    margin: 0 !important;
    color: var(--ay-artist-documents-dark) !important;
    font-size: 10.5px !important;
    line-height: 1.42 !important;
    overflow-wrap: anywhere !important;
  }

  .ay-artist-documents-meta dt {
    font-weight: 700 !important;
    white-space: normal !important;
  }

  .ay-artist-documents-pagination {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) 30px !important;
    width: 100% !important;
    max-width: 342px !important;
    margin: 42px auto 78px !important;
  }

  .ay-artist-documents-page-arrow,
  .ay-artist-documents-page-status {
    height: 29px !important;
    font-size: 8px !important;
  }

  .ay-artist-documents-featured {
    width: 100% !important;
    margin: 0 !important;
    padding: 48px 0 0 !important;
    border-top: 1.3px solid var(--ay-artist-documents-dark) !important;
  }

  .ay-artist-documents-featured-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 34px !important;
    column-gap: 0 !important;
    width: 100% !important;
  }

  .ay-artist-documents-featured-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 0 !important;
  }

  .ay-artist-documents-featured-card + .ay-artist-documents-featured-card {
    padding-top: 34px !important;
    border-top: 1.3px solid var(--ay-artist-documents-magenta) !important;
  }

  .ay-artist-documents-featured-card h2 {
    min-height: 0 !important;
    margin: 0 0 18px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  .ay-artist-documents-featured-thumb {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 141 / 200 !important;
    margin: 0 0 14px !important;
  }

  .ay-artist-documents-featured-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  .ay-artist-documents-featured-link h3 {
    margin-bottom: 8px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  .ay-artist-documents-featured-link p {
    color: var(--ay-artist-documents-magenta) !important;
    font-size: 9.5px !important;
    line-height: 1.4 !important;
  }

  .ay-artist-documents-empty {
    margin: 42px 0 84px !important;
    font-size: 11px !important;
  }
}

/* =========================================================
   AJUSTE PUNTUAL — MENÚ MÓVIL ABIERTO
   Aplicado únicamente al listado de documentos relacionados.
   No modifica la vista normal de la página.
   ========================================================= */
@media (max-width: 767px) {
  .ay-artist-documents-page
  .ay-document-show-menu[open]
  .ay-document-show-menu-contact {
    height: auto !important;
    min-height: 0 !important;
  }

  .ay-artist-documents-page
  .ay-document-show-menu[open]
  .ay-document-show-menu-footer {
    margin: 30px auto 0 !important;
  }
}