/* ============================================================
   06-HOME.CSS — Hero Section, Calendario
   dimonix.gg · v4
   ============================================================ */

/* ── 1. HERO SECTION ── */
.hero-section {
    position: relative;
    width: 100%;
    flex: 1;
    margin-top: var(--header-height);
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: url('../../img/fondo.webp') center/cover no-repeat;
    z-index: 1;
}

/* ── 2. HERO SPLIT CONTAINER ── */
.hero-split-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: min(98vw, 2600px);
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: clamp(16px, 2.5vw, 60px);
    padding-left:  clamp(30px, 5vw, 90px);
    padding-right: clamp(12px, 1.5vw, 30px);
    padding-top:    clamp(20px, 3vh, 50px);
    padding-bottom: clamp(20px, 3vh, 50px);
}

/* ── 3. COLUMNA IZQUIERDA — centrada verticalmente ── */
.hero-split-left {
    flex: 1;
    max-width: 600px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.hero-title {
    font-size: clamp(2.8rem, 7vw, 7rem);
    line-height: 0.95;
    margin-bottom: 20px;
    color: #fff;
    text-shadow: 0 0 50px rgba(46, 15, 215, 0.3);
    letter-spacing: -14px;
}

.hero-title span {
    display: inline-block;
    opacity: 0;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
.anim-text-top   { animation: slideInDown 0.8s forwards 0.2s; color: #fff !important; }
.anim-text-left  { animation: slideInLeft  0.8s forwards 0.4s; margin-left: 15px; color: #fff !important; }
.anim-text-right { animation: slideInRight 1.0s forwards 0.6s; color: var(--brand-primary); display: block !important; }

.hero-subtitle  { font-size: clamp(0.95rem, 1.1vw, 1.2rem); color: var(--text-muted); margin-bottom: 35px; max-width: 90%; line-height: 1.5; }
.hero-buttons   { display: flex; gap: 16px; justify-content: flex-start; }

/* ── 4. COLUMNA DERECHA ── */
.hero-split-right {
    flex: 1.9;
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.hero-split-right .calendar-container {
    width: 100% !important;
    max-width: none !important;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ── 5. CALENDARIO ── */

.calendar-container {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0, 204, 255, 0.22);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(46, 15, 215, 0.12);
    display: flex;
    flex-direction: column;
    padding: clamp(14px, 1.8vw, 22px);
    gap: clamp(8px, 1vh, 14px);
}

/* Imagen de fondo */
.cal-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('../../img/fondo.webp');
    background-size: cover;
    background-position: center;
}

.cal-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(8, 10, 15, 0.94) 0%,
        rgba(18, 28, 62, 0.91) 100%
    );
}

/* Contenido encima de la imagen */
.cal-header,
.cal-grid,
.footer-cal {
    position: relative;
    z-index: 1;
}

/* ── Cabecera ── */
.cal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: clamp(8px, 1vh, 14px);
    border-bottom: 1px solid rgba(0, 204, 255, 0.14);
    flex-shrink: 0;
}

.cal-header-logo {
    height: clamp(28px, 3.5vh, 44px);
    width: auto;
    opacity: 0.9;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

.cal-header-text { flex: 1; }

.cal-header h2 {
    margin: 0;
    font-size: clamp(1.2rem, 2.1vw, 1.9rem);
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 4px;
    line-height: 1;
}

.cal-header small {
    color: #00ccff;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-size: clamp(0.55rem, 0.9vw, 0.82rem);
    display: block;
    margin-top: 4px;
    opacity: 0.85;
}

/* ── Grid ── */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: clamp(5px, 0.7vw, 10px);
    flex: 1 1 0;
    min-height: 0;
}

.day-col {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.025);
    border-radius: 7px;
    overflow: visible; /* IMPORTANTE: visible para que el ::before de las tarjetas no se corte */
    border: 1px solid rgba(255,255,255,0.05);
}

.day-name {
    color: #00ccff;
    font-size: clamp(0.6rem, 0.85vw, 0.82rem);
    font-weight: 800;
    text-align: center;
    padding: clamp(8px, 1.1vh, 13px) 0;
    letter-spacing: 1.5px;
    background: rgba(0, 204, 255, 0.08);
    border-bottom: 1px solid rgba(0, 204, 255, 0.12);
    border-radius: 6px 6px 0 0;
    flex-shrink: 0;
}

.day-matches {
    padding: clamp(5px, 0.6vw, 8px);
    display: flex;
    flex-direction: column;
    gap: clamp(5px, 0.8vh, 9px);
    flex: 1;
    overflow: visible;
}

/* ── TARJETAS DE PARTIDO ──
   El color se aplica con ::before absoluto —
   100% visible independientemente de otras reglas.     */
.match-card {
    position: relative;
    /* Padding izquierdo extra para que el ::before no tape el texto */
    padding: clamp(6px, 0.9vh, 11px) clamp(8px, 0.8vw, 11px) clamp(6px, 0.9vh, 11px) clamp(11px, 1.2vw, 15px);
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    transition: background 0.2s ease;
    overflow: hidden; /* corta el ::before en los bordes del card */
}

.match-card:hover { background: rgba(255,255,255,0.07); }

/* Barra de color — posición absoluta, izquierda del card */
.match-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: rgba(255,255,255,0.15); /* default si no hay clase */
}

/* ── COLORES POR JUEGO — aplicados al ::before ── */
.match-card.valorant::before { background: #ff4655; }
.match-card.cs2::before      { background: #e4c269; }
.match-card.lol::before      { background: #00ccff; }
.match-card.dimonix::before  { background: rgba(255,255,255,0.35); }

/* ── Info de la tarjeta ── */

/* Fila superior: logo rival pequeño + badge del juego */
.match-top {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

/* Logo del rival — círculo pequeño */
.rival-logo-sm {
    width:  clamp(14px, 1.4vw, 18px);
    height: clamp(14px, 1.4vw, 18px);
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    opacity: 0.85;
    background: rgba(255,255,255,0.1);
}

/* Badge: nombre del juego/plataforma */
.game-badge {
    font-size: clamp(0.48rem, 0.55vw, 0.62rem);
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    display: block;
    /* Limitar a 1 línea — es info secundaria */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.match-card.valorant .game-badge { color: #ff8090; }
.match-card.cs2      .game-badge { color: #c8a84e; }
.match-card.lol      .game-badge { color: #00aacc; }
.match-card.dimonix  .game-badge { color: rgba(255,255,255,0.38); }

/* Nombre del rival — máximo 2 líneas, fuente se reduce si el nombre es largo */
.rival-name {
    font-size: clamp(0.62rem, 0.8vw, 0.9rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Fallback para navegadores sin -webkit-line-clamp */
    max-height: calc(1.2em * 2);
}

/* Hora */
.match-hour {
    font-size: clamp(0.7rem, 0.88vw, 0.96rem);
    font-weight: 800;
    color: #00ccff;
    display: block;
    text-align: right;
    letter-spacing: 0.5px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Día sin partidos */
.training-text {
    font-size: clamp(0.48rem, 0.58vw, 0.63rem);
    color: rgba(255, 255, 255, 0.14);
    font-weight: 700;
    text-align: center;
    margin: auto;
    text-transform: uppercase;
    letter-spacing: 2.5px;
}

/* ── Footer ── */
.footer-cal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: clamp(0.6rem, 0.78vw, 0.75rem);
    color: rgba(255, 255, 255, 0.38);
    padding-top: clamp(8px, 1vh, 12px);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}

.footer-cal strong { color: rgba(255, 255, 255, 0.75); letter-spacing: 1px; }
.footer-cal span   { display: flex; align-items: center; gap: 5px; }
.footer-cal i      { color: #00ccff; font-size: clamp(0.7rem, 0.88vw, 0.88rem); }

/* ── 6. VÍDEO WRAPPER ── */
.video-wrapper {
    position: relative;
    width: 100%; max-width: 900px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(46, 15, 215, 0.3);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    transform: perspective(1000px) rotateY(-5deg);
    transition: var(--transition);
}
.video-wrapper:hover {
    transform: perspective(1000px) rotateY(0deg) scale(1.02);
    border-color: var(--brand-primary);
}
.video-wrapper video { width: 100%; height: auto; display: block; object-fit: cover; }
.video-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(45deg, rgba(46,15,215,0.2), transparent);
    pointer-events: none;
}
.video-controls { position: absolute; bottom: 20px; right: 20px; z-index: 10; display: flex; gap: 10px; }
.video-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.6);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem;
    transition: var(--transition);
}
.video-btn:hover { background-color: var(--brand-primary); border-color: var(--brand-primary); transform: scale(1.1); }

/* ── 7. RESPONSIVE ── */

@media (min-width: 3840px) {
    .hero-split-container { max-width: 3600px; padding-left: 8vw; padding-right: 6vw; }
    .hero-title           { font-size: 10rem; letter-spacing: -20px; }
    .hero-subtitle        { font-size: 2.5rem; }
    .video-btn            { width: 60px; height: 60px; font-size: 1.4rem; }
}

@media (min-width: 1921px) {
    .hero-split-container {
        max-width: 3000px;
        padding-left: clamp(40px, 7vw, 140px);
        padding-right: clamp(40px, 5vw, 120px);
    }
    .hero-split-right { flex: 2.1; }
    .hero-title       { font-size: 8rem; }
    .hero-subtitle    { font-size: 1.8rem; max-width: 800px; }
    .video-wrapper    { max-width: 1600px; }
    .video-btn        { width: 50px; height: 50px; font-size: 1.2rem; }
}

@media (max-width: 1680px) and (min-width: 1401px) {
    .hero-title { font-size: clamp(2.5rem, 5.5vw, 6rem); }
}

@media (max-width: 1400px) and (min-width: 1201px) {
    .hero-title           { font-size: clamp(2.5rem, 5vw, 5rem); letter-spacing: -8px; }
    .hero-split-container { padding-top: 14px; padding-bottom: 14px; }
}

@media (max-width: 1200px) {
    .hero-section         { align-items: flex-start; min-height: 80vh; flex: none; }
    .hero-split-container { flex-direction: column; padding: 40px 20px; text-align: center; }
    .hero-split-left      { max-width: 100%; text-align: center; order: 2; justify-content: flex-start; align-items: center; }
    .hero-buttons         { justify-content: center; }
    .hero-split-right     { width: 100%; order: 1; min-height: 560px; }
    .hero-split-right .calendar-container { flex: none; min-height: 560px; }
    .video-wrapper        { transform: none; }
    .hero-title           { letter-spacing: -7px; line-height: 1.1; }
    .cal-grid             { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 912px) and (min-width: 768px) {
    .hero-title    { font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: -5px; }
    .hero-subtitle { font-size: 1rem; }
    .hero-split-right .calendar-container { min-height: 480px; }
    .cal-grid      { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .hero-title    { font-size: clamp(2.2rem, 8vw, 3rem); letter-spacing: -4px; }
    .hero-subtitle { font-size: 0.95rem; margin-bottom: 25px; }
    .hero-buttons  { flex-wrap: wrap; gap: 12px; }
    .hero-split-right .calendar-container { min-height: 420px; }
    .cal-grid      { grid-template-columns: 1fr; }
}

@media (max-width: 375px) {
    .hero-title    { font-size: 2rem; letter-spacing: -3px; }
    .hero-subtitle { font-size: 0.9rem; }
}