/*
 * Raptor MMA - Bio Page Styles
 * Biografía y logros de Felipe "Raptor" Grajales
 */

/* === BASE BIO PAGE === */
.bio-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;
}

.bio-page .site-main {
   padding-top: 120px;
   padding-bottom: 80px;
}

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

/* === SPACING UTILITIES === */
.mt-4 {
   margin-top: 40px;
}

/* === BIO HEADER === */
.bio-header-title {
   font-size: clamp(48px, 6vw, 80px);
   line-height: 1.1;
   margin-bottom: 16px;
   letter-spacing: -1px;
   text-align: center;
   color: var(--color-core-white);
   font-family: var(--font-family-display);
   text-transform: uppercase;
   font-weight: 700;
}

.bio-subtitle {
   font-family: var(--font-family-display);
   font-size: 20px;
   letter-spacing: 4px;
   color: var(--color-core-pink);
   text-align: center;
   margin-bottom: 60px;
   text-transform: uppercase;
   font-weight: 700;
}

/* === CONTENT GRID === */
.bio-content-grid {
   display: grid;
   grid-template-columns: 1.2fr 1fr;
   gap: 80px;
   align-items: start;
   margin-top: 60px;
   margin-bottom: 80px;
}

/* === TEXT COLUMN === */
.bio-text-column {
   padding-right: 40px;
}


.bio-section-title {
   font-family: var(--font-family-display);
   font-size: 28px;
   color: var(--color-core-white);
   margin-bottom: 32px;
   letter-spacing: 2px;
   text-transform: uppercase;
   /* removed border-bottom */
}

.bio-history-text {
   font-size: 17px;
   line-height: 1.8;
   color: var(--color-text-muted);
   margin-bottom: 28px;
}

/* === ACHIEVEMENTS LIST === */
.bio-achievements-title {
   font-family: var(--font-family-display);
   font-size: 28px;
   color: var(--color-core-white);
   margin-top: 60px;
   margin-bottom: 32px;
   letter-spacing: 2px;
   text-transform: uppercase;
   /* removed border-bottom */
}

.bio-achievements-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.bio-achievement-item {
   position: relative;
   margin-bottom: 24px;
   padding-left: 24px;
   border-left: 3px solid var(--color-core-pink);
   transition: all 0.3s ease;
}

.bio-achievement-item:hover {
   border-left-color: var(--color-accent-soft);
   transform: translateX(8px);
}

.bio-achievement-item strong {
   display: block;
   font-family: var(--font-family-display);
   font-size: 18px;
   color: var(--color-core-white);
   margin-bottom: 6px;
   letter-spacing: 0.5px;
}

.bio-achievement-item span {
   font-size: 15px;
   color: var(--color-text-muted);
   font-style: italic;
}

/* === IMAGE CARD === */
.bio-image-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: 16px;
   box-shadow: var(--shadow-premium);
   transition: all 0.4s ease;
   transform: rotate(2deg);
   margin-bottom: 40px;
   overflow: hidden;
}

.bio-image-card:hover {
   transform: rotate(0deg) translateY(-8px);
   border-color: var(--color-core-pink);
   box-shadow: 0 20px 60px var(--color-black-overlay-60),
               0 0 40px var(--color-pink-20);
}

.bio-image-card img {
   width: 100%;
   height: auto;
   display: block;
   border-radius: 4px;
   transition: transform 0.4s ease;
}

.bio-image-card:hover img {
   transform: scale(1.05);
}

/* === OFFICIAL PROFILES === */
.bio-profiles-wrapper {
   text-align: center;
   padding: 24px;
   background: var(--color-white-muted-02);
   border-radius: 8px;
   border: 1px solid var(--color-white-muted-05);
}

.bio-profiles-title {
   font-family: var(--font-family-display);
   font-size: 14px;
   letter-spacing: 2px;
   color: var(--color-text-muted);
   margin-bottom: 20px;
   text-transform: uppercase;
}

.bio-profiles-links {
   display: flex;
   gap: 12px;
   justify-content: center;
   flex-wrap: wrap;
}

.bio-profiles-links .btn {
   padding: 12px 24px;
   font-size: 13px;
   letter-spacing: 1px;
}

/* === CHAMPIONSHIPS SECTION === */
.bio-championships-section {
   margin-top: 120px;
   margin-bottom: 100px;
   padding: 80px 0;
   border-top: 1px solid var(--color-white-muted-05);
   border-bottom: 1px solid var(--color-white-muted-05);
}

.bio-championships-title {
   font-size: clamp(40px, 5vw, 64px);
   line-height: 1.1;
   margin-bottom: 60px;
   text-align: center;
   color: var(--color-core-white);
   font-family: var(--font-family-display);
   text-transform: uppercase;
   letter-spacing: -1px;
}

.bio-achievements-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 32px;
   margin-bottom: 60px;
}

.bio-records-cta {
   margin-top: 60px;
   text-align: center;
}

.bio-records-cta .btn {
   padding: 18px 48px;
   font-size: 16px;
}

/* === CONNECT SECTION (Únete al Team) — override de home.css === */
.bio-page .connect-section {
   background: transparent;
}

/* === EXPLORE CAREER SECTION === */
.explore-career-section {
   margin-top: 72px;
   padding-top: 56px;
   padding-bottom: 56px;
}

.career-section-header {
   text-align: center;
   margin-bottom: 36px;
}

.career-section-subtitle {
   color: var(--color-text-muted);
   font-size: 14px;
   line-height: 1.6;
   max-width: 480px;
   margin: 10px auto 0;
}

/* Grid flex: 3 por fila en desktop, 2 en tablet, 1 en móvil.
   Con 5 cards la segunda fila queda centrada automáticamente. */
.career-choices-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
   justify-content: center;
}

.career-choice-card {
   position: relative;
   flex: 0 0 calc(33.333% - 11px);
   background: var(--bg-gradient-card);
   border: 1px solid var(--color-white-muted-05);
   padding: 28px 24px 24px;
   text-align: center;
   text-decoration: none;
   display: flex;
   flex-direction: column;
   align-items: center;
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   overflow: hidden;
   z-index: 1;
}

/* Accent line que desliza desde la izquierda en hover */
.career-choice-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: var(--color-accent);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 0.35s ease;
}

.card-glass-effect {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, var(--color-white-muted-05) 0%, transparent 100%);
   pointer-events: none;
   z-index: -1;
}

.career-category-tag {
   font-family: var(--font-family-display);
   font-size: 9px;
   letter-spacing: 2px;
   color: var(--color-accent);
   opacity: 0.7;
   margin-bottom: 12px;
   display: block;
}

.career-choice-icon {
   margin-bottom: 14px;
   color: var(--color-core-white);
   filter: drop-shadow(0 0 8px var(--color-pink-30));
   transition: transform 0.3s ease;
}

.career-choice-card h3 {
   color: var(--color-core-white);
   font-family: var(--font-family-display);
   font-size: 17px;
   letter-spacing: 2px;
   margin-bottom: 8px;
   text-transform: uppercase;
}

.career-choice-card p {
   color: var(--color-text-muted);
   font-size: 12px;
   line-height: 1.6;
   margin-bottom: 14px;
   flex-grow: 1;
}

.career-choice-card .cta-link {
   color: var(--color-core-pink);
   font-family: var(--font-family-display);
   font-weight: 700;
   font-size: 11px;
   letter-spacing: 1px;
   transition: all 0.3s ease;
   opacity: 0.8;
   display: inline-flex;
   align-items: center;
   gap: 4px;
}

/* Hover Effects */
.career-choice-card:hover {
   transform: translateY(-8px);
   border-color: var(--color-white-muted-20);
   box-shadow: 0 20px 40px var(--color-black-overlay-40), 0 0 24px var(--color-pink-10);
}

.career-choice-card:hover::before {
   transform: scaleX(1);
}

.career-choice-card:hover .career-choice-icon {
   transform: scale(1.15) translateY(-2px);
}

.career-choice-card:hover .career-category-tag {
   opacity: 1;
}

.career-choice-card:hover .cta-link {
   opacity: 1;
   transform: translateX(4px);
}

/* Achievement Card Glow */
.achievement-card {
   transition: all 0.3s ease;
}

.achievement-card:hover {
   transform: translateY(-5px);
   filter: brightness(1.1);
}

/* Adaptive spacing for Bio Content */
.bio-page .grid-2 {
   align-items: center;
}

/* Bio Page Specific Utility Classes (migrated from inline styles) */

.bio-page .container.mt-4 {
   padding-bottom: 80px;
}

.bio-header-title {
   margin-bottom: 10px;
}

.bio-subtitle {
   font-family: var(--font-family-display);
   letter-spacing: 2px;
}

.bio-content-grid {
   margin-top: 60px;
   align-items: start;
   gap: 60px;
}

.bio-text-column {
   padding-right: 20px;
}

.bio-section-title {
   margin-bottom: 20px;
}

.bio-history-text {
   margin-bottom: 24px;
   font-size: 18px;
   line-height: 1.6;
}

.bio-achievements-title {
   margin-top: 50px;
   margin-bottom: 30px;
}

.bio-achievements-list {
   list-style: none;
   padding: 0;
   color: var(--color-text-muted);
}

.bio-achievement-item {
   margin-bottom: 20px;
   border-left: 3px solid var(--color-core-pink);
   padding-left: 20px;
}

.bio-achievement-item strong {
   display: block;
   color: white;
   font-size: 18px;
}

.bio-achievement-item span {
   font-size: 15px;
}

.bio-image-card {
   padding: 10px;
   transform: rotate(2deg);
   margin-bottom: 40px;
}

.bio-image-card img {
   width: 100%;
   height: auto;
   display: block;
}

.bio-profiles-wrapper {
   text-align: center;
}

.bio-profiles-title {
   margin-bottom: 20px;
   opacity: 0.8;
}

.bio-profiles-links {
   display: flex;
   gap: 10px;
   justify-content: center;
   flex-wrap: wrap;
}

.bio-profiles-links .btn {
   padding: 10px 20px;
   font-size: 14px;
}

.bio-championships-section {
   margin-top: 100px;
   margin-bottom: 80px;
}

.bio-championships-title {
   margin-bottom: 50px;
}

.bio-achievements-grid {
   gap: 24px;
}

.bio-records-cta {
   margin-top: 50px;
}

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

/* Tablet Landscape (900px - 1024px) */
@media (max-width: 1024px) {
   .bio-content-grid {
      grid-template-columns: 1fr;
      gap: 60px;
   }

   .bio-text-column {
      padding-right: 0;
   }

   .bio-image-card {
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
   }

   .explore-career-section {
      margin-top: 60px;
      padding-top: 60px;
   }

   /* Tablet: 2 columnas */
   .career-choice-card {
      flex: 0 0 calc(50% - 12px);
   }
}

/* Tablet Portrait (768px - 900px) */
@media (max-width: 767px) {
   .bio-page .site-main {
      padding-top: 100px;
   }

   .bio-header-title {
      font-size: 48px;
   }

   .bio-subtitle {
      font-size: 16px;
      letter-spacing: 3px;
   }

   .bio-content-grid {
      gap: 50px;
   }

   .bio-section-title,
   .bio-achievements-title {
      font-size: 24px;
   }

   .bio-history-text {
      font-size: 16px;
   }

   .bio-championships-section {
      margin-top: 80px;
      padding: 60px 0;
   }

   .bio-championships-title {
      font-size: 40px;
      margin-bottom: 40px;
   }

   .bio-achievements-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
   }

   /* Mobile: 1 columna */
   .career-choice-card {
      flex: 0 0 100%;
      padding: 40px 30px;
   }
}

/* Mobile (< 640px) */
@media (max-width: 640px) {
   .bio-page .container {
      padding: 0 20px;
   }

   .bio-page .site-main {
      padding-top: 80px;
      padding-bottom: 60px;
   }

   .bio-header-title {
      font-size: 36px;
      margin-bottom: 12px;
   }

   .bio-subtitle {
      font-size: 14px;
      letter-spacing: 2px;
      margin-bottom: 40px;
   }

   .bio-content-grid {
      margin-top: 40px;
      gap: 40px;
   }

   .bio-section-title,
   .bio-achievements-title {
      font-size: 20px;
      letter-spacing: 1px;
   }

   .bio-history-text {
      font-size: 15px;
      line-height: 1.7;
      margin-bottom: 24px;
   }

   .bio-achievement-item {
      padding-left: 16px;
   }

   .bio-achievement-item strong {
      font-size: 16px;
   }

   .bio-achievement-item span {
      font-size: 14px;
   }

   .bio-image-card {
      transform: rotate(0deg);
      padding: 12px;
   }

   .bio-profiles-wrapper {
      padding: 20px;
   }

   .bio-profiles-links {
      flex-direction: column;
   }

   .bio-profiles-links .btn {
      width: 100%;
   }

   .bio-championships-section {
      margin-top: 60px;
      margin-bottom: 60px;
      padding: 40px 0;
   }

   .bio-championships-title {
      font-size: 32px;
      margin-bottom: 32px;
   }

   .bio-achievements-grid {
      grid-template-columns: 1fr;
      gap: 20px;
   }

   .bio-records-cta {
      margin-top: 40px;
   }

   .bio-records-cta .btn {
      width: 100%;
      padding: 16px 32px;
   }

   .explore-career-section {
      margin-top: 40px;
      padding-top: 40px;
      padding-bottom: 40px;
   }

   .career-choice-card {
      padding: 32px 24px;
   }

   .career-choice-icon {
      font-size: 40px;
      margin-bottom: 20px;
   }

   .career-choice-card h3 {
      font-size: 20px;
      margin-bottom: 12px;
   }

   .career-choice-card p {
      font-size: 14px;
      margin-bottom: 16px;
   }
}

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

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

   .bio-section-title,
   .bio-achievements-title {
      font-size: 18px;
   }

   .bio-championships-title {
      font-size: 28px;
   }
}