@charset "utf-8";
/* CSS Document */
    .memorialCity,
    .memorialLocation {
        text-align: left;
    }

    .memorialLocation {
        margin-top: .25rem;
    }

    .memorialBackground,
    .memorialAcknowledgements {
    width: 100%;
    margin: 1rem 0;
    text-align: left;
   }

    .memorialAcknowledgements {
        font-size: .95rem;
    }

    .mainContent {
        display: flex;
        justify-content: center;
        margin: 1.5rem auto;
    }

    .memorialImage {
        width: 100%;
        max-width: 900px;
        margin: 0 auto 1.5rem;
        text-align: center;
    }

    .memorialImage img {
        display: block;
        max-width: 100%;
        height: auto;
        margin: .5rem auto;
    }

    .caption {
        text-align: center;
        font-size: .95rem;
    }

    .centeredMenu,
    .bottomMenu {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: .5rem 1rem;
    }

    .centeredMenu {
        margin: 1.5rem auto .75rem;
    }

    .centeredMenu a,
    .centeredMenu span {
        white-space: nowrap;
    }

    .futureLink {
        opacity: .65;
    }

    .memorialBottomNav {
        margin: 1rem auto 2rem;
    }
/* All Names list */
.memorialNamesTable {
    width: 100%;
    vertical-align: top;
}

.memorialNamesTable th,
.memorialNamesTable td {
    vertical-align: top;
}

.memorialNamesTable .memorialImageColumn {
    width: 150px;
}

.memorialNamesTable .memorialNameColumn {
    width: 15%;
}

.memorialNamesTable .memorialConflictColumn {
    white-space: nowrap;
}

.memorialNamesTable .memorialDateColumn {
    width: 10%;
    white-space: nowrap;
}

.memorialNamesTable .memorialListImage {
    max-height: 2in;
}

.memorialNamesTable .memorialListImage img {
    max-height: 2in;
    height: auto;
    width: auto;
    max-width: 100%;
    border: 1px solid #ccc;
}
/* Old Content */
.memorialMultiSectionLayout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Each section row: image left (50%), names right (50%) */
.memorialSectionRow {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 2rem;
  align-items: start;
}

/* --- LEFT SIDE (section images) --- */
.memorialImageCell {
  display: flex;
  flex-direction: column;    /* stack title, image, caption vertically */
  justify-content: center;   /* center vertically within the left half */
  align-items: center;       /* center horizontally */
  text-align: center;        /* ensure text (title/caption) centered too */
}
.memorialImageCell img {
  max-width: 75%;            /* limit image size within its cell */
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  object-fit: contain;
}

/* --- RIGHT SIDE (section titles and names) --- */
.memorialNamesCell {
  display: flex;
  flex-direction: column;
  align-items: center;       /* center horizontally */
  text-align: center;        /* center text */
}


/* Section title (e.g., "World War I") */
.sectionTitle {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 0.75em;
}

/* Grid for one or more columns of names */
.sectionGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem 1rem;
  width: 100%;
}

/* Individual column and names */
.memorialColumn {
  text-align: center;
}

.memorialName {
  margin: 2px 0;
  line-height: 1.3;
}
.imageTitle {
  font-weight: bold;
  text-align: center;
  margin-bottom: 0.5em;
}

.imageCaption {
  font-style: italic;
  text-align: center;
  margin-top: 0.5em;
  font-size: 0.9em;
}
/* Vertically center the right-side (names) when there’s only one section */
.memorialSectionRow {
  align-items: start; /* default */
}

/* When there’s only one section total, center content vertically beside the image */
body:has(.memorialSectionRow:nth-child(1):last-child) .memorialSectionRow {
  align-items: center;
}

body:has(.memorialSectionRow:nth-child(1):last-child) .memorialNamesCell {
  justify-content: center;  /* vertical centering inside names cell */
  align-items: center;      /* horizontal centering */
  text-align: center;
}
.single-section {
  align-items: center;
}
.single-section .memorialNamesCell {
  justify-content: center;
  align-items: center;
  text-align: center;
}
/* Make all grid rows in the memorial grid share equal height */
.memorialGrid {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;  /* or adjust to your column structure */
  grid-auto-rows: 1fr;                    /* force equal row height */
  gap: 1rem;
}
.namesCell,
.spacerCell,
.imageCell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}