/**
 * Cántico de Fe Music
 * Hymn Library Engine
 *
 * Dark Visual Design System Integration
 *
 * Incluye:
 * - Biblioteca de himnos
 * - Tarjetas
 * - Favoritos
 * - Buscador
 * - Ordenamiento
 * - Detalle del himno
 * - Acciones
 * - Cargar más
 * - Estados hover / focus
 * - Responsive
 * - Reduced motion
 */

/* ==========================================================
   Library / Detail Layout
   ========================================================== */

.hymn-library,
.hymn-detail {
  padding:
    var(--space-7)
    0
    120px;

  color:
    var(--color-text);
}

/* ==========================================================
   Kicker / Categories
   ========================================================== */

.hymn-library__kicker,
.hymn-library-card__category,
.hymn-detail__category {
  margin:
    0 0
    var(--space-2);

  color:
    var(--color-primary);

  letter-spacing:
    0.18em;

  font-size:
    var(--font-size-xs);

  font-weight:
    900;

  text-transform:
    uppercase;
}

/* ==========================================================
   Main Headings
   ========================================================== */

.hymn-library__header h1,
.hymn-detail h1 {
  margin:
    0;

  color:
    var(--color-text);

  font-size:
    clamp(
      2.2rem,
      6vw,
      4rem
    );

  line-height:
    1;

  letter-spacing:
    -0.03em;
}

/* ==========================================================
   Tools
   ========================================================== */

.hymn-library__tools {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(220px, 280px);

  align-items:
    center;

  gap:
    var(--space-4);

  margin:
    var(--space-7)
    0;
}

/* ==========================================================
   Search Input
   ========================================================== */

.hymn-library__tools input {
  width:
    100%;

  min-height:
    52px;

  padding:
    var(--space-3)
    var(--space-5);

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-pill);

  background:
    var(--color-surface);

  color:
    var(--color-text);

  font:
    inherit;

  transition:
    border-color
      var(--transition-fast),
    background
      var(--transition-fast),
    box-shadow
      var(--transition-fast);
}

.hymn-library__tools input::placeholder {
  color:
    var(--color-text-muted);
}

.hymn-library__tools input:hover {
  border-color:
    var(--color-border-primary);

  background:
    var(--color-surface-elevated);
}

.hymn-library__tools input:focus {
  outline:
    none;

  border-color:
    var(--color-primary);

  box-shadow:
    var(--shadow-primary);
}

/* ==========================================================
   Hymn Grid
   V13.4.33 — 3 cards desktop / 2 tablet / 1 mobile
   ========================================================== */

.hymn-library__grid,
.hymn-library-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    22px;

  align-items:
    stretch;
}

/* ==========================================================
   Hymn Card / Detail Card
   ========================================================== */

.hymn-library-card,
.hymn-detail__card {
  background:
    linear-gradient(
      145deg,
      var(--color-surface),
      var(--color-background-secondary)
    );

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-xl);

  color:
    var(--color-text);

  box-shadow:
    var(--shadow-md);
}

.hymn-detail__card {
  padding:
    var(--space-6);
}

/* ==========================================================
   Hymn Card
   ========================================================== */

.hymn-library-card {
  position:
    relative;

  display:
    flex;

  gap:
    var(--space-4);

  height:
    100%;

  min-width:
    0;

  padding:
    var(--space-5);

  overflow:
    hidden;

  transition:
    transform
      var(--transition-normal),
    border-color
      var(--transition-normal),
    box-shadow
      var(--transition-normal),
    background
      var(--transition-normal);
}

.hymn-library-card:hover {
  transform:
    translateY(-4px);

  border-color:
    var(--color-border-primary);

  background:
    linear-gradient(
      145deg,
      var(--color-surface-elevated),
      var(--color-background-secondary)
    );

  box-shadow:
    var(--shadow-lg);
}

.hymn-library-card:focus-within {
  border-color:
    var(--color-primary);

  box-shadow:
    var(--shadow-primary),
    var(--shadow-lg);
}

/* ==========================================================
   Hymn Card Body
   ========================================================== */

.hymn-library-card__body {
  display:
    flex;

  flex:
    1;

  flex-direction:
    column;

  min-width:
    0;

  padding-right:
    52px;
}

.hymn-library-card__body > p {
  line-height:
    1.55;
}

/* ==========================================================
   Hymn Card Title
   ========================================================== */

.hymn-library-card h3 {
  margin:
    0 0
    var(--space-2);

  color:
    var(--color-text);

  line-height:
    1.2;

  font-size:
    var(--font-size-lg);

  font-weight:
    var(--font-weight-bold);
}

/* ==========================================================
   Description
   ========================================================== */

.hymn-library-card__description {
  margin:
    var(--space-3)
    0
    0;

  color:
    var(--color-text-secondary);

  font-size:
    var(--font-size-sm);

  line-height:
    1.6;
}

.hymn-library-card__body > p:not(
  .hymn-library-card__category
):not(
  .hymn-library-card__scripture
) {
  color:
    var(--color-text-secondary);
}

/* ==========================================================
   Scripture
   ========================================================== */

.hymn-library-card__scripture,
.hymn-detail__scripture {
  margin:
    var(--space-2)
    0
    0;

  color:
    var(--color-primary-hover);

  font-weight:
    var(--font-weight-bold);
}

/* ==========================================================
   Card Icon
   ========================================================== */

.hymn-library-card__icon {
  display:
    grid;

  place-items:
    center;

  width:
    48px;

  height:
    48px;

  flex:
    0 0 48px;

  border:
    1px solid
    var(--color-border-primary);

  border-radius:
    var(--radius-md);

  background:
    linear-gradient(
      145deg,
      #0b3558,
      #10263a
    );

  color:
    var(--color-primary);

  font-size:
    1.45rem;

  box-shadow:
    var(--shadow-sm);

  transition:
    transform
      var(--transition-normal),
    box-shadow
      var(--transition-normal);
}

.hymn-library-card:hover
.hymn-library-card__icon {
  transform:
    scale(1.05)
    rotate(-2deg);

  box-shadow:
    var(--shadow-md);
}

/* ==========================================================
   Favorite Button
   ========================================================== */

.hymn-library-card__favorite {
  position:
    absolute;

  top:
    var(--space-4);

  right:
    var(--space-4);

  left:
    auto;

  display:
    grid;

  place-items:
    center;

  width:
    42px;

  height:
    42px;

  padding:
    0;

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-md);

  background:
    var(--color-surface-elevated);

  color:
    var(--color-text-muted);

  cursor:
    pointer;

  box-shadow:
    var(--shadow-sm);

  transition:
    transform
      var(--transition-fast),
    color
      var(--transition-fast),
    background
      var(--transition-fast),
    border-color
      var(--transition-fast),
    box-shadow
      var(--transition-fast);
}

.hymn-library-card__favorite:hover {
  transform:
    translateY(-2px)
    scale(1.05);

  border-color:
    var(--color-border-primary);

  background:
    var(--color-primary-soft);

  color:
    var(--color-primary);

  box-shadow:
    var(--shadow-md);
}

.hymn-library-card__favorite:active {
  transform:
    scale(0.94);
}

.hymn-library-card__favorite:focus-visible {
  outline:
    2px solid
    var(--color-primary);

  outline-offset:
    3px;
}

/* ==========================================================
   Favorite Icon
   ========================================================== */

.favorite-icon {
  width:
    24px;

  height:
    24px;

  fill:
    transparent;

  stroke:
    currentColor;

  stroke-width:
    1.8;

  stroke-linejoin:
    round;

  transition:
    fill
      var(--transition-fast),
    stroke
      var(--transition-fast),
    transform
      var(--transition-fast),
    filter
      var(--transition-fast);
}

/* ==========================================================
   Favorite Active
   ========================================================== */

.hymn-library-card__favorite[
  aria-pressed="true"
] {
  color:
    var(--color-primary);

  background:
    var(--color-primary-soft);

  border-color:
    var(--color-border-primary);

  box-shadow:
    var(--shadow-primary),
    var(--shadow-sm);
}

.hymn-library-card__favorite[
  aria-pressed="true"
]
.favorite-icon {
  fill:
    currentColor;

  stroke:
    currentColor;

  filter:
    drop-shadow(
      0 2px 4px
      rgba(244, 208, 111, 0.26)
    );

  animation:
    favorite-pop
    0.3s ease;
}

@keyframes favorite-pop {
  0% {
    transform:
      scale(0.8);
  }

  50% {
    transform:
      scale(1.18);
  }

  100% {
    transform:
      scale(1);
  }
}

/* ==========================================================
   Card Actions
   ========================================================== */

.hymn-library-card__actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    var(--space-2);

  margin-top:
    auto;

  padding-top:
    var(--space-5);
}

/* ==========================================================
   Shared Card Action Controls
   ========================================================== */

.hymn-library-card__actions a,
.hymn-library-card__actions button,
.hymn-detail button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    var(--space-2);

  min-height:
    42px;

  padding:
    10px
    14px;

  border-radius:
    var(--radius-pill);

  font:
    inherit;

  font-size:
    var(--font-size-sm);

  font-weight:
    var(--font-weight-bold);

  cursor:
    pointer;

  text-decoration:
    none;

  transition:
    transform
      var(--transition-fast),
    background
      var(--transition-fast),
    border-color
      var(--transition-fast),
    color
      var(--transition-fast),
    box-shadow
      var(--transition-fast);
}

/* ==========================================================
   View Lyrics Button
   ========================================================== */

.hymn-library-card__actions a {
  border:
    1px solid
    var(--color-border-primary);

  background:
    transparent;

  color:
    var(--color-primary);
}

.hymn-library-card__actions a:hover {
  transform:
    translateY(-2px);

  background:
    var(--color-primary-soft);

  border-color:
    var(--color-primary);

  color:
    var(--color-primary-hover);
}

/* ==========================================================
   Play / Playlist Buttons
   ========================================================== */

.hymn-library-card__actions button,
.hymn-detail button {
  border:
    1px solid
    #174f78;

  background:
    #0b3558;

  color:
    var(--color-text);
}

.hymn-library-card__actions button:hover,
.hymn-detail button:hover {
  transform:
    translateY(-2px);

  border-color:
    #226792;

  background:
    #124a76;

  box-shadow:
    0 8px 18px
    rgba(11, 53, 88, 0.28);
}

/* ==========================================================
   Active / Focus
   ========================================================== */

.hymn-library-card__actions a:active,
.hymn-library-card__actions button:active,
.hymn-detail button:active {
  transform:
    scale(0.97);
}

.hymn-library-card__actions a:focus-visible,
.hymn-library-card__actions button:focus-visible,
.hymn-detail button:focus-visible {
  outline:
    2px solid
    var(--color-primary);

  outline-offset:
    3px;
}

/* ==========================================================
   Search Highlight
   ========================================================== */

.hymn-library-card__highlight {
  padding:
    0 2px;

  border-radius:
    3px;

  background:
    var(--color-primary);

  color:
    var(--color-text-inverse);
}

/* ==========================================================
   Load More
   ========================================================== */

.hymn-library__load-more {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    100%;

  margin-top:
    var(--space-6);

  padding-top:
    var(--space-2);
}

.hymn-library__load-more:has(
  #hymnLibraryLoadMore[hidden]
) {
  display:
    none;
}

#hymnLibraryLoadMore {
  min-height:
    44px;

  padding:
    var(--space-2)
    var(--space-5);

  border:
    1px solid
    var(--color-border-strong);

  border-radius:
    var(--radius-pill);

  background:
    var(--color-surface);

  color:
    var(--color-text);

  font:
    inherit;

  font-size:
    var(--font-size-sm);

  font-weight:
    var(--font-weight-bold);

  cursor:
    pointer;

  transition:
    transform
      var(--transition-fast),
    border-color
      var(--transition-fast),
    background
      var(--transition-fast),
    color
      var(--transition-fast),
    box-shadow
      var(--transition-fast);
}

#hymnLibraryLoadMore:hover {
  transform:
    translateY(-2px);

  border-color:
    var(--color-border-primary);

  background:
    var(--color-primary-soft);

  color:
    var(--color-primary-hover);

  box-shadow:
    var(--shadow-sm);
}

#hymnLibraryLoadMore:focus-visible {
  outline:
    2px solid
    var(--color-primary);

  outline-offset:
    3px;
}

/* ==========================================================
   Detail Lyrics
   ========================================================== */

.hymn-detail__lyrics {
  margin-top:
    var(--space-5);

  color:
    var(--color-text);

  line-height:
    1.8;

  font-size:
    1.08rem;
}

.hymn-detail__lyrics p {
  margin:
    0.25rem
    0;
}

/* ==========================================================
   Empty State
   ========================================================== */

.hymn-library__empty {
  padding:
    var(--space-5);

  border:
    1px dashed
    var(--color-border-primary);

  border-radius:
    var(--radius-lg);

  background:
    var(--color-surface-soft);

  color:
    var(--color-text-secondary);
}

/* ==========================================================
   Sort Engine
   ========================================================== */

.hymn-library__sort {
  width:
    100%;
}

.hymn-sort {
  display:
    flex;

  align-items:
    center;

  gap:
    var(--space-3);

  width:
    100%;
}

/* ==========================================================
   Sort Label
   ========================================================== */

.hymn-sort__label {
  flex:
    0 0 auto;

  color:
    var(--color-text-secondary);

  font-size:
    var(--font-size-sm);

  font-weight:
    var(--font-weight-bold);

  white-space:
    nowrap;
}

/* ==========================================================
   Sort Select
   ========================================================== */

.hymn-sort__select {
  width:
    100%;

  min-height:
    50px;

  padding:
    12px
    42px
    12px
    16px;

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-pill);

  background-color:
    var(--color-surface);

  color:
    var(--color-text);

  font:
    inherit;

  font-weight:
    var(--font-weight-semibold);

  cursor:
    pointer;

  appearance:
    none;

  -webkit-appearance:
    none;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      var(--color-primary) 50%
    ),
    linear-gradient(
      135deg,
      var(--color-primary) 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 20px) 21px,
    calc(100% - 14px) 21px;

  background-size:
    6px 6px,
    6px 6px;

  background-repeat:
    no-repeat;

  transition:
    border-color
      var(--transition-fast),
    box-shadow
      var(--transition-fast),
    background-color
      var(--transition-fast);
}

.hymn-sort__select:hover {
  border-color:
    var(--color-border-primary);

  background-color:
    var(--color-surface-elevated);
}

.hymn-sort__select:focus {
  outline:
    none;

  border-color:
    var(--color-primary);

  box-shadow:
    var(--shadow-primary);
}

.hymn-sort__select:disabled {
  cursor:
    not-allowed;

  opacity:
    0.55;

  background-color:
    var(--color-background-secondary);
}

/* ==========================================================
   Tablet
   ========================================================== */

@media (max-width: 760px) {
  .hymn-library__tools {
    grid-template-columns:
      1fr;
  }

  .hymn-sort {
    align-items:
      stretch;

    flex-direction:
      column;

    gap:
      var(--space-2);
  }

  .hymn-sort__select {
    width:
      100%;
  }
}

/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 640px) {
  .hymn-library,
  .hymn-detail {
    padding-top:
      var(--space-6);
  }

  .hymn-library__grid,
  .hymn-library-grid {
    grid-template-columns:
      1fr;

    gap:
      var(--space-4);
  }

  .hymn-library-card {
    padding:
      var(--space-4);

    border-radius:
      var(--radius-lg);
  }

  .hymn-library-card__body {
    padding-right:
      44px;
  }

  .hymn-library-card__favorite {
    top:
      var(--space-3);

    right:
      var(--space-3);

    width:
      40px;

    height:
      40px;
  }

  .hymn-library-card__actions {
    gap:
      var(--space-2);
  }

  .hymn-library-card__actions a,
  .hymn-library-card__actions button {
    flex:
      1 1 auto;
  }

  .hymn-library__load-more {
    margin-top:
      var(--space-5);
  }

  #hymnLibraryLoadMore {
    width:
      100%;
  }
}

/* ==========================================================
   Small Mobile
   ========================================================== */

@media (max-width: 420px) {
  .hymn-library-card {
    gap:
      var(--space-3);
  }

  .hymn-library-card__icon {
    width:
      42px;

    height:
      42px;

    flex-basis:
      42px;

    font-size:
      1.2rem;
  }

  .hymn-library-card__body {
    padding-right:
      38px;
  }

  .hymn-library-card__favorite {
    width:
      36px;

    height:
      36px;
  }
}

/* ==========================================================
   Reduced Motion
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  .hymn-library-card,
  .hymn-library-card__icon,
  .hymn-library-card__favorite,
  .hymn-library-card__actions a,
  .hymn-library-card__actions button,
  #hymnLibraryLoadMore {
    animation:
      none;

    transition:
      none;
  }

  .hymn-library-card:hover,
  .hymn-library-card:hover
  .hymn-library-card__icon,
  #hymnLibraryLoadMore:hover {
    transform:
      none;
  }
}

/* ==========================================================
   V13.4.33 — Final 3-Column Hymn Card Layout
   ========================================================== */

/*
 * Desktop:
 * - 3 tarjetas por fila.
 * - Contenido vertical para evitar texto comprimido.
 * - Portada completa y centrada.
 *
 * Tablet:
 * - 2 tarjetas por fila.
 *
 * Mobile:
 * - 1 tarjeta por fila.
 */

.hymn-library-card {
  flex-direction:
    column;

  gap:
    var(--space-4);

  min-height:
    100%;
}

.hymn-library-card__cover {
  position:
    relative;

  width:
    100%;

  height:
    auto;

  aspect-ratio:
    16 / 9;

  flex:
    none;

  align-self:
    stretch;

  overflow:
    hidden;

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-lg);

  background:
    var(--color-background-secondary);

  box-shadow:
    var(--shadow-sm);
}

.hymn-library-card__cover img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

  object-position:
    center;

  background:
    var(--color-background-secondary);
}

.hymn-library-card:has(
  .hymn-library-card__cover
)
.hymn-library-card__body {
  width:
    100%;

  flex:
    1 1 auto;

  min-width:
    0;

  padding-right:
    52px;
}

.hymn-library-card__favorite {
  z-index:
    3;
}

.hymn-library-card__actions {
  width:
    100%;
}

.hymn-library-card__actions a,
.hymn-library-card__actions button {
  white-space:
    normal;

  text-align:
    center;
}

/* ==========================================================
   Medium Desktop / Tablet
   ========================================================== */

@media (max-width: 1180px) {
  .hymn-library__grid,
  .hymn-library-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 640px) {
  .hymn-library__grid,
  .hymn-library-grid {
    grid-template-columns:
      1fr;
  }

  .hymn-library-card {
    padding:
      var(--space-4);

    border-radius:
      var(--radius-lg);
  }

  .hymn-library-card__cover {
    width:
      100%;

    max-width:
      100%;

    aspect-ratio:
      16 / 9;

    flex:
      none;
  }

  .hymn-library-card:has(
    .hymn-library-card__cover
  )
  .hymn-library-card__body {
    width:
      100%;

    padding-right:
      44px;
  }
}

/* ==========================================================
   Small Mobile
   ========================================================== */

@media (max-width: 420px) {
  .hymn-library-card__cover {
    border-radius:
      var(--radius-md);
  }

  .hymn-library-card:has(
    .hymn-library-card__cover
  )
  .hymn-library-card__body {
    padding-right:
      38px;
  }
}