/**
 * Cántico de Fe Music
 * Contact Page
 *
 * V10.9.6 — Compact Contact Cards + Channel Button
 */

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

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

/* ==========================================================
   Hero
   ========================================================== */

.contact-page__hero {
  margin-bottom:
    var(--space-8);
}

.contact-page__eyebrow {
  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;
}

.contact-page__title {
  margin:
    0;

  color:
    var(--color-text);

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

  line-height:
    1;

  letter-spacing:
    -0.03em;
}

.contact-page__intro {
  max-width:
    760px;

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

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

  line-height:
    1.7;
}

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

.contact-page__section {
  margin-top:
    var(--space-7);
}

.contact-page__section-header {
  margin-bottom:
    var(--space-4);
}

.contact-page__section-title {
  margin:
    0;

  color:
    var(--color-text);

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

  line-height:
    1.1;
}

/* ==========================================================
   Grid
   ========================================================== */

.contact-page__grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(280px, 1fr)
    );

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

/* ==========================================================
   Cards
   ========================================================== */

.contact-page__card {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    var(--space-4);

  min-height:
    220px;

  padding:
    var(--space-5);

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

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

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

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

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

.contact-page__card:hover {
  transform:
    translateY(-4px);

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

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

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

.contact-page__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.25rem;

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

/* ==========================================================
   Card Content
   ========================================================== */

.contact-page__card-content {
  display:
    flex;

  flex:
    1;

  flex-direction:
    column;

  min-width:
    0;
}

.contact-page__badge {
  align-self:
    flex-start;

  display:
    inline-flex;

  align-items:
    center;

  min-height:
    30px;

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

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

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

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

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

  color:
    var(--color-primary);

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

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

.contact-page__card h3 {
  margin:
    0;

  color:
    var(--color-text);

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

  line-height:
    1.25;
}

.contact-page__card p {
  margin:
    var(--space-3)
    0
    0;

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

  line-height:
    1.7;
}

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

.contact-page__card-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    var(--space-2);

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

.contact-page__button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    42px;

  padding:
    10px
    18px;

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

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

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

  color:
    var(--color-primary);

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

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

  line-height:
    1;

  text-decoration:
    none;

  cursor:
    pointer;

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

.contact-page__button::before {
  content:
    "▶";

  display:
    inline-flex;

  margin-right:
    8px;

  font-size:
    0.82rem;
}

.contact-page__button:hover {
  transform:
    translateY(-2px);

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

  background:
    var(--color-primary);

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

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

.contact-page__button:focus-visible {
  outline:
    2px solid
    var(--color-primary);

  outline-offset:
    3px;
}

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

@media (max-width: 700px) {
  .contact-page__grid {
    grid-template-columns:
      1fr;
  }

  .contact-page__card {
    min-height:
      auto;
  }
}

/* ==========================================================
   Compact Mobile Contact Cards
   ========================================================== */

@media (max-width: 520px) {
  .contact-page__hero {
    margin-bottom:
      var(--space-6);
  }

  .contact-page__section {
    margin-top:
      var(--space-6);
  }

  .contact-page__section-header {
    margin-bottom:
      var(--space-3);
  }

  .contact-page__grid {
    gap:
      var(--space-3);
  }

  .contact-page__card {
    flex-direction:
      column;

    gap:
      12px;

    padding:
      16px;

    border-radius:
      18px;
  }

  .contact-page__icon {
    width:
      42px;

    height:
      42px;

    flex-basis:
      42px;

    border-radius:
      12px;

    font-size:
      1.05rem;
  }

  .contact-page__badge {
    min-height:
      27px;

    margin-bottom:
      10px;

    padding:
      0
      10px;

    font-size:
      0.7rem;
  }

  .contact-page__card h3 {
    font-size:
      1.15rem;
  }

  .contact-page__card p {
    margin-top:
      8px;

    font-size:
      0.9rem;

    line-height:
      1.55;
  }

  .contact-page__card-actions {
    margin-top:
      14px;
  }

  .contact-page__button {
    min-height:
      38px;

    padding:
      9px
      14px;

    font-size:
      0.82rem;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .contact-page__card,
  .contact-page__button {
    transition:
      none;
  }

  .contact-page__card:hover,
  .contact-page__button:hover {
    transform:
      none;
  }
}

/* ==========================================================
   V10.9.9 — Contact Channels UI
   ========================================================== */

.contact-channels-section {
  margin-top:
    var(--space-8);
}

.contact-channels-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(240px, 1fr)
    );

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

.contact-channel {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    var(--space-4);

  min-height:
    180px;

  padding:
    var(--space-5);

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

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

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

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

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

.contact-channel.is-active:hover {
  transform:
    translateY(-4px);

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

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

.contact-channel.is-coming-soon {
  opacity:
    0.72;
}

.contact-channel__icon {
  display:
    grid;

  place-items:
    center;

  width:
    46px;

  height:
    46px;

  flex:
    0 0 46px;

  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.1rem;

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

.contact-channel__content {
  display:
    flex;

  flex:
    1;

  flex-direction:
    column;

  min-width:
    0;
}

.contact-channel__content h3 {
  margin:
    0;

  color:
    var(--color-text);

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

.contact-channel__content p {
  margin:
    var(--space-2)
    0
    0;

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

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

  line-height:
    1.6;
}

.contact-channel__action,
.contact-channel__status {
  align-self:
    flex-start;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    36px;

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

  padding:
    8px
    14px;

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

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

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

.contact-channel__action {
  border:
    1px solid
    var(--color-border-primary);

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

  color:
    var(--color-primary);

  text-decoration:
    none;

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

.contact-channel__action:hover {
  transform:
    translateY(-2px);

  background:
    var(--color-primary);

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

.contact-channel__status {
  border:
    1px solid
    var(--color-border);

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

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

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

@media (max-width: 520px) {
  .contact-channels-section {
    margin-top:
      var(--space-6);
  }

  .contact-channels-grid {
    grid-template-columns:
      1fr;

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

  .contact-channel {
    min-height:
      auto;

    gap:
      12px;

    padding:
      14px;

    border-radius:
      18px;
  }

  .contact-channel__icon {
    width:
      40px;

    height:
      40px;

    flex-basis:
      40px;

    border-radius:
      11px;

    font-size:
      0.95rem;
  }

  .contact-channel__content h3 {
    font-size:
      1rem;
  }

  .contact-channel__content p {
    font-size:
      0.84rem;

    line-height:
      1.5;
  }

  .contact-channel__action,
  .contact-channel__status {
    min-height:
      32px;

    margin-top:
      10px;

    padding:
      7px
      12px;

    font-size:
      0.72rem;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .contact-channel,
  .contact-channel__action {
    transition:
      none;
  }

  .contact-channel.is-active:hover,
  .contact-channel__action:hover {
    transform:
      none;
  }
}