/* Janes Lodge: Images and Videos pages
   Uses the theme's own palette: slate #4A4C57, gold #DFAC50, rust #842D09. */

.jl-media,
.jl-lightbox {
  --jl-slate: #4a4c57;
  --jl-slate-dark: #2b2c33;
  --jl-gold: #dfac50;
  --jl-rust: #842d09;
  --jl-mist: #f1f1f2;
  --jl-rule: #d1d5db;
}
.jl-media {
  color: var(--jl-slate);
  width: 100%;
}

.jl-intro {
  max-width: 38rem;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 3rem;
}

.jl-section { margin-bottom: 4rem; }
.jl-section:last-child { margin-bottom: 0; }

.jl-section__title {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
  padding-bottom: .625rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--jl-rule);
}

.jl-link {
  color: var(--jl-rust);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(132, 45, 9, .35);
  text-underline-offset: .2em;
}
.jl-link:hover { text-decoration-color: currentColor; }

/* Focus rings: the theme removes outlines globally, so draw our own */
.jl-media a:focus-visible,
.jl-media button:focus-visible,
.jl-lightbox button:focus-visible,
.jl-media video:focus-visible {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--jl-gold);
  border-radius: .25rem;
}

/* ---------- Photo tiles ---------- */
.jl-tile {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--jl-mist);
  cursor: zoom-in;
  overflow: hidden;
  border-radius: .25rem;
}
.jl-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  transition: opacity .2s ease;
}
.jl-tile:hover img { opacity: .85; }

/* The lodge: daytime photo, night photo and brochure on top, three photos below.
   The brochure keeps its exact shape (it has text to the edges) and sets the row height;
   the photos beside it fill that height. */
.jl-lodge {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.jl-lodge .jl-tile { position: relative; }
.jl-lodge .jl-tile:first-child { grid-column: 1 / -1; }
.jl-lodge .jl-tile:first-child img { aspect-ratio: 4 / 3; }
.jl-lodge .jl-tile:nth-child(2) img { position: absolute; inset: 0; }
.jl-lodge .jl-tile:nth-child(3) img { aspect-ratio: 904 / 1280; }
.jl-lodge .jl-tile:nth-child(n+4) img { aspect-ratio: 4 / 3; }
.jl-lodge .jl-tile:last-child { grid-column: 1 / -1; }
.jl-lodge .jl-tile:last-child img { aspect-ratio: 2 / 1; }
@media (min-width: 768px) {
  .jl-lodge { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .75rem; }
  .jl-lodge .jl-tile { grid-column: span 4; }
  .jl-lodge .jl-tile:first-child { grid-column: span 6; }
  .jl-lodge .jl-tile:first-child img { position: absolute; inset: 0; aspect-ratio: auto; }
  .jl-lodge .jl-tile:nth-child(2),
  .jl-lodge .jl-tile:nth-child(3) { grid-column: span 3; }
  .jl-lodge .jl-tile:last-child { grid-column: span 4; }
  .jl-lodge .jl-tile:last-child img { aspect-ratio: 4 / 3; }
}

/* Rooms: one plain grid of photos */
.jl-room-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}
@media (min-width: 768px) {
  .jl-room-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
}

/* Restaurant and conference hall */
.jl-venues {
  display: grid;
  gap: .5rem;
}
@media (min-width: 640px) {
  .jl-venues { grid-template-columns: 1fr 1fr; gap: .75rem; }
}
.jl-venues .jl-tile img { aspect-ratio: 3 / 2; }

/* ---------- Lightbox ---------- */
.jl-lightbox {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(30, 31, 36, .96);
  color: #fff;
}
.jl-lightbox::backdrop { background: rgba(30, 31, 36, .96); }
.jl-lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.jl-lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: calc(100% - 2rem);
}
@media (min-width: 768px) {
  .jl-lightbox__figure { max-width: calc(100% - 10rem); }
}
.jl-lightbox__img {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  object-fit: contain;
  border-radius: .25rem;
  background: #000;
}
.jl-lightbox__caption {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  width: 100%;
  margin-top: .875rem;
  font-size: .9375rem;
  line-height: 1.4;
}
.jl-lightbox__count {
  flex-shrink: 0;
  color: var(--jl-gold);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.jl-lightbox__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
}
.jl-lightbox__btn:hover { background: var(--jl-gold); color: var(--jl-slate-dark); }
.jl-lightbox .jl-lightbox__btn:focus-visible { border-radius: 999px; box-shadow: 0 0 0 3px var(--jl-gold); }
.jl-lightbox__btn svg { width: 1.5rem; height: 1.5rem; }
.jl-lightbox__close { top: 1rem; right: 1rem; }
.jl-lightbox__prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.jl-lightbox__next { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 767.98px) {
  /* On phones the arrows sit below the photo, out of the way */
  .jl-lightbox__prev, .jl-lightbox__next { top: auto; bottom: 1rem; transform: none; }
}
html.jl-lightbox-open, html.jl-lightbox-open body { overflow: hidden; }

/* ---------- Videos ----------
   Phone videos are vertical (9:16). 2 across on phones, 3 on tablets, 4 on desktop;
   an incomplete last row is centred. */
.jl-vids {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  --jl-cols: 2;
}
@media (min-width: 768px)  { .jl-vids { --jl-cols: 3; gap: 1rem; } }
@media (min-width: 1024px) { .jl-vids { --jl-cols: 4; } }
.jl-vid {
  flex: 0 0 calc((100% - (var(--jl-cols) - 1) * .75rem) / var(--jl-cols));
  aspect-ratio: 9 / 16;
  border-radius: .25rem;
  overflow: hidden;
  background: var(--jl-slate-dark);
}
@media (min-width: 768px) {
  .jl-vid { flex-basis: calc((100% - (var(--jl-cols) - 1) * 1rem) / var(--jl-cols)); }
}
.jl-vid video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

@media (prefers-reduced-motion: reduce) {
  .jl-tile img { transition: none; }
}