.agenda-grid {
display: grid;
grid-template-columns: repeat(var(--agenda-cols, 3), 1fr);
gap: 0;
}
.agenda-cols-1 {
--agenda-cols: 1;
}
.agenda-cols-2 {
--agenda-cols: 2;
}
.agenda-cols-3 {
--agenda-cols: 3;
}
.agenda-cols-4 {
--agenda-cols: 4;
}
.agenda-card {
display: block;
text-decoration: none;
color: inherit;
overflow: hidden;
}
.agenda-card-imagen {
position: relative; aspect-ratio: 1/1;
overflow: hidden;
background: #ddd;
}
.agenda-card-imagen img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: all 0.3s ease;
}
.agenda-card-fecha {
position: absolute;
left: 0;
bottom: 0;
background: var(--accent);
color: var(--light);
padding: 20px 24px;
line-height: 1.15;
width: 100px;
}
.agenda-dia {
display: block;
font-size: 42px;
font-weight: 700;
}
.agenda-mes,
.agenda-hora {
display: block;
font-size: 15px;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.agenda-card-info {
padding: 28px 24px;
}
.agenda-card-info {
background: var(--light);
color: var(--dark);
transition: all 0.3s ease;
height: 100%;
}
.agenda-card:hover .agenda-card-info {
background: var(--dark);
color: var(--light);
}
.agenda-card-titulo {
color: var(--dark);
}
.agenda-card:hover .agenda-card-titulo {
color: var(--light);
}
.agenda-card:hover .agenda-card-imagen img {
transform: scale(1.05);
}
.agenda-card-meta {
font-style: italic;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
opacity: 0.9;
line-height: 1;
}
.agenda-card-titulo {
font-family: 'Fraunces', serif;
font-size: 26px;
line-height: 1.2;
margin: 0 0 14px;
}
.agenda-card-texto {
font-size: 15px;
line-height: 1.5;
}
.agenda-card-texto strong {
color: var(--accent);
}
.agenda-paginacion {
text-align: center;
margin-top: 24px;
}
span.icon-calendar {
display: flex;
transform: translateY(-1px);
}
.icon-calendar svg {
width: 24px;
}
.icon-calendar svg path {
fill: var(--dark);
transition: all 0.3s ease;
}
.agenda-card:hover .icon-calendar svg path {
fill: var(--light);
}
@media (max-width: 900px) {
.agenda-grid {
grid-template-columns: 1fr !important;
}
}
.agenda-card-fecha--recurrente {
display: flex;
align-items: center;
gap: 10px;
flex-flow: column;
}
.agenda-texto-fijo {
font-size: 15px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.agenda-card-texto {
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
.agenda-card-texto ul,
.agenda-card-texto ol {
margin: 0 0 0.5em 1.2em;
padding: 0;
}
.agenda-card-texto li {
margin-bottom: 0.25em;
}
.agenda-card-texto p {
margin: 0 0 0.5em;
}