/*
 * Raptor MMA - Records Page Styles
 * Historial completo de peleas profesionales y amateur
 */

/* === BASE RECORDS PAGE === */
.records-page {
   background: var(--color-core-black);
   background-image: var(--bg-gradient-body);
   background-attachment: fixed;
   color: var(--color-text);
   font-family: var(--font-family-body);
   position: relative;
   overflow-x: hidden;
   min-height: 100vh;
}

.records-page .container {
   max-width: 1280px;
   margin: 0 auto;
   padding: 0 32px;
}

/* === RECORDS SPACING === */
.records-content .py-6 {
   padding-top: 80px;
   padding-bottom: 80px;
}

.records-section.mt-6 {
   margin-top: 80px;
}

/* === HERO RECORDS === */
.hero-records {
   background-color: var(--color-core-black);
   background-size: cover;
   background-position: center top;
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   border-bottom: 2px solid var(--color-core-pink);
   padding: 140px 0 100px;
   position: relative;
   z-index: 1;
}

/* Resetear padding del main para el hero full-screen */
.records-page .site-main {
   padding-top: 0;
}

.hero-records .container {
   position: relative;
   z-index: 2;
   max-width: 900px;
}

.hero-records h1 {
   font-family: var(--font-family-display);
   font-size: clamp(48px, 6vw, 72px);
   line-height: 1.1;
   margin-bottom: 24px;
   color: var(--color-core-white);
   letter-spacing: 4px;
   text-align: center;
   text-transform: uppercase;
   font-weight: 700;
}

.animate-impact {
   animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(30px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.hero-subtitle {
   font-family: var(--font-family-display);
   font-size: 16px;
   letter-spacing: 3px;
   color: var(--color-text-muted);
   text-align: center;
   margin-bottom: 48px;
   text-transform: uppercase;
}

.record-hero-total {
   font-family: var(--font-family-display);
   font-size: clamp(56px, 10vw, 110px);
   font-weight: 700;
   letter-spacing: 2px;
   margin: 12px 0 6px;
   text-align: center;
}

.record-hero-label {
   font-size: 14px;
   letter-spacing: 2px;
   color: var(--color-core-white);
   opacity: 0.9;
   text-transform: uppercase;
   margin-bottom: 18px;
   text-align: center;
}

.record-hero-split {
   font-family: var(--font-family-display);
   font-size: 18px;
   letter-spacing: 1px;
   color: var(--color-grey-500);
   margin-bottom: 32px;
   text-align: center;
}

.record-hero-split strong {
   color: var(--color-core-white);
   font-weight: 700;
}

.record-hero-actions {
   display: flex;
   gap: 20px;
   justify-content: center;
   flex-wrap: wrap;
}

/* === RECORD SUMMARY BANNER === */
.record-summary-banner {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 48px;
   background: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(10px);
   border: 1px solid var(--color-white-muted-10);
   border-radius: 8px;
   padding: 40px 60px;
   margin-top: 40px;
}

.summary-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
}

.summary-item .label {
   font-family: var(--font-family-display);
   font-size: 12px;
   letter-spacing: 2px;
   color: var(--color-text-muted);
   text-transform: uppercase;
}

.summary-item .value {
   font-family: var(--font-family-display);
   font-size: 48px;
   font-weight: 900;
   line-height: 1;
   letter-spacing: 2px;
}

.summary-item .value.win {
   color: var(--color-core-pink);
   text-shadow: 0 0 20px var(--color-pink-40);
}

.summary-item .value.generic {
   color: var(--color-core-white);
}

.separator-vertical {
   width: 1px;
   height: 60px;
   background: var(--color-white-muted-20);
}

/* === MAIN CONTENT === */
.records-content {
   padding-top: 80px;
   padding-bottom: 80px;
}

/* === RECORDS SECTION === */
.records-section {
   margin-bottom: 80px;
}

.section-title {
   font-family: var(--font-family-display);
   font-size: 36px;
   color: var(--color-core-white);
   margin-bottom: 32px;
   letter-spacing: 2px;
   text-transform: uppercase;
   border-bottom: 2px solid var(--color-core-pink);
   padding-bottom: 16px;
}

.section-title.text-muted {
   color: var(--color-text-muted);
   border-bottom-color: var(--color-white-muted-20);
}

/* === TABLE STYLES === */
.table-responsive {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: thin;
   scrollbar-color: var(--color-core-pink) var(--color-grey-900);
   position: relative;
   border-radius: var(--border-radius-card);
}

/* Custom scrollbar for webkit browsers */
.table-responsive::-webkit-scrollbar {
   height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
   background: var(--color-grey-900);
   border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
   background: var(--color-core-pink);
   border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
   background: var(--color-pink-60);
}

.records-section .card {
   background: var(--bg-gradient-card);
   border: 1px solid var(--color-border-subtle);
   border-top: 1px solid var(--color-border-highlight);
   border-radius: var(--border-radius-card);
   padding: 0;
   box-shadow: var(--shadow-premium);
}

.records-section .card.glass {
   background: rgba(255, 255, 255, 0.02);
   backdrop-filter: blur(10px);
}

table {
   width: 100%;
   border-collapse: collapse;
   min-width: 800px;
}

thead {
   background: var(--color-grey-900);
}

th {
   font-family: var(--font-family-display);
   font-size: 13px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   color: var(--color-grey-500);
   text-align: left;
   padding: 20px 24px;
   border-bottom: 1px solid var(--color-white-muted-10);
}

td {
   padding: 20px 24px;
   color: var(--color-grey-300);
   font-size: 15px;
   border-bottom: 1px solid var(--color-white-muted-05);
}

tbody tr {
   transition: background-color 0.3s ease;
}

tbody tr:hover {
   background: var(--color-white-muted-03);
}

tbody tr:last-child td {
   border-bottom: none;
}

.font-bold {
   font-weight: 700;
   color: var(--color-core-white);
}

/* === BADGE STYLES === */
.badge {
   display: inline-block;
   padding: 6px 12px;
   border-radius: 4px;
   font-family: var(--font-family-display);
   font-size: 11px;
   font-weight: 900;
   letter-spacing: 1px;
   text-transform: uppercase;
}

.badge.win {
   background: rgba(57, 255, 20, 0.15);
   color: var(--color-status-success-neon);
   border: 1px solid rgba(57, 255, 20, 0.3);
   text-shadow: 0 0 10px rgba(57, 255, 20, 0.5);
}

.badge.loss {
   background: rgba(255, 59, 48, 0.15);
   color: var(--color-status-error-bright);
   border: 1px solid rgba(255, 59, 48, 0.3);
}

.badge.draw {
   background: rgba(255, 204, 0, 0.15);
   color: var(--color-status-warning);
   border: 1px solid rgba(255, 204, 0, 0.3);
}

/* === RESPONSIVE DESIGN === */

/* Tablet Landscape (900px - 1024px) */
@media (max-width: 1024px) {
   .record-summary-banner {
      gap: 32px;
      padding: 32px 40px;
   }

   .summary-item .value {
      font-size: 40px;
   }
}

/* Tablet Portrait (768px - 900px) */
@media (max-width: 767px) {
   .records-page .container {
      padding: 0 20px;
   }

   .hero-records {
      min-height: 85vh;
   }

   .hero-records {
      padding: 100px 0 80px;
   }

   .hero-records h1 {
      font-size: 48px;
      letter-spacing: 2px;
   }

   .hero-subtitle {
      font-size: 14px;
      letter-spacing: 2px;
   }

   .record-summary-banner {
      flex-direction: column;
      gap: 32px;
      padding: 32px 24px;
   }

   .separator-vertical {
      width: 60px;
      height: 1px;
   }

   .summary-item .value {
      font-size: 36px;
   }

   .records-content {
      padding-top: 60px;
      padding-bottom: 60px;
   }

   .section-title {
      font-size: 28px;
   }
}

/* Mobile (< 640px) */
@media (max-width: 640px) {
   .py-6 {
      padding-top: 60px;
      padding-bottom: 60px;
   }

   .mt-6 {
      margin-top: 60px;
   }

   .hero-records {
      min-height: 80vh;
      padding: 80px 0 60px;
   }

   .hero-records h1 {
      font-size: 36px;
      letter-spacing: 1px;
   }

   .hero-subtitle {
      font-size: 12px;
   }

   .record-summary-banner {
      padding: 24px 20px;
   }

   .summary-item .label {
      font-size: 11px;
   }

   .summary-item .value {
      font-size: 32px;
   }

   .section-title {
      font-size: 24px;
      letter-spacing: 1px;
   }

   .records-section {
      margin-bottom: 60px;
   }

   /* Table scroll hint */
   .table-responsive::before {
      content: '← Desliza para ver más →';
      display: block;
      text-align: center;
      padding: 10px 16px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.5px;
      color: var(--color-core-pink);
      background: linear-gradient(90deg,
         transparent 0%,
         rgba(255, 79, 154, 0.1) 50%,
         transparent 100%);
      border-bottom: 1px solid var(--color-white-muted-10);
      animation: pulseHint 2s ease-in-out infinite;
   }

   @keyframes pulseHint {
      0%, 100% { opacity: 0.7; }
      50% { opacity: 1; }
   }

   /* Better touch scrolling on mobile */
   .table-responsive {
      scroll-behavior: smooth;
      scroll-snap-type: x proximity;
   }

   .table-responsive table {
      min-width: 700px;
   }

   th,
   td {
      padding: 16px;
      font-size: 14px;
   }

   th {
      font-size: 11px;
   }

   .badge {
      padding: 4px 8px;
      font-size: 10px;
   }

   .record-hero-total {
      font-size: clamp(44px, 16vw, 80px);
   }

   .record-hero-split {
      font-size: 16px;
   }

   .record-hero-actions {
      gap: 12px;
   }
}

/* Extra Small Mobile (< 375px) */
@media (max-width: 374px) {
   .hero-records h1 {
      font-size: 28px;
   }

   .summary-item .value {
      font-size: 28px;
   }

   .section-title {
      font-size: 20px;
   }
}