/**
 * Cántico de Fe Music
 * Videos Page
 *
 * Visual Design System Integration
 */

/* ==========================================================
   Page
   ========================================================== */

.videos-page {
  color:
    var(--color-text);
}

/* ==========================================================
   Header
   ========================================================== */

.videos-page__header {
  margin-bottom:
    var(--space-8);
}

.videos-page__kicker,
.videos-section__kicker {
  margin:
    0 0
    var(--space-2);

  color:
    var(--color-primary);

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

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

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}

.videos-page__header h1 {
  margin:
    0;

  color:
    var(--color-text);

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

  line-height:
    1;

  letter-spacing:
    -0.03em;
}

.videos-page__description {
  max-width:
    760px;

  margin:
    var(--space-3)
    0
    0;

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

  line-height:
    1.7;
}

/* ==========================================================
   Section Header
   ========================================================== */

.videos-section__header {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    var(--space-4);

  margin-bottom:
    var(--space-4);
}

.videos-section__header h2 {
  margin:
    0;

  color:
    var(--color-text);

  font-size:
    clamp(
      1.8rem,
      4vw,
      2.6rem
    );

  line-height:
    1.1;
}

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

.videos-empty {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    var(--space-5);

  padding:
    var(--space-6);

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

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

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

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

/* ==========================================================
   Empty Icon
   ========================================================== */

.videos-empty__icon {
  display:
    grid;

  place-items:
    center;

  width:
    64px;

  height:
    64px;

  flex:
    0 0 64px;

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

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

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

  color:
    var(--color-primary);

  font-size:
    1.5rem;

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

/* ==========================================================
   Empty Content
   ========================================================== */

.videos-empty__content {
  max-width:
    720px;
}

.videos-empty__content h3 {
  margin:
    0;

  color:
    var(--color-text);

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

  line-height:
    1.3;
}

.videos-empty__content p {
  margin:
    var(--space-3)
    0
    var(--space-5);

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

  line-height:
    1.7;
}

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 640px) {
  .videos-empty {
    flex-direction:
      column;

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

  .videos-empty__icon {
    width:
      56px;

    height:
      56px;

    flex-basis:
      56px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .videos-empty,
  .videos-empty__icon {
    transition:
      none;
  }
}