/* ============================================================
   GALLERY — PAGE STYLES
   Shared colours/navigation: style.css and executive-summary.css
   ============================================================ */
.gallery-page {
    --gl-card-radius: 12px;       /* Album and photo corners */
    --gl-grid-gap: 25px;         /* Space between album cards */
    --gl-cover-ratio: 4 / 3;     /* Album cover crop */
    --gl-photo-ratio: 4 / 3;     /* Thumbnail crop; full-size view is uncropped */
}
.gallery-page [hidden] { display: none !important; }
.gl-hero { background: var(--navy-950); color: white; padding: 25px 0 52px; }
.gl-hero .summary-breadcrumb { margin-bottom: 40px; }
.gl-hero-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 75px; align-items: center; }
.gl-hero .summary-eyebrow { color: #91c5e3; margin-bottom: 17px; }
.gl-hero h1 { font-size: clamp(40px,4.8vw,66px); font-weight: 550; line-height: 1.08; letter-spacing: -.045em; margin: 0 0 22px; }
.gl-hero h1 > span { color: #65b5e1; }
.gl-hero-lead { font-size: clamp(20px,2vw,25px); color: #c2d2de; line-height: 1.45; letter-spacing: -.025em; margin: 0; }
.gl-hero-note { border-left: 1px solid #355066; padding-left: 32px; }
.gl-note-mark { display: block; color: #80bedf; font-size: 34px; line-height: 1; margin-bottom: 17px; }
.gl-hero-note > p { color: #d0dfe9; font-size: 20px; line-height: 1.65; letter-spacing: -.02em; margin: 0 0 23px; }
.gl-archive-count { display: flex; flex-wrap: wrap; gap: 13px; }
.gl-archive-count span { border: 1px solid #3c5b72; border-radius: 5px; color: #a8d0e8; padding: 6px 12px; font-size: 11px; font-weight: 600; }
.gl-content { padding-block: 62px 75px; scroll-margin-top: calc(var(--summary-header-height) + 24px); }
.gl-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin-bottom: 28px; }
.gl-section-heading .summary-eyebrow { margin-bottom: 15px; }
.gl-section-heading h2, .gl-active-heading h2 { font-size: clamp(29px,3vw,40px); font-weight: 550; line-height: 1.2; letter-spacing: -.035em; margin: 0; }
.gl-section-heading > p { color: var(--muted); font-size: 13px; margin: 0 0 5px; }
.gl-controls { display: grid; gap: 22px; padding: 24px; border: 1px solid var(--line); border-radius: var(--gl-card-radius); background: var(--paper); }
.gl-search { max-width: 500px; }
.gl-search label { display: block; color: var(--text); font-size: 12px; font-weight: 650; margin-bottom: 8px; }
.gl-search input { display: block; width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid #c5d4df; border-radius: 6px; background: white; color: var(--text); font-size: 14px; }
.gl-search input::placeholder { color: #728594; }
.gl-category-filters { display: flex; flex-wrap: wrap; gap: 9px; }
.gl-category-filters button { background: white; color: var(--muted); border: 1px solid #cbd8e1; border-radius: 6px; font-size: 12px; padding: 10px 14px; min-height: 43px; }
.gl-category-filters button[aria-pressed="true"] { background: var(--navy-800); border-color: var(--navy-800); color: white; }
.gl-category-filters button:hover { border-color: var(--blue); }
.gl-results-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-block: 20px; min-height: 30px; }
.gl-results-row p { color: var(--muted); font-size: 12px; margin: 0; }
.gl-reset { border: 0; background: transparent; color: var(--blue); padding: 5px; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.gl-album-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--gl-grid-gap); align-items: stretch; }
.gl-album-card { border: 1px solid var(--line); border-radius: var(--gl-card-radius); overflow: hidden; display: flex; flex-direction: column; background: white; transition: border-color 180ms, box-shadow 180ms; }
.gl-album-card:hover { border-color: #83a7be; box-shadow: var(--shadow-sm); }
.gl-cover { position: relative; background: var(--paper-2); }
.gl-cover img { display: block; width: 100%; height: auto; aspect-ratio: var(--gl-cover-ratio); object-fit: cover; object-position: center; }
.gl-photo-count { position: absolute; bottom: 12px; left: 12px; padding: 5px 10px; background: rgba(7,19,31,.86); color: white; border-radius: 5px; font-size: 10px; font-weight: 600; }
.gl-album-copy { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.gl-category { color: var(--blue); font-size: 9px; letter-spacing: .055em; text-transform: uppercase; font-weight: 650; margin: 0 0 13px; line-height: 1.7; }
.gl-album-copy h3 { font-size: 23px; font-weight: 550; line-height: 1.24; letter-spacing: -.025em; margin: 0 0 24px; }
.gl-open-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--blue); font-size: 12px; font-weight: 650; margin-top: auto; }
.gl-empty { text-align: center; padding: 58px 25px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--gl-card-radius); }
.gl-empty h3 { font-size: 25px; line-height: 1.3; margin: 0 0 13px; font-weight: 550; }
.gl-empty p { margin: 0; font-size: 14px; color: var(--muted); }
.gl-notice { border-left: 3px solid var(--blue); padding: 16px 20px; background: var(--blue-light); color: var(--navy-800); font-size: 13px; margin: 0 0 23px; }
.gl-back { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 650; color: var(--blue); margin-bottom: 30px; padding-block: 6px; }
.gl-active-heading { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.gl-active-heading > div { max-width: 900px; }
.gl-active-heading .summary-eyebrow { margin-bottom: 16px; }
.gl-active-count { border: 1px solid var(--line); border-radius: 5px; font-size: 12px; padding: 8px 13px; white-space: nowrap; color: var(--blue); background: var(--blue-light); }
.gl-album-hint { color: var(--muted); font-size: 13px; margin: 20px 0 29px; }
.gl-image-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.gl-photo-tile { border: 1px solid var(--line); border-radius: var(--gl-card-radius); overflow: hidden; background: var(--paper); }
.gl-photo-tile img { display: block; width: 100%; height: auto; aspect-ratio: var(--gl-photo-ratio); object-fit: cover; }
.gl-photo-tile:hover { border-color: var(--blue); }
.gl-tile-label { display: block; padding: 12px 15px; font-size: 11px; font-weight: 650; color: var(--blue); }
.gl-no-script { padding: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--gl-card-radius); }
.gl-no-script details { padding-block: 14px; border-bottom: 1px solid var(--line); }
.gl-no-script summary { cursor: pointer; color: var(--blue); font-weight: 600; }
.gl-no-script details div { display: flex; flex-wrap: wrap; gap: 15px; padding-top: 15px; }
.gl-no-script details a { text-decoration: underline; color: var(--blue); }
/* Native modal viewer: photos are contained, preserving the full image. */
.gl-viewer-open { overflow: hidden; }
.gl-dialog { width: min(1120px,calc(100vw - 44px)); max-width: none; max-height: calc(100dvh - 36px); padding: 0; border: 1px solid #385168; border-radius: 12px; background: #091725; color: white; margin: auto; overflow: auto; }
.gl-dialog:not([open]) { display: none; }
.gl-dialog[open] { display: flex; flex-direction: column; }
.gl-dialog::backdrop { background: rgba(2,9,15,.88); }
.gl-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; padding: 18px 23px; border-bottom: 1px solid #304657; }
.gl-dialog-eyebrow { color: #9ac5df; font-size: 9px; letter-spacing: .1em; font-weight: 650; margin: 0 0 6px; }
.gl-dialog-header h2 { font-size: 18px; font-weight: 500; line-height: 1.4; margin: 0; letter-spacing: -.015em; }
.gl-close { flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid #658398; border-radius: 50%; background: transparent; color: white; font-size: 26px; line-height: 1; }
.gl-close:hover { background: #1e3b51; }
.gl-image-stage { position: relative; background: #050d15; min-height: 170px; display: grid; place-items: center; padding: 15px 64px; }
.gl-image-stage > img { display: block; max-width: 100%; width: auto; height: auto; max-height: 65dvh; object-fit: contain; }
.gl-viewer-arrow { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid #7892a4; border-radius: 50%; background: rgba(9,23,37,.9); color: white; font-size: 21px; }
.gl-viewer-arrow:hover:not(:disabled) { background: #214765; }
.gl-viewer-arrow:disabled { opacity: .3; cursor: default; }
.gl-viewer-prev { left: 12px; }
.gl-viewer-next { right: 12px; }
.gl-viewer-error { max-width: 420px; margin: 15px; text-align: center; font-size: 14px; color: white; }
.gl-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 23px; border-top: 1px solid #304657; }
.gl-dialog-footer p { margin: 0; color: #c6d8e5; font-size: 12px; }
.gl-dialog-footer > div { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.gl-dialog-footer a { color: #b5ddf5; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1100px) {
    .gl-hero-grid { gap: 36px; }
    .gallery-page { --gl-grid-gap: 20px; }
    .gl-album-copy { padding: 20px; }
    .gl-album-copy h3 { font-size: 21px; }
}
@media (max-width: 900px) {
    .gl-hero-grid { gap: 26px; }
    .gl-hero-note { padding-left: 25px; }
    .gl-hero-note p { font-size: 17px; }
    .gl-album-grid, .gl-image-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .gl-section-heading { align-items: flex-start; flex-direction: column; gap: 15px; }
    .gl-content { padding-block: 42px 50px; }
}
@media (max-width: 600px) {
    .gl-hero { padding-bottom: 36px; }
    .gl-hero .summary-breadcrumb { margin-bottom: 28px; }
    .gl-hero-grid { grid-template-columns: 1fr; gap: 28px; }
    .gl-hero h1 { font-size: 44px; }
    .gl-hero-note { border-left: 0; border-top: 1px solid #355066; padding: 22px 0 0; }
    .gl-note-mark { display: none; }
    .gl-controls { padding: 20px; }
    .gl-category-filters { gap: 8px; }
    .gl-category-filters button { font-size: 11px; padding: 9px 11px; }
    .gl-album-grid { grid-template-columns: 1fr; gap: 22px; }
    .gl-album-copy h3 { font-size: 24px; }
    .gl-image-grid { gap: 12px; }
    .gl-tile-label { font-size: 10px; padding: 10px 12px; }
    .gl-active-heading { align-items: flex-start; flex-direction: column; gap: 17px; }
    .gl-active-heading h2 { font-size: 29px; }
    .gl-back { margin-bottom: 23px; }
    .gl-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); }
    .gl-dialog-header { padding: 15px; gap: 15px; }
    .gl-dialog-header h2 { font-size: 16px; }
    .gl-image-stage { padding: 15px 0; }
    .gl-image-stage > img { max-height: 59dvh; }
    .gl-viewer-arrow { width: 40px; height: 40px; }
    .gl-viewer-prev { left: 7px; }
    .gl-viewer-next { right: 7px; }
    .gl-dialog-footer { padding: 15px; flex-direction: column; align-items: flex-start; gap: 12px; }
    .gl-dialog-footer > div { gap: 15px; }
}