/*==========Diary Entries==========--------------------------*/

#content.fill #entries {
    padding-top: 0;
}

.entry-container {
    padding: 6px 6px 0 6px;
    border: var(--outline);
    border-radius: 4px;
    margin: calc(var(--content-side-padding) - 8px - 2ch);
    background: var(--white)
}

.entry-container .card p:last-child {
    margin-bottom: 1rem;
}

.entry > *:first-child {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    background: var(--primary-light) url(../../assets/layout/background/gingham.svg) top right;
    background-size: var(--bg-sm);
}
.entry .card {
    padding-top: 1rem;
    background: var(--base);
}

.entry > *:last-child {
    margin-top: 1rem;
}

.entry-details {
    width: 100%;
    display: flex;
    align-items: stretch;
    border-bottom: var(--outline);
}
.entry-details * { margin: 0; }

.entry-details .date {
    font: var(--body-sc);
    text-shadow: var(--text-outline-base);
    display: flex;
    flex: 36%;
    width: 36%;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing);
    line-height: 1rem;
}
.entry-details .date > *, .entry-details .id {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: var(--outline);
}
.entry-details .year {
    font: var(--numbers);
    padding: 4px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.entry-details .year span:last-child {
    margin-top: -.3rem;
}
.entry-details .month {
    margin-left: -8px;
    letter-spacing: var(--letter-spacing);
    transform-origin: 50% 50%; /* removes blur */
    transform: rotate(-90deg);
}
.entry-details .monthday {
    font: var(--numbers);
    background: var(--base);
    padding: 4px 6px 4px 8px;
}

.entry-details .day {
    font: var(--heading);
    font-size: 1.75rem;
    margin-left: -3px;
    margin-bottom: 4px;
}
.entry-details .occasion {
    width: 100%; 
    border-right: none;
    letter-spacing: var(--letter-spacing-sm);
}

.entry-details a {
    font: var(--heading);
    flex: 64%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0 6px var(--side-padding-sm);
    background: var(--base);
    border-left: var(--outline);
    text-decoration: none;
}

.entry-details a:hover, .entry-details a:hover .id  {
    color: var(--link);
    background: var(--white);
}

.entry-details .id {
    font-size: 1rem;
    letter-spacing: var(--letter-spacing);
    color: var(--link);
    border-right: none;
    word-break: unset;
    align-self: center;
    display: none; 
}


.card-image {
    max-width: 36%;
}
.card-image img { width: 100%; }


.card-image ~ .card { 
    width: 64%;
    flex: 0 1 64%;
}

.entry div:empty {
    margin: 0;
}

/**/

.full .entry > *:last-child, .full .card { 
    margin-left: var(--content-side-padding);
    margin-right: var(--content-side-padding);
}

.full .card {
    margin-left: 0;
    margin-right: 0;
    padding: 1rem var(--content-side-padding) 0 var(--content-side-padding);
}

.full .card-image ~ .card { 
    padding-right: var(--content-side-padding);
    padding-left: var(--side-padding-sm);
}

/**/

#entries .entry {
    background: var(--base);
    overflow-y: hidden;
    background: var(--base);
    border: var(--outline);
    border-radius: 4px;
}

#entries .entry > *:not(:first-child) {
    display: none;
}

#entries .entry > *:last-child {
    margin-left: 2ch;
    margin-right: 2ch;
}

#entries .entry .card {
    padding: 1rem 2ch 0 2ch;
}
#entries .entry .card-image ~ .card {
    padding-right: 2ch;
    padding-left: var(--side-padding-sm);
}
#entries .entry .entry-details a {
    padding-right: 2ch;
}
#entries .entry-details .id {
    display: flex;
}

.read-more {
    font: var(--body-sc);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing);
    text-align: right;
    margin-right: calc(2ch + 1px);
    padding: 4px 0;
}

/**/

.status  {
    width: 100%;
    list-style: unset;
    margin-top: 0;
    margin-bottom: 1rem;
    font: var(--body-sm);
}

.status tr {
    width: 100%;
    border-bottom: var(--outline);
}

.status td:first-child {
    font: var(--body-sc);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing);
    font-weight: 600;
    padding-right: 1rem;
    width: 8ch;
}

/*Main Paginate*/
.page-l, .page-r {
    -webkit-transition: transform 0.2s;
	transition: all 0.2s;
    font-size: 1.5rem;
}

.paginate {
    font: var(--body-sm);
    line-height: 1;
    font-weight: 600;
    text-shadow: var(--text-outline-base);
    width: 100%;
    letter-spacing: 1pt;
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-r:not(.disable):hover, .fwd:hover span { transform: translateX(4px); }
.page-l:not(.disable):hover, .bck:hover span { transform: translateX(-4px); }

/*Entry Paginate*/
.entry-paginate {
    font: var(--body-sc);
    letter-spacing: var(--letter-spacing);
    text-transform: uppercase;
    border-width: 1px 0;
    border-top: var(--outline);
    padding: 2px 1ch;
    background: var(--base);
    
}
.entry-paginate { 
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
}
.entry-paginate > * {
    width: auto;
    margin: 0;
    white-space: nowrap;
    align-self: center;
}

/*========================*/
/*Responsiveness*/
/*========================*/

@media screen and (max-width: 1000px) {
    #entries { width: 100%; margin: unset; }
    #entries .card p, #entries .d-article p { max-width: unset; }
    
    .entry { width: 100%; }
    
    .entry-details > * { flex-wrap: wrap; }
    .entry-details .date { justify-content: space-between; flex: 25%; }
    .entry-details .monthday { border-right: none; flex-grow: 1; }
    .entry-details .week { border-top: var(--outline);}
    
    .card-image { max-width: unset; width: 100%; }
    .card, .card-image, .card-image ~ .card { 
        width: 100%;
        flex-basis: 100%;
    }
    
    .card-image ~ .card { padding-left: unset;}
}

@media screen and (max-width: 800px) {

    .paginate {
        background: var(--base);
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 10px 5%;
        margin: calc(20px + 1rem) 0 0 0;
        z-index: 1000;
    }
    
    .entry-details .date {
        min-width: 80px;
        flex: 0 0 20%;
        display: flex;
    }
    .entry-details .year {
        width: 25%;
        flex: 0 1 25%;
    }
    .entry-details .monthday {
        width: 75%;
        max-width: 84px;
        flex: 1 0 75%;
    }
    .entry-details .occasion { flex: 0 0 100%; }
    
    .entry-details .date > * { justify-content: flex-start; }
    
    .entry-details a {
        flex-direction: column-reverse;
        align-items: flex-start;
    }
    .entry-details .id { align-self: flex-end; }
    
    #entries .entry {
        margin: unset;
        margin-bottom: var(--side-padding-sm);
    }
}