/*
.main-content {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: repeat(2, 100px);
}
 */


.item-center {
  flex-grow: 1; /* Set the middle element to grow and stretch */
}

/*
.item + .item {
  margin-left: 2%;
}
 */

section {

align-items:center; 
}

figure {
    height: auto;
    width: 100%;          /* mobile-first: fill the screen */
    max-width: 100%;
    margin: 0 0 1.5em;
    align-content: center;
    }

@media only screen and (min-width: 700px) {
    figure {
    width: 80%;           /* larger on tablet and up */
    }
}


figcaption {
	font-size:.8em;
	font-style:italic;
	}


.familyphoto{
border-radius: 30%
}

.masthead {
    width:100%;
}   /* <-- was missing: the unclosed brace swallowed the rules below (fixed 03 Jul 2026) */

	/*..............RESOURCES PAGE .............*/
#masthead-resources {
    background:#000 url(../images/fl_rosefence2.jpg) 50% 60% no-repeat;
    background-size:cover;
    }

	/*..............NATURE GALLERY PAGE .............*/
#masthead-gallery-dash {
    /* Background photo removed 15 Aug 2026.
       This id wraps the page heading and intro text inside <main>,
       not a masthead banner, so the robin behind it read as grey
       bars across the copy. The cover photo for this page now comes
       from #masthead-gallery in the header, like every other gallery. */
    }


/* ============================================================
   PHOTO GRID  —  added 15 Aug 2026
   Applies to any <section> in <main> that directly holds
   <figure> elements, so every gallery picks it up with no
   change to the page files.
   1 across on a phone, 2 on a tablet, 3 on a laptop.
   Gutter is half an inch. Tiles are a uniform height using
   aspect-ratio + object-fit, so portrait and landscape shots
   sit together without a ragged edge.
   ============================================================ */

main section:has(> figure) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5in;
    align-items: start;
    }

/* headings, intro text and pull-quotes span the full width */
main section:has(> figure) > h2,
main section:has(> figure) > h3,
main section:has(> figure) > h4,
main section:has(> figure) > p,
main section:has(> figure) > aside,
main section:has(> figure) > blockquote {
    grid-column: 1 / -1;
    }

main section:has(> figure) > figure {
    width: 100%;
    max-width: 100%;
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    }

main section:has(> figure) > figure img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    max-height: none;
    display: block;
    cursor: zoom-in;
    border-radius: 2px;
    transition: filter .18s ease;
    }

main section:has(> figure) > figure img:hover,
main section:has(> figure) > figure img:focus-visible {
    filter: brightness(1.06);
    }

main section:has(> figure) > figure img:focus-visible {
    outline: 3px solid #013E39;
    outline-offset: 3px;
    }

main section:has(> figure) > figure figcaption {
    margin-top: .5em;
    font-size: .95em;
    line-height: 1.4;
    }

@media only screen and (min-width: 700px) {
    main section:has(> figure) { grid-template-columns: repeat(2, 1fr); }
}

@media only screen and (min-width: 1000px) {
    main section:has(> figure) { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- expanded view ---------- */

.fl-lightbox {
    border: 0;
    padding: 0;
    max-width: 92vw;
    max-height: 92vh;
    background: #fff;
    color: #013E39;
    }

.fl-lightbox::backdrop {
    background: rgba(1, 62, 57, .82);
    }

.fl-lightbox img {
    display: block;
    max-width: 92vw;
    max-height: 78vh;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    }

.fl-lightbox-caption {
    margin: 0;
    padding: .75em 1em;
    font-size: .95em;
    line-height: 1.45;
    }

.fl-lightbox-close {
    position: absolute;
    top: .35em;
    right: .5em;
    border: 0;
    background: rgba(255,255,255,.85);
    color: #013E39;
    font-size: 1.9em;
    line-height: 1;
    width: 1.5em;
    height: 1.5em;
    cursor: pointer;
    border-radius: 50%;
    }

.fl-lightbox-close:focus-visible {
    outline: 3px solid #013E39;
    outline-offset: 2px;
    }


/* ============================================================
   GALLERY INDEX TILES  —  added 15 Aug 2026
   The dashboard tiles use <ul class="subnav-grid"> inside <main>.
   They had no CSS at all, so every tile rendered at its own
   natural size — hence one huge photo and several small ones.
   Same 3-across grid and uniform tiles as the photo galleries.
   (The gallery sub-NAV also uses .subnav-grid, so this is scoped
   to <main> to keep the two apart.)
   ============================================================ */

main ul.subnav-grid {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5in;
    margin: 0 0 2em;
    padding: 0;
    }

main ul.subnav-grid li {
    margin: 0;
    padding: 0;
    background: transparent;
    list-style: none;
    }

main ul.subnav-grid li a {
    display: block;
    background: transparent;
    }

main ul.subnav-grid img,
main ul.subnav-grid img.catimg {
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: 2px;
    transition: filter .18s ease;
    }

main ul.subnav-grid li a:hover img,
main ul.subnav-grid li a:focus-visible img {
    filter: brightness(1.08);
    }

main ul.subnav-grid li a:focus-visible {
    outline: 3px solid #013E39;
    outline-offset: 3px;
    }

@media only screen and (min-width: 700px) {
    main ul.subnav-grid { grid-template-columns: repeat(2, 1fr); }
}

@media only screen and (min-width: 1000px) {
    main ul.subnav-grid { grid-template-columns: repeat(3, 1fr); }
}