/* structure.css: page layout, containers, and section spacing. */

/* Base document layout. */
body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #EDEDED;
    color: white;
    font-family: Roboto, sans-serif;
    font-size:12pt;
}

/* Shared page wrapper so desktop layouts can cap the overall content width. */
.page-shell {
    width: 100%;
    flex: 1 0 auto;
}

/* Shared frame for the capped top-of-page stack. */
.page-frame {
    width: 100%;
    box-shadow: var(--surface-shadow);
}

/* Shared header container and branding layout. */
.site-header {
    width: 100%;
    background-color: var(--color-header-bg);
    color: white;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 20px;
    box-sizing: border-box;
    border-style:solid;
    border-color:var(--color-cam-wide);
    border-width:0 0 5px 0;
    transition:
        padding 280ms ease,
        gap 280ms ease,
        border-width 280ms ease,
        background-color 280ms ease,
        backdrop-filter 280ms ease,
        -webkit-backdrop-filter 280ms ease,
        box-shadow 280ms ease;
}

/* The framed page header stays in normal document flow. */
.page-header {
    position: relative;
    z-index: 20;
}

/* The floating compact header stays outside the framed stack and can remain sticky for the full page. */
.sticky-header {
    position: fixed;
    top: 0;
    left: 50%;
    width: min(100%, var(--page-max-width));
    z-index: 140;
    gap: 10px;
    padding: 0 20px;
    border-width: 0;
    background-color: rgba(9, 22, 39, 0.82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -100%);
    transition:
        opacity 220ms ease,
        transform 280ms ease,
        visibility 0s linear 280ms;
}

.sticky-header.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition-delay: 0s, 0s, 0s;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1 1 420px;
    align-self: center;
    padding: 28px 0;
    min-height: 80px;
    transition: gap 280ms ease, padding 280ms ease, min-height 280ms ease;
}

.header-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    margin-left: 20px;
    white-space: nowrap;
    align-self: center;
    padding: 15px 0;
}

/* University logo in the header. */
img.header-logo {
    flex-grow:0;
    margin:0;
    height:75px;
    transition: height 280ms ease;
}

/* Title block in the header. */
h1.header-title {
    flex-grow:1;
    margin:0;
    font-size:18pt;
    font-weight:normal;
    min-width: 0;
    transition: font-size 280ms ease;
}

/* Shared line styling for header title pieces. */
.header-title-line {
    display:block;
    line-height:1;
    margin:0;
    transition: opacity 240ms ease, max-height 280ms ease, margin 280ms ease;
    max-height: 80px;
    overflow: hidden;
}

.header-title-line-small {
    font-size:70%;
    margin-bottom:4px;
}

.header-title-line-main {
    font-weight:bold;
    margin:6px 0;
    text-transform:uppercase;
    letter-spacing:0.3ex;
}

.header-title-line-tiny {
    font-size:60%;
    margin-top:4px;
}

.header-title-line-tiny.en {
    font-size:60%;
}

/* Perspective selector button row. */
.header-navigation {
    flex-grow:0;
    display: flex;
    align-items: stretch;
    gap: 15px;
    margin:0 0 0 auto;
    padding:0;
    align-self: stretch;
    max-width: 1000px;
    max-height: 220px;
    overflow: hidden;
    transition:
        opacity 220ms ease,
        max-height 280ms ease,
        max-width 280ms ease,
        margin 280ms ease;
}

/* Status and timestamp area in the header. */
.header-status {
    font-size:90%;
    flex-grow:0;
    margin:0;
    text-align:right;
    padding-left:40px;
    border-left:0pt dotted white;
    line-height:1.4;
    max-width: 220px;
    max-height: 120px;
    overflow: hidden;
    transition:
        opacity 220ms ease,
        max-height 280ms ease,
        max-width 280ms ease,
        padding 280ms ease,
        margin 280ms ease;
}

/* Compact sticky header layout. */
.sticky-header .header-brand {
    gap: 12px;
    padding: 10px 0;
    min-height: 52px;
}

.sticky-header img.header-logo {
    height: 38px;
}

.sticky-header h1.header-title {
    font-size: 16pt;
}

.sticky-header .header-title-line-main {
    margin: 0;
    letter-spacing: 0.2ex;
}

.sticky-header .header-status {
    padding: 0;
    border-left-width: 0;
    padding-left: 24px;
    margin-left: auto;
    max-width: none;
    max-height: none;
    overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
    .site-header,
    .header-brand,
    img.header-logo,
    h1.header-title,
    .header-title-line,
    .header-navigation,
    .header-status,
    .sticky-header {
        transition-duration: 10ms;
    }
}

/* Banner-style message blocks. */
.control-container-message {
    flex-grow: 0;
    width: 100%;
    font-weight:bold;
    text-align:center;
    padding:20px 10px;
    box-sizing: border-box;
}

.message-yellow {
    background-color:#FFF003;
    color:black;
}

.message-red {
    background-color:#FF5C5C;
    color:black;
}

.message-green {
    background-color:#7BE495;
    color:black;
}

.message-blue {
    background-color:#79C7FF;
    color:black;
}

.message-gray {
    background-color:#E0E0E0;
    color:black;
}

/* Optional disabled/maintenance banner. */
.control-container-disabled {
    background-color:#ff9e00;
    color:black;
    font-weight:bold;
    text-align:center;
    display:none;
}

/* Light control sections (progress/timelapse). */
.control-container-light {
    flex-grow: 0;
    width: 100%;
    background-color: #D9D9D9;
    padding: 20px 40px;
    text-align: left;
    color: #323232;
    position: relative;
    z-index: 10;
    box-sizing: border-box;
    border-bottom:1px solid #C2C2C2;
}

/* Ensure the top control block sits above the lower one for tooltips. */
.control-container-top {
    z-index: 30;
}

.control-container-light h2 {
    color: #323232;
}

/* Shared control block helper. Shadowing is handled by the page frame in restricted-width mode. */
.control-container-shadow {
}

/* Footer links and attribution. */
/* Footer layout with version alignment. */
.footer-container {
    flex-grow: 0;
    width: 100%;
    background-color: #EDEDED;
    padding: 10px 40px;
    color: #323232;
    font-size:10pt;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* Left-aligned footer links. */
.footer-left {
    text-align: left;
}

/* Right-aligned version label. */
.footer-right {
    text-align: right;
}

/* Main information section container. */
.info-container {
    flex-grow: 1;
    align-items:stretch;
    align-content:flex-start;
    gap:30px;
    display: flex;
    flex-direction: column;
    flex-wrap:wrap;
    justify-content: flex-start;
    width: 100%;
    padding: 40px;
    text-align: left;
    color: #323232;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

/* Individual info box card. */
.info-container .info {
    flex-grow:1;
    background-color:white;
    box-shadow: var(--surface-shadow);
    padding:25px 25px;
    border-radius: 10px;
    font-size:12pt;
    line-height:1.5;
    border:1px solid #DEDEDE;
}

/* Layout of columns inside info boxes. */
.info-container .info .content {
    display:flex;
    flex-direction:row;
    gap:30px;
    align-items:flex-start;
    justify-content:flex-start;
    flex-wrap:wrap;
}

.info-container .info .content > * {
    margin-top:0;
}

.content .image {
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:flex-start;
    align-items:flex-start;
    flex:0 0 300px;
    text-align:center;
    min-width:300px;
    max-width:300px;
}

.content .big-image {
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:flex-start;
    align-items:flex-start;
    flex:1 1 400px;
    text-align:left;
    min-width:300px;
    max-width:500px;
}

.content .full-width-block {
    flex:1 1 100%;
    min-width:300px;
    max-width:none;
    width:100%;
}

.content .info-image {
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:flex-start;
    align-items:flex-start;
    text-align:left;
    flex:1 1 400px;
    min-width:300px;
    max-width:500px;
    padding:0 0 0 20px;
}

.content div {
    flex-grow:0;
}

.content ul {
    flex:1 1 300px;
    max-width:500px;
    min-width:240px;
    margin:0;
}

.content ul > li {
    text-align:left;
    margin:0 0 0 20px;
}

.image img {
    margin:0px auto 20px auto;
    width:250px;
    height:auto;
    display:block;
    flex-grow:0;
}

.image div {
    text-align:center;
    width:100%;
}

.big-image img {
    margin:20px 0 0px 0;
    width:100%;
    height:auto;
    display:block;
    flex-grow:0;
    border-radius:10px;
}

.info-image img {
    margin:20px 0 0 0;
    width:100%;
    height:auto;
    display:block;
    flex-grow:0;
    border-radius:10px;
}

.info-image img:nth-of-type(1) {
    margin:0 0 0 0;
}

.big-image div {
    text-align:left;
    width:100%;
}

.info-image div {
    text-align:left;
    width:100%;
}

.info > div {
    margin-top:10px;
}

.image-container {
    position: relative;
    display: block;
    width: 100%; 
    aspect-ratio: 3840 / 2220;
    background-color: #000;
}

.image-container img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.refresh-image {
    opacity: 1;
    transition: opacity 140ms ease-out;
}

.refresh-image-next {
    opacity: 0;
}

/* Keep the current fluid layout on smaller screens and cap the full page on larger ones. */
@media (min-width: 1800px) {
    .page-shell {
        max-width: var(--page-max-width);
        margin: 0 auto;
    }

    /* Frame the capped top stack as a single card so shadows stay continuous across section boundaries. */
    .page-frame {
        border-radius: 0 0 10px 10px;
    }

    /* Match the rounded lower edge of the progress block to the info-card treatment. */
    .control-container-shadow {
        border-radius: 0 0 10px 10px;
    }

    /* Round the lower corners of the floating sticky header in centered desktop mode. */
    .sticky-header {
        border-radius: 0 0 10px 10px;
    }
}