/* The Container of the various titles */
.calendario-opening {
    grid-area : intro;
}
.cal-title-container {
    display       : flex;
    align-items   : baseline;
    flex-wrap     : wrap;
    gap           : 0.25rem 1rem;
    margin-bottom : 2rem;
}
/* Primary Title */
.cal-title {
    font : var(--serif-l);
}
.cal-title span {
    font : var(--serif-l);
}
/* Active Date, only visible when a specific date has been selected on the calenda */
.cal-selected-date {
    font : var(--sans-l);
}
/* Intro Text */
.cal-intro {
    font          : var(--sans-m);
    margin-bottom : 2rem;
}
/* The Optional Accordions Section */
.cal-accordions {
    margin-bottom : 2rem;
}
/* The entries container inside calendar-like pages */
.calendario-timeline {
    grid-area : timeline;
}
.cal-months {
    display : grid;
    gap     : 2rem;
}
/* The single month container */
.cal-month {
    position : relative;
}
/* Month Name */
.cal-month-title {
    font           : var(--nav);
    background     : var(--dark);
    color          : var(--light);
    text-transform : uppercase;
    padding        : 0.33rem 0.5rem 0.187rem;
    display        : flex;
    position       : sticky;
    top            : 1rem;
}
/* The List of entries */
.cal-entries {
    list-style : none;
    padding    : 1rem 0;
}
/* The calendar entry for the various pages */
.cal-entries-item {
    padding : 0.5rem 0;
}
.cal-entries-item:not(:last-child) {
    border-bottom : 1px solid var(--dark);
}
/* The Inner container */
.entry {
    display : block;
    width   : 100%;
}
/* The Entry header, always visible, regardless of the type */
.entry-header {
    display               : grid;
    grid-template-columns : 1fr 6rem;
    gap                   : 0.25rem;
    align-items           : start;
    align-content         : start;
    cursor                : pointer;
}
.entry-header:hover {
    color : var(--accent);
}
/* The Small Category */
.entry-category {
    font           : var(--sans-s);
    text-transform : uppercase;
    grid-column    : 1 / -1;
}
/* Primary Title */
.entry-title {
    font : var(--serif);
}
.entry-title span {
    display : flex;
    gap     : 0.5rem;
    align-items : center;
}
.entry-title span:not(:first-child) {
    color : var(--accent);
}
.entry-title svg {
    width : 1rem;
    height : 1rem;
    fill : currentColor;
}
/* Date */
.entry-datetime {
    display : block;
    font    : var(--sans);
}
.entry-datetime::first-letter {
    text-transform: uppercase;
}
/* Hidden part of the entry */
.entry-body {
    display               : grid;
    padding-top           : 1rem;
    grid-template-columns : 9fr 8fr;
    gap                   : 1rem;
}
.entry-caffe .entry-body {
    grid-template-areas : "text .";
}
.entry-visita .entry-body {
    grid-template-areas : "text specs"
                          "text prices"
                          "buttons prices";
}
.entry-evento .entry-body {
    grid-template-areas : "text picture"
                          "buttons picture";
}
/* Description */
.entry-text { grid-area : text; }
.entry-buttons { grid-area : buttons; }
.entry-specs { grid-area : specs; }
.entry-prices { grid-area : prices; }
.entry-picture { grid-area : picture; }
.entry-buttons {
    display    : grid;
    gap        : 0.5rem;
    align-self : end;
}
.entry-specs {
    list-style: none;
}
.entry-prices {
    align-self: end;
}
/* The Open Label */
.entry-open {
    margin-top            : 1rem;
    display               : grid;
    grid-template-columns : 1fr 1.25rem;
    gap                   : 1rem;
    align-content         : center;
    align-items           : center;
}
.entry-open-text {
    font           : var(--sans-s);
    text-transform : uppercase;
    text-wrap      : balance;
}
@media (width <= 1100px) {
    .visita-content {
        padding-top           : 1rem;
        grid-template-columns : 1fr;
        grid-template-areas   : "specs" "prices" "description " "buttons";
        gap                   : 0.5rem;
    }
}