/* ══════════════════════════════════════════════════════════
   CONTACT PAGE — extends sports-page.css with cp-* additions
   ══════════════════════════════════════════════════════════ */

.cp-hero .sp-hero__glow--teal   { opacity: 0.5; width: 500px; height: 500px; }
.cp-hero .sp-hero__glow--violet { opacity: 0.4; }
.cp-hero .sp-hero__glow--gold   { opacity: 0.25; }

/* ══════════════════════════════════════════════════════════
   CHANNEL CARDS
   ══════════════════════════════════════════════════════════ */
.cp-channels__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) { .cp-channels__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .cp-channels__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 440px)  { .cp-channels__grid { grid-template-columns: 1fr; } }

.cp-channel {
  --c: #F5C518;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 22px 22px;
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 18px;
  text-decoration: none;
  color: var(--sp-text);
  overflow: hidden;
  isolation: isolate;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .2s ease, box-shadow .3s ease;
}
.cp-channel::before {
  content: '';
  position: absolute;
  top: -40%; right: -30%;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c), transparent 65%);
  opacity: 0.18;
  transition: opacity .3s ease;
  z-index: -1;
}
.cp-channel::after {
  content: '';
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  opacity: 0;
  transition: opacity .3s ease;
}
.cp-channel:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 22px 46px rgba(0,0,0,0.4);
}
.cp-channel:hover::before { opacity: 0.32; }
.cp-channel:hover::after  { opacity: 0.8; }

.cp-channel__tag {
  position: absolute;
  top: 14px; right: 14px;
  padding: 3px 9px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  border-radius: 999px;
  font-family: var(--font-display, sans-serif);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--c);
  text-transform: uppercase;
  z-index: 1;
}
@supports not (border-color: color-mix(in srgb, red, blue)) {
  .cp-channel__tag { border-color: rgba(245,197,24,0.45); }
}

.cp-channel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--c) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  font-size: 1.5rem;
  margin-bottom: 10px;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 22%, transparent);
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .cp-channel__icon { background: rgba(245,197,24,0.15); border-color: rgba(245,197,24,0.35); box-shadow: 0 6px 16px rgba(245,197,24,0.2); }
}

.cp-channel__name {
  font-family: var(--font-display, sans-serif);
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.cp-channel__desc { font-size: 0.82rem; color: var(--sp-muted); margin: 0; line-height: 1.5; }
.cp-channel__detail {
  font-family: var(--font-display, sans-serif);
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  margin: 6px 0 14px;
  letter-spacing: -0.01em;
  word-break: break-word;
}
.cp-channel__cta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--sp-border);
  color: var(--c);
  font-family: var(--font-display, sans-serif);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: gap .2s ease;
  display: inline-flex;
  gap: 4px;
}
.cp-channel:hover .cp-channel__cta { gap: 8px; }

@media (max-width: 600px) {
  .cp-channel { text-align: center; align-items: center; padding: 24px 18px 20px; }
  .cp-channel__icon { margin-left: auto; margin-right: auto; }
  .cp-channel__cta { justify-content: center; width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   INFO + SOCIAL GRID
   ══════════════════════════════════════════════════════════ */
.cp-info-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(108,99,255,0.06), transparent 60%),
    var(--sp-bg);
}
.cp-info__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 880px) { .cp-info__grid { grid-template-columns: 1fr; } }

.cp-info-card {
  padding: 32px 28px;
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}
.cp-info-card::before {
  content: '';
  position: absolute;
  top: -30%; right: -20%;
  width: 320px; height: 320px;
  border-radius: 50%;
  opacity: 0.12;
  filter: blur(20px);
  z-index: -1;
  pointer-events: none;
}
.cp-info-card--primary::before  { background: radial-gradient(circle, var(--sp-violet), transparent 65%); }
.cp-info-card--socials::before  { background: radial-gradient(circle, var(--sp-teal),   transparent 65%); }

.cp-info-card h3 {
  font-family: var(--font-display, sans-serif);
  font-size: clamp(1.4rem, 2.3vw, 1.8rem);
  font-weight: 900;
  color: #fff;
  margin: 14px 0 10px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.cp-info-card h3 span {
  background: linear-gradient(135deg, var(--sp-gold), var(--sp-gold-warm));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cp-info-card > p {
  color: var(--sp-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0 0 22px;
}
.cp-info-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cp-info-card__list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--sp-border);
  font-size: 0.88rem;
}
.cp-info-card__list li:last-child { border-bottom: none; padding-bottom: 0; }
.cp-info-card__list li span { color: var(--sp-muted); }
.cp-info-card__list li strong { color: #fff; font-weight: 700; }

.cp-socials {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.cp-social {
  --c: #F5C518;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--sp-border);
  border-radius: 14px;
  text-decoration: none;
  color: var(--sp-text);
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.cp-social:hover {
  background: rgba(255,255,255,0.04);
  border-color: color-mix(in srgb, var(--c) 45%, transparent);
  transform: translateY(-1px);
}
@supports not (border-color: color-mix(in srgb, red, blue)) {
  .cp-social:hover { border-color: rgba(245,197,24,0.45); }
}

.cp-social__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--c) 15%, transparent);
  color: var(--c);
  flex-shrink: 0;
}
.cp-social__icon svg { width: 20px; height: 20px; }
@supports not (background: color-mix(in srgb, red, blue)) {
  .cp-social__icon { background: rgba(245,197,24,0.15); }
}

.cp-social__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cp-social__name {
  font-family: var(--font-display, sans-serif);
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.cp-social__handle {
  font-size: 0.76rem;
  color: var(--sp-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-social__arrow {
  color: var(--sp-muted);
  transition: color .2s ease, transform .2s ease;
}
.cp-social:hover .cp-social__arrow {
  color: var(--c);
  transform: translateX(3px);
}