/* ================================
   VIDEOS - ESTILO YOUTUBE
================================ */

.content {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 40px 30px;
}

.content > h2 {
    margin: 0 0 30px;
    color: #176b2c;
    font-size: 28px;
    text-align: left;
}

/* ================================
   GRID
================================ */

.videos-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 24px;
    width: 100%;
}

/* ================================
   TARJETA
================================ */

.video-item {
    min-width: 0;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.10);
    transition: all 0.3s ease;
}

/* ================================
   VIDEO
================================ */

.video-item video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    background: #000;
    cursor: pointer;
}

/* ================================
   TITULO
================================ */

.video-item h3 {
    margin: 16px 18px 8px;
    color: #176b2c;
    font-size: 19px;
    line-height: 1.4;
}

/* ================================
   DESCRIPCION
================================ */

.video-item p {
    margin: 0 18px 15px;
    color: #666;
    font-size: 15px;
    line-height: 1.5;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ================================
   BOTONES
================================ */

.video-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 15px 18px;
}

.video-actions button {
    flex: 1;
    border: none;
    background: #f1f3f1;
    color: #333;
    padding: 10px 8px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: 0.2s;
}

.video-actions button:hover {
    background: #176b2c;
    color: #fff;
}

/* ================================
   VIDEO GRANDE ARRIBA
================================ */

.video-item.active {
    grid-column: 1 / -1;
    order: -1;
    transform: none;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
    border-radius: 14px;
}

/* VIDEO GRANDE */

.video-item.active video {
    margin-top:0px;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #000;
}

/* TITULO GRANDE */

.video-item.active h3 {
    font-size: 24px;
    margin: 18px 20px 8px;
}

/* DESCRIPCION GRANDE */

.video-item.active p {
    font-size: 16px;
    margin: 0 20px 15px;
    display: block;
}

/* ================================
   RESTO DE VIDEOS
================================ */

.video-item:not(.active) {
    transform: none;
}

.video-item:not(.active):hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.16);
}

/* ================================
   TABLET
================================ */

@media (max-width: 1100px) {

    .content {
        padding: 35px 25px;
    }

    .videos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px 20px;
    }

    .video-item.active {
        grid-column: 1 / -1;
    }
}

/* ================================
   CELULAR
================================ */

@media (max-width: 700px) {

    .content {
        padding: 25px 15px;
    }

    .content > h2 {
        font-size: 24px;
        margin-bottom: 22px;
    }

    .videos-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .video-item {
        border-radius: 12px;
    }

    .video-item.active {
        grid-column: 1;
    }

    .video-item.active h3 {
        font-size: 20px;
    }

    .video-item h3 {
        font-size: 18px;
    }

    .video-actions {
        gap: 6px;
    }

    .video-actions button {
        font-size: 13px;
        padding: 9px 5px;
    }
}

/* ================================
   CELULARES PEQUEÑOS
================================ */

@media (max-width: 400px) {

    .video-actions button {
        font-size: 12px;
    }

}