/* Shared styles for the work pages (see work.js for the layout of the scattered elements) */

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #dddddd;
    font-family: "Ehrhardt", "Janson", "Times New Roman", serif;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}

.project-container {
    position: relative;
    width: 100%;
    margin: 0;
}

/* every image, video and text block on the page */
.scattered-element {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    box-sizing: border-box;
    padding: 1rem;
    background-color: #d1d1d1;
    border: 1px solid #000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: #1a202c;
}

.scattered-element.is-image {
    display: block;
    height: auto;
    padding: 0;
    background-color: transparent;
    object-fit: cover;
}
/* until the photo has loaded, hold a plausible amount of space so the layout does not jump */
.scattered-element.is-image:not(.loaded) { aspect-ratio: 4 / 3; background-color: #c8c8c8; }
.scattered-element.is-image.is-broken { background-color: #c8c8c8; }

.scattered-element.is-video {
    padding: 0;
    background-color: #000;
}
.scattered-element.is-video iframe,
.scattered-element.is-video video {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    object-fit: contain;
}

.scattered-element.is-title {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.15;
    text-align: center;
    padding: 1.2rem 1.5rem;
}
.scattered-element.is-date {
    font-size: 1.1rem;
    text-align: center;
    padding: 0.5rem 1rem;
}
.scattered-element.is-description {
    font-size: 1rem;
    line-height: 1.5;
}
.scattered-element.is-link {
    display: block;
    font-size: 1.05rem;
    text-align: center;
    color: #1a202c;
    text-decoration: none;
    border-style: solid;
    padding: 0.8rem 1.1rem;
}
.scattered-element.is-link:hover { text-decoration: underline; }
.scattered-element.is-image-title {
    font-size: 0.9rem;
    font-style: italic;
    text-align: center;
    padding: 0.4rem 0.8rem;
    background-color: #c8c8c8;
    border-color: #333;
}

@media (min-width: 900px) {
    .scattered-element.is-title { font-size: 3rem; }
    .scattered-element.is-date { font-size: 1.2rem; }
    .scattered-element.is-description { font-size: 1.05rem; }
}

/* clicked photo: brought to the middle of the page at a readable size (work.js sets its exact size and
   glides it there; translate only centres it on its own middle) */
.scattered-element.active-enlarged {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    translate: -50% -50%;
    z-index: 9999 !important;
    cursor: zoom-out;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}
.scattered-element.is-image { cursor: zoom-in; }
.scattered-element.is-image.active-enlarged { object-fit: contain; }