/* || Grid layout */

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.col-span-1  { grid-column-end: span 1; }
.col-span-2  { grid-column-end: span 2; }
.col-span-3  { grid-column-end: span 3; }
.col-span-4  { grid-column-end: span 4; }
.col-span-5  { grid-column-end: span 5; }
.col-span-6  { grid-column-end: span 6; }
.col-span-7  { grid-column-end: span 7; }
.col-span-8  { grid-column-end: span 8; }
.col-span-9  { grid-column-end: span 9; }
.col-span-10 { grid-column-end: span 10; }
.col-span-11 { grid-column-end: span 11; }
.col-span-12 { grid-column-end: span 12; }

.col-start-1  { grid-column-start: 1; }
.col-start-2  { grid-column-start: 2; }
.col-start-3  { grid-column-start: 3; }
.col-start-4  { grid-column-start: 4; }
.col-start-5  { grid-column-start: 5; }
.col-start-6  { grid-column-start: 6; }
.col-start-7  { grid-column-start: 7; }
.col-start-8  { grid-column-start: 8; }
.col-start-9  { grid-column-start: 9; }
.col-start-10 { grid-column-start: 10; }
.col-start-11 { grid-column-start: 11; }
.col-start-12 { grid-column-start: 12; }


/* || Global elements */
hr {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: var(--border-normal);
    margin: var(--x-m) 0;
}

/* || Site-container */
.site-container {
}

/* || Site-header */
.site-header {
    width: 100%;
    background-color: var(--color-bg-1);
    position: fixed;
    top: 0;
    z-index: 1;
}
.site-header__inner {
    padding: var(--x-s) 0;
    margin: 0 var(--x-m);
    border-bottom: var(--border-normal);
}
.site-header__nav {
    display: flex;
    justify-content: space-between;
    gap: var(--x-m);   
}
.site-header__nav-list {
    display: flex;
    /* justify-content: space-between; */
    gap: var(--x-m);
    list-style: none;
}
.site-header__nav-item {
    flex: 1;
}

/* || Main */
.main {
   margin-top: var(--header-h);
   transition: padding-top 0.35s ease; 
}
.archiveMenuIsOpen .main {
    padding-top: var(--archive-menu-h); 
}
.main__inner {
    padding: var(--x-xs) var(--x-m);
    padding-bottom: var(--x-xl);
}

/* || Template: Entry */

.entry__header {
    margin: var(--x-m) 0;
}
.entry__title {
    font-size: var(--fs-xl);
    font-weight: normal;
    margin: 0;
    /* margin: var(--x-m) 0; */
}
.entry__nav {
    /* display: flex; */
    /* justify-content: end; */
    /* gap: var(--x-m) */
    text-align: right;
}
.entry__nav-prev,
.entry__nav-next {
    /* display: block; */
}


.entry__meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--x-m);
    row-gap: var(--x-s);
    margin: var(--x-m) 0;
}
@media only screen and (max-width: 960px) {
    .entry__meta {
        grid-template-columns: repeat(2, 1fr);
    }
}
.entry__meta-column {
    display: flex;
    flex-direction: column;
    row-gap: var(--x-s);
}
.entry__meta-item {

}
.entry__meta-label {
    font-size: var(--fs-s);
    font-weight: normal;
    color: var(--color-tx-muted);
    /* margin-bottom: var(--x-xs); */
}
.entry__meta-value {

}
.entry__meta-value-item::after {
    content: ", "
}
.entry__meta-value-item:last-child::after {
    content: none
}

.entry__content {
    margin: var(--x-m) 0;
}

.block {
    grid-column: 4 / 10;
}
@media only screen and (max-width: 960px) {
    .block {
    grid-column: 3 / 11;
}
}
@media only screen and (max-width: 600px) {
    .block {
    grid-column: 1 / 13;
}
}

.block--text p,
.block--textarea p,
.block--text h3,
.block--textarea h3 {
    margin-bottom: var(--x-m);
    /* max-width: var(--wrap-tx); */
}

.block h3,
.block h3 {
    /* color: var(--color-tx-muted); */
}

.block--gallery {
    margin-bottom: var(--x-m);
    grid-column: 1 / 13;
}


.block--heading {
    margin-top: var(--x-m);
}

.block--list li::before,
.block--textarea li::before {
    content: "• ";
    color: var(--color-tx-faint);
}

.entry__footer {
    display: flex;
    column-gap: var(--x-m);
}
.entry__credits {
    font-size: var(--fs-s);
    flex: 1;
}
.entry__credits-title { 
    font-size: var(--fs-s);
    font-weight: normal;
    color: var(--color-tx-muted);
    /* margin-bottom: var(--x-s); */
}

.entry__related {
    flex: 1;
}
.entry__related-title {
    font-size: var(--fs-s);
    font-weight: normal;
    color: var(--color-tx-muted);
    /* margin-bottom: var(--x-s); */
}
.entry__related-list {

}
.entry__related-item {

}
.entry__related-link {

}