/* gallery.css · the /gallery/ page only. Loaded after site.css and home.css (which carry the navy header, menu, footer and bottom bar).
   An Instagram-style tight grid: white tiles on a dark ground, a thin dark line between them.
   Two columns on phones and upright tablets (up to 1024px), three above; the same thin gap at every size.
   Every picture carries its own white border and is shown whole in a 3:4 tile: never cropped, never stretched, no filter.
   Everything here is prefixed gl-.

   Dark:   --gl-dark, the ground of the whole page and the lines between tiles.
   White:  #FEFEFE, the pictures' own border colour (measured on all 18: 254,254,254), so a tile and its picture are one surface.
   Gap:    --g, 3px: between tiles and around the grid, at every size. */

body{background:var(--gl-dark,#050A1E)}
html,body,main{--gl-dark:#050A1E}
main{
  --gl-white:#FEFEFE; --gl-text:#DDE0E9; --gl-muted:#A3ABC0;
  background:var(--gl-dark);color:var(--gl-text);
}
main :focus-visible{outline-color:var(--sea)}

/* ---------- The page's name: small, centred, then straight into the grid ----------
   Every height here is a whole number of pixels (a fixed line height, no fluid padding), so the grid below starts on a whole
   pixel and its horizontal lines stay as sharp as its vertical ones. */
.gl-intro{padding:28px 0 24px;text-align:center}
.gl-intro .gl-label{max-width:none;margin:0;padding-left:.4em;font:500 12px/14px var(--font);letter-spacing:.4em;text-transform:uppercase;color:var(--sea)}
.gl-end h2 em{display:inline-block;font-style:normal;color:var(--sea)}

/* ---------- The grid ----------
   --n columns, --g the gap. The dark ground shows through the gap as a thin line, and frames the grid by the same amount. */
.gl-wall{container-type:inline-size}
.gl-grid{--n:2;--g:3px;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--g);max-width:1280px;margin:0 auto;padding:var(--g);list-style:none}
.gl-item{min-width:0}
.gl-frame{position:relative;display:block;aspect-ratio:3 / 4;background:var(--gl-white);outline:2px solid transparent;outline-offset:0;cursor:zoom-in;-webkit-tap-highlight-color:transparent;transition:outline-color 160ms var(--ease)}
.gl-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* Pointer: a thin mint line in the gap around the tile. Keyboard: the same line plus a dark green ring just inside the tile,
   on its white border, so the focused tile is plain against both the dark gap and the white. Neither touches the photograph. */
@media (hover:hover){.gl-frame:hover{outline-color:var(--sea)}}
.gl-frame:focus-visible{outline-color:var(--sea)}
.gl-frame::after{content:"";position:absolute;inset:0;pointer-events:none}
.gl-frame:focus-visible::after{box-shadow:inset 0 0 0 3px #2C665F}
/* Tiles fade in where they stand; in a tight grid, movement would make the lines jump. */
.js .gl-item.reveal{transform:none}

/* A last row that is not full is centred, never left hanging on the left; this holds for any number of pictures.
   Two columns, one tile over: it sits in the middle. Three columns: one over takes the middle column, two over sit as a centred pair. */
@media (max-width:1024px){
  .gl-item:last-child:nth-child(odd){grid-column:1 / -1;width:calc((100% - var(--g)) / 2);margin-inline:auto}
}
@media (min-width:1025px){
  .gl-item:last-child:nth-child(3n + 1){grid-column:2}
  .gl-item:nth-last-child(2):nth-child(3n + 1),.gl-item:last-child:nth-child(3n + 2){position:relative;left:calc((100% + var(--g)) / 2)}
}

/* Whole pixels. A third or a half of the screen is rarely a whole number of pixels, and a tile that ends between two pixels makes
   the lines beside it blurred or uneven. Where the browser can do the sum, every tile is a whole number of pixels wide and tall
   and starts on a whole pixel, so every line is exactly --g. (The spare pixel or two goes to the right-hand edge of the frame.)
   A tile may then be a fraction of a pixel off 3:4; the picture is still shown whole, on the tile's own white. */
@supports (width:round(down,1cqw,1px)){
  .gl-grid{
    --w:round(down,(min(100cqw,1280px) - (var(--n) + 1) * var(--g)) / var(--n),1px);
    --row:calc(var(--n) * var(--w) + (var(--n) - 1) * var(--g));
    max-width:none;margin:0;
    grid-template-columns:repeat(var(--n),var(--w));justify-content:start;
    padding:var(--g) 0 var(--g) round(down,(100cqw - var(--row)) / 2,1px);
  }
  .gl-frame{aspect-ratio:auto;height:round(nearest,var(--w) * 4 / 3,1px)}
  /* the centred last row, on whole pixels too */
  @media (max-width:1024px){
    .gl-item:last-child:nth-child(odd){width:var(--w);margin-inline:round(down,(var(--w) + var(--g)) / 2,1px) 0}
  }
  @media (min-width:1025px){
    .gl-item:nth-last-child(2):nth-child(3n + 1),.gl-item:last-child:nth-child(3n + 2){left:round(down,(var(--w) + var(--g)) / 2,1px)}
  }
}

/* ---------- Closing: one action ---------- */
.gl-end{padding:64px 0 88px;text-align:center}
.gl-end h2{max-width:none;margin:0;font-size:clamp(34px,10vw,44px);line-height:1;color:#fff}
.gl-end-sub{margin:14px 0 28px;font:400 17px/1.5 var(--font);color:var(--gl-text)}
.gl-end .gl-end-btn{width:100%;max-width:342px;min-height:56px;background:var(--sea);border-color:var(--sea);color:#08102B}
@media (hover:hover){.gl-end .gl-end-btn:hover{background:#D6ECE6;border-color:#D6ECE6}}
.gl-end-text{margin:32px 0 0;font-size:17px;line-height:1.4;color:#fff}
.gl-end-text a{position:relative;padding-bottom:1px;border-bottom:1px solid var(--sea);color:var(--sea);letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.gl-end-text a::after{content:"";position:absolute;inset:-12px 0}
.gl-end-hours{margin:16px 0 0;font:500 11.5px/1.4 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--gl-muted)}

/* Bottom bar: its two buttons fit the narrowest phones (the same rule the detailing page uses) */
@media (max-width:359px){.home2 .stickybar .btn{padding:0 8px}}

/* ---------- The viewer (opened by gallery.js): the same dark ground, the picture whole on its white ---------- */
html.gl-lock{overflow:hidden}
.gl-box{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--gl-dark,#050A1E);color:#F5F4F1;overflow:hidden}
.gl-box::backdrop{background:#050A1E}
.gl-box[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;animation:gl-in 240ms var(--ease)}
.gl-box-bar,.gl-box-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px}
.gl-box-foot{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.gl-box-count{margin:0;font:500 11.5px/1 var(--font);letter-spacing:.2em;color:#A3ABC0}
.gl-box-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;padding:0;border:1px solid rgba(255,255,255,.34);border-radius:var(--r);background:none;color:#F5F4F1;cursor:pointer;transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease)}
.gl-box-btn svg{width:20px;height:20px}
.gl-box-btn:focus-visible{outline:2px solid #BFDDD5;outline-offset:3px}
@media (hover:hover){.gl-box-btn:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.72)}}
.gl-box-stage{display:flex;align-items:center;justify-content:center;min-height:0}
.gl-box-stage img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;background:#FEFEFE;opacity:0;transition:opacity 240ms var(--ease)}
.gl-box-stage img.in{opacity:1}
.gl-box-cap{margin:0;font:400 15px/1.4 var(--font);color:#C7CCDA}
.gl-box-nav{display:flex;flex:none;gap:8px}
@keyframes gl-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.gl-box[open]{animation:none}.gl-box-stage img,.gl-frame{transition:none}}

/* Tablets: the same two columns and the same gap; only the type grows. */
@media (min-width:700px){
  .gl-intro{padding:36px 0 28px}
  .gl-intro .gl-label{font-size:12.5px}
  .gl-end{padding:88px 0 112px}
  .gl-end h2{font-size:clamp(48px,6.6vw,64px)}
  .gl-end-sub{margin:18px 0 32px;font-size:19px}
  .gl-end .gl-end-btn{width:auto;max-width:none;min-width:260px}
}
/* Desktop, and tablets turned sideways: three columns. 1025px keeps every upright tablet (the widest is 1024px) on two. */
@media (min-width:1025px){
  .gl-grid{--n:3}
  .gl-intro{padding:40px 0 32px}
  .gl-end{padding:112px 0 136px}
  .gl-end h2{font-size:clamp(60px,5.4vw,80px)}
  .gl-box-bar,.gl-box-foot{padding-left:24px;padding-right:24px}
  .gl-box-cap{font-size:16.5px}
}
/* Wide, landscape screens: the enlarged picture takes almost the full height and the controls sit in the corners, clear of it.
   (The picture is at most three quarters as wide as the screen is tall, so the corners are always free.) */
@media (min-width:960px) and (min-aspect-ratio:1/1){
  .gl-box[open]{display:block}
  .gl-box-stage{position:absolute;inset:0;padding:24px 0}
  .gl-box-bar,.gl-box-foot{position:absolute;left:0;right:0;z-index:1;pointer-events:none}
  .gl-box-bar{top:0}
  .gl-box-foot{bottom:0;align-items:flex-end}
  .gl-box-bar > *,.gl-box-foot > *{pointer-events:auto}
}