/* ============================================================
   WMC House — Information
   Practical copy, hours, address and contact on the left; the
   room on the right. Took over the homepage slot the Menus
   block held, and absorbed the old Visit section.
   ============================================================ */

/* === Two columns ===
   The gallery gets the wider half. The copy column is the reading measure and
   does not want to be any wider than it already is. */
.info { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: start; }

.info__para { margin-bottom: 1.1rem; }
.info__para:last-of-type { margin-bottom: 0; }

/* === Address and contact === */
.info__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-3); margin-top: var(--s-3); }
.info__k { color: var(--ink-soft); margin-bottom: .55rem; }
.info__v { font-style: normal; }

/* === Hours ===
   Service on the left, time on the right, a dotted leader between them — a
   menu line, which is the one piece of typography every guest already knows
   how to read. Set at body size: the old rows were t-small only because
   repeating "Monday to Sunday" on every line left no room for anything bigger,
   and the days now live in the heading instead. */
.info__hours { margin-top: var(--s-3); }
.info__slot { display: flex; align-items: baseline; gap: .6rem; padding: .3rem 0; }
.info__slot__k { flex: 0 0 auto; }
/* --rule is 20% ink, which is right for a hairline running the width of the
   page and too faint for a dotted leader a few centimetres long. */
.info__slot__lead { flex: 1 1 auto; border-bottom: 1px dotted color-mix(in srgb, var(--ink) 38%, transparent); transform: translateY(-.28em); }
.info__slot__v { flex: 0 0 auto; white-space: nowrap; }

/* The number is the visible text; this says where it goes. */
.info__wa { color: var(--ink-soft); margin-left: .5rem; }

/* Book a table and Follow on Instagram close the block together. Wrapping is
   allowed: at the narrow end of the column two labels this long do not share
   a line, and a squeezed pair reads worse than a stacked one. */
.info__act { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--s-3); }

/* === The room ===
   Twelve columns and two proportional rows: 4+8 across the top, then four
   equal below. Row heights come from the fr units and the container ratio, so
   the two images in the top row are always exactly the same height — setting
   an aspect-ratio on each figure instead made the wide one taller than the
   narrow one by however much the gap was. */
.info__gal { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 5fr 3fr; gap: clamp(.4rem, .8vw, .75rem); aspect-ratio: 12 / 8.6; }
.info__gal figure { overflow: hidden; border-radius: var(--radius); background: var(--dark); }

/* The tile is a button now. Reset the UA chrome and let the image fill it. */
.info__gal__btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.info__gal__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.info__gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.info__gal figure:hover img { transform: scale(1.05); }
.info__gal figure:nth-child(1) { grid-column: span 4; }
.info__gal figure:nth-child(2) { grid-column: span 8; }
.info__gal figure:nth-child(n+3) { grid-column: span 3; }

/* Fewer than six pictures cannot fill that composition, so it stops trying. */
.info__gal--few { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; aspect-ratio: auto; }
.info__gal--few figure { grid-column: auto !important; aspect-ratio: 1; }

/* === Narrow === */
@media (max-width: 860px) {
	.info { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
	/* Six pictures at half a phone screen each are stamps. Two columns, square,
	   which is the same fallback the old gallery used. */
	.info__gal { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; aspect-ratio: auto; }
	.info__gal figure { grid-column: auto !important; aspect-ratio: 1; }
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
	.info__gal img { transition: none; }
	.info__gal figure:hover img { transform: none; }
}

/* ============================================================
   Lightbox
   Deliberately NOT full screen. These pictures are cropped to
   fill the grid and some of the originals are small; blowing a
   900px photograph up to fill a 27in display makes it worse,
   not bigger. The box shrink-wraps the image at its own size,
   capped by the viewport, on a scrim.
   ============================================================ */
.lb { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); }
.lb[hidden] { display: none; }
.lb__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--dark) 86%, transparent); cursor: zoom-out; }

.lb__box { position: relative; max-width: 100%; max-height: 100%; display: grid; justify-items: center; gap: .75rem; }
.lb__fig { max-width: 100%; max-height: 100%; border-radius: var(--radius); overflow: hidden; background: var(--dark); line-height: 0; }

/* width/height auto is what keeps a small picture small — max-* alone would
   still let the image scale up to the cap. */
.lb__img { display: block; width: auto; height: auto; max-width: min(1100px, 90vw); max-height: 78vh; }

.lb__count { color: var(--on-dark-soft); }

.lb__btn { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--rule-dark); border-radius: var(--radius); background: color-mix(in srgb, var(--dark) 55%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: var(--on-dark); cursor: pointer; transition: background .3s ease, border-color .3s ease; }
.lb__btn:hover { background: var(--dark); border-color: var(--on-dark); }
.lb__btn:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 3px; }
.lb__btn svg { width: 22px; height: 22px; }
.lb__btn--prev { left: clamp(-3.5rem, -4vw, -.5rem); top: 50%; transform: translateY(-50%); }
.lb__btn--next { right: clamp(-3.5rem, -4vw, -.5rem); top: 50%; transform: translateY(-50%); }
.lb__btn--close { top: -3.5rem; right: 0; }

/* On a narrow screen there is no room beside the picture, so the controls come
   inside it and the close button sits above. */
@media (max-width: 860px) {
	.lb__img { max-width: 92vw; max-height: 68vh; }
	.lb__btn--prev { left: .5rem; }
	.lb__btn--next { right: .5rem; }
	.lb__btn--close { top: -3.25rem; right: 50%; transform: translateX(50%); }
}

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