@import url(../tokens/case-gallery.css);

.case header {
    display: inline-flex;
    position: absolute;
    background: transparent;
    z-index: 2;
}

.case header nav ul li {
    white-space: nowrap;
}
.case header nav ul li::after {
    content: "/";
    padding-right: 0;
}
.case header nav ul li:nth-child(1) {
    display: inline;
}
.case header nav ul li:nth-child(1) a::before {
    content: "Портфолио";
}

.case header nav ul li a:link,
.case header nav ul li a:visited {
    color: silver;
    text-shadow: var(--textShadow);
}

@media screen and (min-width: 1000px) {
    .case header {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-end;
        padding: calc(var(--sectiongap) + 1rem) 2rem 0 0;
        width: var(--padding);
    }
    .case header nav {
        flex-direction: row;
        align-items: flex-end;
        gap: 1em;
    }
    .case header nav ul li::before {
        padding-left: 0;
    }
}

@media handheld, (max-width: 1000px) {
    .case header {
        padding: 1.5rem 0 0 1.5rem;
    }
    .case h1 {
        padding-top: 100px !important;
    }
}

.case time.side-text {
    color: var(--CosmicLatte);
    right: calc(var(--padding) / 2);
    top: calc(var(--sectiongap) + 30px);
    width: 60px;
    text-shadow: var(--textShadow);
}

.case main {
    display: block;
    position: relative;
    padding: unset;
}

.case h1.cover {
    width: 100vw;
    box-sizing: border-box;
    max-width: none;
    padding: var(--sectiongap) var(--padding) calc(var(--sectiongap) * 0.75);
    margin: 0;
    background: var(--BrightBlue);
    background-position: center;
    background-size: cover;
    text-shadow: var(--textShadow);
}

.case .gallery {
    width: 100vw;
    max-width: unset;
    white-space: nowrap;
    overflow-x: scroll;
    display: flex;
    align-items: center;
    gap: var(--columngap);
    scroll-behavior: smooth;
    padding: var(--columngap) var(--padding);
    background-color: silver;
    box-sizing: border-box;
}

.case .gallery > img {
    width: max-content;
    max-width: 95vw;
    max-height: 75vh;
    display: inline-block;
}

.gallery > * {
    flex-shrink: 0;
    display: inline-block;
}

.case article {
    font-family: Raleway;
    padding: var(--columngap) var(--padding) var(--sectiongap);
    column-gap: var(--columngap);
    row-gap: calc(var(--columngap) / 2);
}

.case article > :not(.gallery, p, li, td) {
    max-width: calc(100vw - 2 * var(--padding));
}

.case article > .gallery {
    position: relative;
    left: calc(0px - var(--padding));
}

.case article .gallery {
    position: relative;
    left: calc(0px - var(--padding));
    background-color: hsla(0, 0%, 0%, 0.35);
}

.case article .gallery > img {
    filter: drop-shadow(0 0 1rem black);
}

.case article :is(h2, .h2) {
    position: relative;
    top: -0.75em;
    left: calc(0px - var(--padding));
    height: 2rem;
    margin: var(--sectiongap) 0 calc(var(--sectiongap) / 2);
    font-family: Unovis100;
    font-size: 10vw;
    z-index: -1;
}
@media (max-width: 768px) {
    .case article :is(h2, .h2) {
        font-size: 5rem;
    }
}

.case article :is(h3, .h3, h4, .h4, table th, dl dt) {
    color: silver;
}

.case article :is(p, li, table, dl) {
    color: slategray;
}
.case strong {
    color: var(--CosmicLatte);
}

@media (min-width: 1800px) {
    .case article :is(p, .p),
    .case article :not(p, .p) + :is(p, .p) {
        grid-column: 2 / span 2;
    }
    .case article :is(p, .p) + :is(p, .p):nth-child(even) {
        grid-column: 4 / span 2;
    }
    .case article :is(p, .p) {
        margin: 0;
    }
}

.case article td {
    vertical-align: top;
}
.case article td + td {
    padding-left: var(--columngap);
}
.case article tr + tr td {
    padding-top: calc(var(--sectiongap) / 3);
}

.case section.thanks {
    padding: calc(var(--sectiongap) / 2) var(--padding);
    display: none;
}

.case article small {
    color: slategray;
}

.case article table td,
dl dt {
    font-family: Santello, Raleway;
}

tr + tr td,
tr + tr th {
    padding-top: calc(var(--sectiongap) / 4);
}


.case article > :not(h2, .h2) + :is(dl, table) {
    margin-top: calc(var(--sectiongap) / 2);
}

.case .comments-section {
    overflow: hidden;
}

@media (max-width: 768px) {
    .case .comments-section h2 {
        position: absolute;
        bottom: 0.5em;
    }
}

.case .comments-section .tg-link-wrapper {
    position: absolute; top: var(--sectiongap); right: 0;
    background-color: white;
    padding: 1rem;
}