/* THE ROOM PAGE, shared by all ten addresses.
   Loaded by shell.js for any page that carries a `location` and is not a menu
   page, together with menu.css, because the card now sits on this page.

   Rewritten 2026-09-01 with src/lib/locpage.js: hero, card, telephone,
   gallery, and nothing else. Every rule that dressed the old hour-by-hour
   chapters went with the ten per-page stylesheets it lived in.

   Vocabulary is base.css: no border-radius, hairlines, serif display, the text
   face for everything that is not a headline. */

/* ------------------------------------------------------------------ rhythm */

.sec--card { --pad: clamp(96px, 12vh, 176px); }
.sec--gal  { --pad: clamp(88px, 11vh, 156px); }

/* On a room page the card is a chapter of the page, not the document itself,
   so its title drops from the h1 scale menu.css set it at. */
.sec--card .mn-h { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3.4rem); }
.sec--card .mn-head { max-width: 46ch; margin-bottom: clamp(34px, 5vh, 60px); }
.sec--card .mn-count { margin-top: clamp(16px, 2.4vh, 26px); }

/* --------------------------------------------------------- the telephone
   The last thing under the card, because that is where she put it. One label,
   the number at reading scale, one action. Ranged left on the same edge as
   everything above it, never centred and never boxed. */

.rm-call {
  margin-top: clamp(52px, 7vw, 96px);
  padding-top: clamp(26px, 3.4vw, 40px);
  border-top: 1px solid var(--hair);
  display: grid;
  justify-items: start;
  gap: clamp(12px, 1.6vw, 18px);
}
.rm-call-l {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--lume-3);
  margin: 0;
}
.rm-call-n {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--lume);
  transition: color .3s;
}
.rm-call-n:hover { color: #fff; }
.rm-call p { margin: 0; }
.rm-call-w { display: flex; align-items: center; gap: clamp(14px, 2vw, 22px); flex-wrap: wrap; }

/* ------------------------------------------------------------- the gallery
   The photographs and nothing else. The label is the only word in the section
   and it is set in the quiet register, not as a chapter headline: the section
   is the pictures. */

.rm-gal-h {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--lume-3);
  margin: 0 0 clamp(26px, 3.6vw, 44px);
  padding-bottom: clamp(14px, 1.8vw, 20px);
  border-bottom: 1px solid var(--hair);
}
.rm-gal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}
.rm-g { margin: 0; --ar: 4 / 5; }
.rm-g img {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--ar);
  object-fit: cover;
}
/* EVERY ROW IS FULL. 03.09.2026, her review of the galleries: „sad imamo
   jednu sliku u zadnjem redu i onda još dvije ili jedna velika slika fale,
   ovaj prostor je prazan (...) da za svaku stranicu bude dovoljno slika tako
   da popune do zadnjeg reda, da to ima neki pregled fini kad se gleda na
   laptopu."

   The old rule, every third picture two columns wide, summed to FOUR columns
   per three pictures on a THREE column grid: from the sixth picture on a row
   was left with a hole, and any count that was not a multiple of three ended
   on an orphan. The vocabulary stays, one wide 16:10 frame and 4:5 portraits,
   but the period is now SEVEN pictures in three full rows (2+1, 1+2, 1+1+1),
   and the last one to six pictures of a gallery are re-dealt so that the tail
   is full as well. With the count written modulo seven:

     7n+1   ... [5 5][6] / [7][8 8]      the fifth from the end widens
     7n+2   ... [8 8][9]                 full as it is
     7n+3   ... [8][9][10]               the third from the end stays narrow
     7n+4   ... [8 8][9] / [10][11 11]   full as it is
     7n+5   ... [8 8][9] / [10][11][12]  the second from the end stays narrow
     7n+6   ... [8 8][9] / [10][11 11] / [12 12][13]  the second from the end widens

   Checked by hand for every count from one to fourteen. Only the desktop
   grid needs this: the two column grid below has a period of three pictures
   in two rows and only ever strands a 3n+2 tail. */
@media (min-width: 901px) {
  .rm-g:nth-child(7n + 1),
  .rm-g:nth-child(7n + 4) { grid-column: span 2; --ar: 16 / 10; }
  .rm-g:nth-child(7n + 5):nth-last-child(4) { grid-column: span 2; --ar: 16 / 10; }
  .rm-g:nth-child(7n + 1):nth-last-child(3) { grid-column: span 1; --ar: 4 / 5; }
  .rm-g:nth-child(7n + 4):nth-last-child(2) { grid-column: span 1; --ar: 4 / 5; }
  .rm-g:nth-child(7n + 5):nth-last-child(2) { grid-column: span 2; --ar: 16 / 10; }
  /* a gallery of one picture is the whole row */
  .rm-g:first-child:last-child { grid-column: span 3; --ar: 21 / 9; }
}

@media (min-width: 561px) and (max-width: 900px) {
  .rm-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rm-g:nth-child(3n + 1) { grid-column: span 2; --ar: 16 / 10; }
  /* a count of 3n+2 would end on an orphan: the last one widens */
  .rm-g:nth-child(3n + 2):last-child { grid-column: span 2; --ar: 16 / 10; }
}

@media (max-width: 560px) {
  .rm-gal { grid-template-columns: minmax(0, 1fr); }
  .rm-g { --ar: 4 / 3; }
}

/* --------------------------------------------------- the hero, lifted
   03.09.2026, her review: „Za sve glavne slike lokala, malo manje overlay na
   glavnu sliku, da je upečatljiviji vizualni efekat. Ne potpuno izbrisati,
   samo smanjiti."

   Two things darken a room hero, not one: page.css puts `brightness(.74)` on
   the photograph itself AND lays the two-gradient veil over it, so the losses
   compound. Both are eased here, and only here: this file loads for a page
   that carries a location, so the home, kitchen and celebrations heroes keep
   the veil they were composed with.

   The bottom band is eased LEAST, on purpose. The thesis is bottom aligned
   (`align-content: end` in page.css), so 70% down and lower is where the
   headline, the lede and the two actions actually sit, and it is also the
   join with the ink ground of the section below. Measured on the ten heroes:
   the type keeps roughly the ground it had, while the top two thirds of the
   picture, which carried no text and no join, opens up.

   EASED A SECOND TIME the same afternoon, 03.09.2026, on her voice note: „da
   li si uspeo malo da smanjiš ovaj overlay (...) deluje mi da je malo tamnije
   i dalje, ali možda bi, ako bi mogli malo da smanjimo ovaj opacity, da nije
   ovoliko zatamnjen, ali ne potpuno da ga skinemo. Da se malo jasnije vidi."
   Roughly another third off every stop above the headline, a fifth off the
   band the type sits on, and the join at the very bottom left alone so the
   photograph still runs into the ink of the section below without an edge.
   The brightness filter is nearly neutral now; the veil does the work. */

.hero-ph img,
.hero-ph video,
.hero video {
  filter: saturate(.9) contrast(1.04) brightness(.94) !important;
}

.hero-veil {
  background:
    linear-gradient(180deg,
      rgba(8, 9, 11, .50) 0%, rgba(8, 9, 11, .36) 7%, rgba(8, 9, 11, .22) 15%,
      rgba(8, 9, 11, .15) 24%, rgba(8, 9, 11, .13) 33%, rgba(8, 9, 11, .16) 46%,
      rgba(8, 9, 11, .18) 58%, rgba(8, 9, 11, .30) 69%, rgba(8, 9, 11, .48) 80%,
      rgba(8, 9, 11, .72) 91%, rgba(8, 9, 11, .96) 100%),
    linear-gradient(96deg,
      rgba(8, 9, 11, .46) 0%, rgba(8, 9, 11, .32) 13%, rgba(8, 9, 11, .19) 26%,
      rgba(8, 9, 11, .09) 39%, rgba(8, 9, 11, .03) 52%, rgba(8, 9, 11, 0) 65%);
}