/* Basic styles adapted from user's demo */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:#f8fafc;color:#1e293b;line-height:1.6}
header{background:linear-gradient(135deg,#ff9c00,#ff9c00);color:#fff;padding:1.5rem 0}
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}
.header-content{display:flex;justify-content:space-between;align-items:center}
.logo{font-size:2rem;font-weight:700}
.admin-btn{background:#fff;color:#6366f1;border:none;padding:.75rem 1.5rem;border-radius:.5rem;font-weight:600;cursor:pointer}
.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2rem;margin:2rem 0}
.post-card{background:#fff;border-radius:1rem;overflow:hidden;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);cursor:pointer}
.post-image{width:100%;height:280px;object-fit:cover;display:block}
.post-content{padding:1.5rem}
.post-title{font-size:1.25rem;font-weight:700;margin-bottom:.75rem;color:#1e293b}
.post-description{color:#64748b;font-size:.95rem;margin-bottom:1rem}
.post-date{font-size:.85rem;color:#94a3b8;font-style:italic}
.video-placeholder{background:linear-gradient(135deg,#1e293b,#334155);display:flex;align-items:center;justify-content:center;color:white;height:280px}
.footer{background:#f8fafc;color:#fff;text-align:center;padding:2rem 0;margin-top:3rem}
.admin-panel{background:#fff;border-radius:1rem;padding:2rem;margin:2rem 0;box-shadow:0 10px 15px -3px rgba(0,0,0,.1)}
.form-control{width:100%;padding:.75rem;border:2px solid #e2e8f0;border-radius:.5rem}
.submit-btn{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;padding:1rem 2rem;border-radius:.5rem}







.post-description {
    color: #64748b;
    font-size: 0.95rem;

    display: -webkit-box;       /* Soporte para limitar líneas */
    -webkit-line-clamp: 3;      /* Máximo de 3 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;    /* Muestra “...” al cortar */
    margin-bottom: 1rem;
}




.post-card {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,.1);
}

.post-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Hace que el contenido ocupe todo el espacio y empuje el botón al fondo */
}

.read-more-btn {
    margin-top: auto; /* Empuja el botón al fondo de la tarjeta */
    background: #6366f1;
    color: white;
    border: none;
    padding: 0.3rem 0.6rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    text-decoration: none;
}

.read-more-btn:hover {
    background: #4f46e5;
}


.post-description {
    color: #64748b;
    font-size: 0.95rem;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Máximo 4 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.5rem;
}


.post-title h3 {
    line-height: 1.2; /* Ajusta el valor a tu gusto, 1.2 es bastante compacto */
    margin-bottom: 0.5rem; /* Espacio debajo del título */
}