/* disaster.html — helicopter disaster page only. Loaded after css/shared.css. */

/* Names read as an engraved wall — a flowing text column rather than a grid
   of boxed cards, so short and long entries pack naturally per row. */
.names-columns {
    column-count: 1;
    column-gap: 3rem;
}
@media (min-width: 640px) {
    .names-columns { column-count: 2; }
}
@media (min-width: 1024px) {
    .names-columns { column-count: 3; }
}
@media (min-width: 1280px) {
    .names-columns { column-count: 4; }
}
.name-entry {
    break-inside: avoid;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0;
}
.name-entry-icon {
    flex-shrink: 0;
    font-size: 2.5rem;
}
.name-entry-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.name-entry-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: #ffffff;
}
.name-entry-meta {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.55);
}

/* Memorial-site photo grid + lightbox (mirrors gallery.css's pattern,
   scoped here since this page doesn't load the full gallery stylesheet). */
.masonry-grid {
    column-count: 2;
    column-gap: 1.25rem;
}
@media (min-width: 768px) {
    .masonry-grid { column-count: 3; }
}
.masonry-item {
    display: inline-block;
    width: 100%;
    margin-bottom: 1.25rem;
    break-inside: avoid;
}
.gallery-thumb {
    transition: transform 400ms ease-out;
}
.gallery-thumb:hover {
    transform: translateY(-4px);
}
.gallery-thumb img {
    opacity: 0;
    min-height: 120px;
    transition: opacity 500ms ease-out;
}
.gallery-thumb img.loaded {
    opacity: 1;
}
.gallery-thumb .photo-frame {
    box-shadow: 0 4px 10px rgba(27, 28, 25, 0.10);
    transition: box-shadow 400ms ease-out;
}
.gallery-thumb:hover .photo-frame {
    box-shadow: 0 8px 18px rgba(27, 28, 25, 0.15);
}
@media (hover: hover) {
    .gallery-thumb .photo-frame-inner img {
        filter: grayscale(88%) contrast(1.03);
        transition: filter 600ms ease-out, transform 700ms ease-out;
    }
    .gallery-thumb:hover .photo-frame-inner img {
        filter: grayscale(0%);
        transform: scale(1.05);
    }
}

#lightbox {
    opacity: 0;
    transition: opacity 280ms ease-out;
}
#lightbox.lightbox-open {
    opacity: 1;
}
.lightbox-frame {
    position: relative;
    background: #ffffff;
    border-radius: 0.5rem;
    padding: 0.9rem;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
    max-width: 100%;
}
#lightbox-img {
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 300ms ease-out, transform 300ms ease-out;
}