/* /gallery: the photo gallery and its full-size viewer.
   Built on the tokens in industry-pages.css; the homepage photo band has its
   own rules in site-chrome.css (.ac-photos). */

/* ---------- hero ----------
   Unlike .page-hero, which runs its photograph at 28% under a full-frame
   scrim, the picture is the point here, so the scrim covers the copy and
   nothing else. It is drawn on the copy block itself (::before), not on the
   frame: the copy is twice as tall on a phone as on a desktop, and a
   frame-relative gradient that cleared the water on desktop left the headline
   at 2.3:1 on a 390px screen. Anchored to the block, the dark ground starts a
   fixed distance above the eyebrow at every width, and the water above it
   keeps its colour. */
.gl-hero{position:relative;isolation:isolate;overflow:hidden;background:#0B3B57;color:hsl(var(--pearl));min-height:min(80vh,46rem);display:flex;align-items:flex-end}
.gl-hero__media{position:absolute;inset:0;z-index:-2}
.gl-hero__media picture{display:contents}
.gl-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.gl-hero__inner{position:relative;padding-top:9rem;padding-bottom:3rem}
.gl-hero__inner::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;pointer-events:none;background:linear-gradient(to bottom,rgba(7,26,43,0) 0,rgba(7,26,43,.55) 4rem,rgba(7,26,43,.86) 7.5rem,rgba(7,26,43,.9) 100%)}
@media(min-width:768px){
  .gl-hero__inner{padding-bottom:4rem}
  /* From tablet up the copy is a left column, so the ground falls off to the
     right as well and the right of the frame keeps the water. Stops are
     offsets from the column's left edge, max(3rem, 50vw - 36rem), which is
     where .container-wide puts the text at every width. The top fade moves
     to a mask so the two directions do not stack into a darker corner. */
  .gl-hero__inner::before{
    background:linear-gradient(to right,rgba(7,26,43,.9) 0,rgba(7,26,43,.86) calc(max(3rem,50vw - 36rem) + 38rem),rgba(7,26,43,.5) calc(max(3rem,50vw - 36rem) + 50rem),rgba(7,26,43,0) calc(max(3rem,50vw - 36rem) + 64rem));
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7.5rem);
    mask-image:linear-gradient(to bottom,transparent 0,#000 7.5rem);
  }
}
.gl-hero .eyebrow{color:hsl(var(--accent-on-dark))}
.gl-hero h1{max-width:44rem;margin-top:.9rem;color:hsl(var(--pearl))}
.gl-hero__desc{margin-top:1.25rem;max-width:40rem;font-size:1.0625rem;line-height:1.6;color:hsl(var(--pearl) / .9)}
@media(min-width:768px){.gl-hero__desc{font-size:1.125rem}}
.gl-jump{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem}
.gl-jump a{display:inline-flex;align-items:center;min-height:44px;padding:.45rem 1rem;border:1px solid hsl(var(--pearl) / .5);border-radius:999px;color:hsl(var(--pearl));font-size:.9rem;font-weight:500;background:rgba(7,26,43,.25);transition:background .2s,border-color .2s}
.gl-jump a:hover,.gl-jump a:focus-visible{color:hsl(var(--pearl));background:rgba(247,244,237,.14);border-color:hsl(var(--pearl))}

/* ---------- sections ---------- */
.gl-section{padding-block:3.5rem;scroll-margin-top:74px}
@media(min-width:768px){.gl-section{padding-block:4.5rem}}
.gl-section--tint{background:hsl(var(--secondary))}
.gl-section__head{margin-bottom:1.75rem;max-width:44rem}
.gl-section__head h2{margin-top:.6rem}
.gl-section__lead{margin-top:.75rem;color:hsl(var(--muted-foreground));font-size:1.0625rem;line-height:1.6}

/* ---------- grid ----------
   One column on phones, each photo at its own proportion. From 700px the grid
   switches to fixed-height rows so mixed landscape and portrait frames tile
   without gaps: --wide spans two columns, --tall two rows, --feature both. */
.gl-grid{display:grid;gap:12px;grid-template-columns:1fr;margin:0;padding:0;list-style:none}
.gl-item{position:relative;margin:0;overflow:hidden;border-radius:6px;background:hsl(var(--muted))}
.gl-link{display:block;height:100%;color:inherit}
.gl-link picture{display:contents}
.gl-item img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.gl-item--tall img{aspect-ratio:4/5}
.gl-link:hover img,.gl-link:focus-visible img{transform:scale(1.035)}
.gl-link:focus-visible{outline:3px solid hsl(var(--accent));outline-offset:-3px}
.gl-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.5rem 1rem .85rem;background:linear-gradient(to top,rgba(7,26,43,.86),rgba(7,26,43,0));color:#F7F4ED;font-size:.875rem;line-height:1.4;pointer-events:none}
@media(min-width:700px){
  .gl-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(190px,26vw,300px);grid-auto-flow:dense}
  .gl-item img{height:100%;aspect-ratio:auto}
  .gl-item--wide{grid-column:span 2}
  .gl-item--tall{grid-row:span 2}
  .gl-item--feature{grid-column:span 2;grid-row:span 2}
}
@media(min-width:1024px){
  .gl-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(200px,20vw,290px)}
}
@media(prefers-reduced-motion:reduce){.gl-item img{transition:none}.gl-link:hover img,.gl-link:focus-visible img{transform:none}}

/* The text panel beside the Bahama Banks photograph. */
.gl-note{display:flex;flex-direction:column;gap:.85rem;padding:1.5rem;border:1px solid hsl(var(--border));border-radius:6px;background:hsl(var(--card))}
.gl-note__lead{font-family:var(--font-display);font-size:1.35rem;font-weight:600;line-height:1.2;color:hsl(var(--foreground))}
.gl-note p:not(.gl-note__lead){color:hsl(var(--muted-foreground));line-height:1.6}
.gl-note__link{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-weight:600;color:hsl(var(--primary))}
@media(min-width:700px){.gl-note{grid-column:span 2}}
@media(min-width:1024px){.gl-note{grid-column:span 1;grid-row:span 2;padding:2rem;justify-content:center}}

.gl-cta-wrap{padding-block:3.5rem 4.5rem}

/* ---------- full-size viewer ---------- */
html.gl-locked{overflow:hidden}
.gl-viewer{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(5,16,26,.96);color:#F7F4ED;overflow:hidden}
.gl-viewer::backdrop{background:rgba(5,16,26,.9)}
.gl-viewer[open]{display:flex;align-items:center;justify-content:center}
.gl-viewer__frame{margin:0;display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%;height:100%;padding:3.75rem 1rem 1.25rem}
@media(min-width:768px){.gl-viewer__frame{padding:3.5rem 5.5rem 1.5rem}}
.gl-viewer__media{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.gl-viewer__media picture{display:contents}
.gl-viewer__media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:3px;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.gl-viewer__caption{max-width:48rem;text-align:center;font-size:.95rem;line-height:1.45;color:rgba(247,244,237,.9)}
.gl-viewer__count{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;color:rgba(247,244,237,.6);margin-right:.5rem}
.gl-viewer__btn{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid rgba(247,244,237,.35);border-radius:999px;background:rgba(5,16,26,.55);color:#F7F4ED;cursor:pointer;transition:background .2s,border-color .2s}
.gl-viewer__btn:hover,.gl-viewer__btn:focus-visible{background:rgba(247,244,237,.16);border-color:#F7F4ED}
.gl-viewer__btn:focus-visible{outline:2px solid #F7F4ED;outline-offset:2px}
.gl-viewer__btn--close{top:.75rem;right:.75rem}
.gl-viewer__btn--prev{left:.75rem;top:50%;transform:translateY(-50%)}
.gl-viewer__btn--next{right:.75rem;top:50%;transform:translateY(-50%)}
@media(max-width:767px){
  /* On a phone the arrows would sit on the photograph; drop them to the
     bottom corners, level with the caption. Swiping works as well. */
  .gl-viewer__frame{padding-bottom:4.5rem}
  .gl-viewer__btn--prev,.gl-viewer__btn--next{top:auto;bottom:.85rem;transform:none}
}