@import url('/css/history.css?v=1');

/* Keep the complete 16:9 family portrait visible. The original hero used a
   fixed-height cover crop, which removed people near the image edges at
   several viewport sizes and placed copy over the group. */
.history-hero {
    display: grid;
    min-height: 0;
    overflow: hidden;
    background: var(--history-dark);
}

.history-hero-image {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    object-position: center;
    background: #e8ece8;
}

.history-hero-overlay {
    display: none;
}

.history-hero-content {
    width: 100%;
    max-width: none;
    padding: clamp(2.2rem, 5vw, 4rem);
    background: var(--history-dark);
}

.history-hero-content > p:not(.history-eyebrow) {
    max-width: 760px;
}

.history-photo {
    margin: 2rem 0 0;
}

.history-photo img {
    display: block;
    width: 100%;
    border-radius: .4rem;
}

.history-photo figcaption {
    margin-top: .65rem;
    color: #6b776f;
    font-size: .78rem;
    line-height: 1.5;
}

.history-photo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.history-photo-grid .history-photo img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.history-photo-portrait {
    max-width: 620px;
}

.history-photo-portrait img {
    max-height: 720px;
    object-fit: cover;
    object-position: center;
}

.history-photo-dark figcaption {
    color: #bdc9c0;
}

.history-archive-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
    margin-top: 2rem;
}

.history-archive-grid .history-photo {
    margin: 0;
}

.history-archive-grid .history-photo img {
    width: 100%;
    height: clamp(240px, 28vw, 330px);
    object-fit: cover;
}

.history-archive-grid .history-archive-feature {
    grid-column: 1 / -1;
}

.history-archive-grid .history-archive-feature img,
.history-archive-grid .history-archive-wide img {
    height: clamp(340px, 48vw, 560px);
}

.history-archive-grid .history-archive-wide {
    grid-column: 1 / -1;
}

.history-archive-grid .history-archive-sign img {
    object-position: center 58%;
}

.history-archive-grid .history-archive-sign {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - .75rem);
}

@media (max-width: 800px) {
    .history-archive-grid {
        gap: 1.1rem;
    }
}

@media (max-width: 575px) {
    .history-hero {
        min-height: 0;
    }

    .history-hero-image {
        position: relative;
        object-position: center;
    }

    .history-hero-content {
        padding: 2rem 1.5rem;
    }

    .history-photo-grid {
        grid-template-columns: 1fr;
    }

    .history-archive-grid {
        grid-template-columns: 1fr;
    }

    .history-archive-grid .history-archive-feature,
    .history-archive-grid .history-archive-wide,
    .history-archive-grid .history-archive-sign {
        grid-column: auto;
        width: 100%;
    }

    .history-archive-grid .history-photo img,
    .history-archive-grid .history-archive-feature img,
    .history-archive-grid .history-archive-wide img {
        height: auto;
        max-height: none;
        aspect-ratio: auto;
        object-fit: contain;
    }
}