/* ==========================================================================
   LATAM Fight Pass - Luchador Single CSS
   Perfil individual de fighter
   ========================================================================== */

.lfs-page {
  background-color: var(--color-black);
}

.lfs-page .header {
  background-color: var(--color-black-alpha-95);
}

/* ==========================================================================
   HERO
   ========================================================================== */

.lfs-hero {
  --lfp-fighter-hero-bg: none;
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--color-black);
}

/* Dark cage background */
.lfs-hero__bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.72), rgba(10, 10, 10, 0.72)),
    var(--lfp-fighter-hero-bg),
    repeating-linear-gradient(
      60deg,
      transparent,
      transparent 28px,
      rgba(255, 255, 255, 0.02) 28px,
      rgba(255, 255, 255, 0.02) 29px
    ),
    repeating-linear-gradient(
      -60deg,
      transparent,
      transparent 28px,
      rgba(255, 255, 255, 0.02) 28px,
      rgba(255, 255, 255, 0.02) 29px
    );
  background-size: cover, cover, auto, auto;
  background-position: center, center, center, center;
}

/* Fighter photo — right-aligned large */
.lfs-hero__photo-wrap {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 55%;
  max-width: 620px;
  height: 100%;
  pointer-events: none;
}

.lfs-hero__photo {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.lfs-hero__photo-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--color-black) 0%, transparent 40%),
    linear-gradient(to top, var(--color-black) 0%, transparent 30%);
}

/* Content overlay */
.lfs-hero__content {
  position: relative;
  z-index: 1;
  padding-top: calc(var(--header-height) + var(--space-4xl));
  padding-bottom: var(--space-3xl);
}

/* Breadcrumb */
.lfs-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
  font-size: var(--fs-xs);
}

.lfs-breadcrumb__link {
  color: var(--color-gray-light);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.lfs-breadcrumb__link:hover {
  color: var(--color-white);
}

.lfs-breadcrumb__sep {
  color: var(--color-gray-medium);
}

.lfs-breadcrumb__current {
  color: var(--color-white);
}

/* Identity */
.lfs-hero__identity {
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-2xl);
}

.lfs-hero__flag-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.lfs-hero__flag {
  width: 28px;
  height: 20px;
  object-fit: cover;
  border-radius: 2px;
}

.lfs-hero__country {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-gray-light);
}

.lfs-hero__nickname {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-style: italic;
  color: var(--color-gold);
  font-weight: var(--fw-medium);
}

.lfs-hero__name {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 8vw, 5.5rem);
  color: var(--color-white);
  text-transform: uppercase;
  line-height: 0.95;
}

.lfs-hero__division {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-red);
  margin-top: var(--space-xs);
}

.lfs-hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--color-gray-light);
  letter-spacing: 0.02em;
  margin-top: var(--space-xs);
}

/* Record bar */
.lfs-hero__record {
  display: flex;
  align-items: stretch;
  gap: 0;
  background-color: rgba(26, 26, 26, 0.85);
  border: 1px solid var(--color-gray-dark-2);
  border-left: 4px solid var(--color-red);
  border-radius: var(--radius-md);
  overflow: hidden;
  max-width: 440px;
  backdrop-filter: blur(4px);
}

.lfs-hero__record-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  flex: 1;
}

.lfs-hero__record-divider {
  width: 1px;
  background-color: var(--color-gray-dark-2);
  margin: var(--space-sm) 0;
}

.lfs-hero__record-num {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--color-white);
  line-height: 1;
}

.lfs-hero__record-num--win {
  color: var(--color-red);
}

.lfs-hero__record-num--gold {
  color: var(--color-gold);
}

.lfs-hero__record-label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--color-gray-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

/* Mobile: reduce hero height */
@media (max-width: 767px) {
  .lfs-hero {
    min-height: 100dvh;
  }

  .lfs-hero__photo-wrap {
    width: 100%;
    opacity: 0.35;
  }
}

/* ==========================================================================
   PROFILE BODY
   ========================================================================== */

.lfs-body {
  background-color: var(--color-gray-dark-1);
  border-top: 1px solid var(--color-gray-dark-2);
  padding: var(--space-3xl) 0;
}

.lfs-layout {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 1024px) {
  .lfs-layout {
    grid-template-columns: 300px 1fr;
    gap: var(--space-2xl);
    align-items: flex-start;
  }
}

/* Sidebar sticky on desktop */
@media (min-width: 1024px) {
  .lfs-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-xl));
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }
}

/* ==========================================================================
   CARD (componente base para sidebar y main)
   ========================================================================== */

.lfs-card {
  background-color: var(--color-black);
  border: 1px solid var(--color-gray-dark-2);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.lfs-card:last-child {
  margin-bottom: 0;
}

.lfs-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-red);
  display: inline-block;
}

/* Dark card variant */
.lfs-card--dark {
  background-color: var(--color-gray-dark-1);
  border-left: 3px solid var(--color-red);
}

.lfs-card__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-red);
  margin-bottom: var(--space-xs);
}

.lfs-card__event-name {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--color-white);
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.lfs-card__event-meta {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--color-gray-light);
  margin-bottom: var(--space-sm);
}

.lfs-card__event-vs {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--color-gray-light);
}

.lfs-card__event-vs strong {
  color: var(--color-white);
}

/* ==========================================================================
   STAT LIST
   ========================================================================== */

.lfs-stat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.lfs-stat-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-gray-dark-2);
}

.lfs-stat-list__item:last-child {
  border-bottom: none;
}

.lfs-stat-list__label {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--color-gray-light);
}

.lfs-stat-list__value {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-white);
}

/* ==========================================================================
   WIN METHODS
   ========================================================================== */

.lfs-methods {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.lfs-methods__item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: var(--space-xs) var(--space-md);
  align-items: center;
}

.lfs-methods__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lfs-methods__label {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--color-white);
}

.lfs-methods__count {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  color: var(--color-gray-light);
}

.lfs-methods__bar-track {
  height: 4px;
  background-color: var(--color-gray-dark-2);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.lfs-methods__bar {
  height: 100%;
  background-color: var(--color-red);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

.lfs-methods__bar--sub {
  background-color: var(--color-gold);
}

.lfs-methods__bar--dec {
  background-color: var(--color-gray-light);
}

.lfs-methods__pct {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--color-gray-light);
  grid-row: 2;
  grid-column: 2;
  text-align: right;
}

/* ==========================================================================
   BIO
   ========================================================================== */

.lfs-bio {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.lfs-bio p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-gray-light);
  line-height: 1.75;
}

.lfs-bio strong {
  color: var(--color-white);
}

/* ==========================================================================
   FIGHT HISTORY
   ========================================================================== */

.lfs-history {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.lfs-fight {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-gray-dark-2);
}

.lfs-fight:last-of-type {
  border-bottom: none;
}

.lfs-fight__result {
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  text-align: center;
  white-space: nowrap;
}

.lfs-fight__result--win {
  background-color: var(--color-success-alpha-15);
  color: var(--color-success);
  border: 1px solid var(--color-success-alpha-30);
}

.lfs-fight__result--loss {
  background-color: var(--color-red-alpha-10);
  color: var(--color-red);
  border: 1px solid rgba(227, 30, 36, 0.3);
}

.lfs-fight__result--draw {
  background-color: rgba(136, 136, 136, 0.1);
  color: var(--color-gray-light);
  border: 1px solid rgba(136, 136, 136, 0.3);
}

.lfs-fight__result--upcoming {
  background-color: rgba(255, 215, 0, 0.12);
  color: var(--color-gold);
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.lfs-fight__opponent {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  margin-bottom: 2px;
}

.lfs-fight__detail {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--color-gray-light);
}

.lfs-fight__method {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.lfs-fight__finish {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-white);
}

.lfs-fight__round {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--color-gray-light);
}

.lfs-fight__event {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--color-gray-light);
  font-style: italic;
}

.lfs-history__more {
  padding: var(--space-md) 0;
  text-align: center;
}

.lfs-history__more-text {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--color-gray-medium);
  font-style: italic;
}

/* Divider between amateur and pro sections */
.lfs-history__divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0 var(--space-sm);
  margin-top: var(--space-sm);
}

.lfs-history__divider::before,
.lfs-history__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--color-gray-dark-2);
}

.lfs-history__divider-label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-gray-medium);
  white-space: nowrap;
}

/* Mobile: simplify fight grid */
@media (max-width: 500px) {
  .lfs-fight {
    grid-template-columns: 72px 1fr;
    grid-template-rows: auto auto;
  }

  .lfs-fight__method {
    grid-column: 2;
    text-align: left;
    align-items: flex-start;
    flex-direction: row;
    gap: var(--space-sm);
  }
}

/* ==========================================================================
   SECTION HEADER
   ========================================================================== */

.lfs-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.lfs-section-header__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  color: var(--color-white);
  text-transform: uppercase;
  white-space: nowrap;
}

.lfs-section-header__line {
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, var(--color-red), transparent);
}

/* ==========================================================================
   UTILIDADES LOCALES
   ========================================================================== */

/* Botón de ancho completo (sidebar CTA) */
.btn--full {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: var(--space-md);
}