/* ==========================================================================
   The public pages: Info and Contact.

   Both are built the same way:
   - the photograph first, full bleed, with the top bar resting on it;
   - then the words on the plaster wall: a title on the left, and on the right
     a short list drawn with hairlines (the facts, or the ways to reach us).

   On a phone everything becomes one column, in the same order.
   Colours, type and buttons come from base.css; nothing here invents a new one.
   ========================================================================== */

/* The top bar belongs to the photograph: it scrolls away with it, so it never
   rides over the words further down. (Contact passes tone="light": the hall is dark.) */
.page-public .topbar { position: absolute; }

/* The photograph ------------------------------------------------------------ */
.public__plate { height: 60svh; min-height: 20rem; max-height: 52rem; }
/* Wide screens: on the very wide ones (16:9 and beyond) 60% of the height would be a thin strip of
   the picture, so the frame grows with the width — but never past 68% of the screen's height,
   so the title always starts on the first screen. */
@media (min-aspect-ratio: 11/10) {
  .public__plate { height: clamp(60svh, 36vw, 68svh); max-height: none; }
}
.public__plate picture { display: block; height: 100%; }
/* What shows while the picture loads: mist outside, timber inside (the bar stays readable). */
.page-info .public__plate { background: #cfd1d4; }
.page-contact .public__plate { background: #5a3f30; }

/* How the two pictures are hung.
   On a wide screen the picture is as wide as the page and taller than its frame, so we choose
   how far it hangs above the frame. `object-position: 50% <length>` does that: a negative length
   lifts the picture. The lengths below are "where the bar should rest" minus "how far down the
   picture that place is" (the picture is 55.8vw tall, so 27.5% of its height is 15.35vw).
   max(100%, …) stops the lift once the bottom of the picture reaches the bottom of the frame. */

/* The pavilion: the top of its door (27.5% down the picture) sits one bar-height below the top of
   the frame, so the name in the bar rests on the boards above the door and never on the door itself.
   The stepping stones keep the foot of the frame. */
.page-info .public__plate img { object-position: 50% max(100%, calc(var(--bar) - 15.35vw)); }

/* The hall: the middle of the bar meets the dark wall above the window (21.5% down the picture),
   below the two ceiling lamps and above the bright glass. */
.page-contact .public__plate img { object-position: 50% max(100%, calc(var(--bar) / 2 - 12vw)); }
/* Upright screens get the upright picture of the hall (see the <picture> in the template). */
@media (orientation: portrait) { .page-contact .public__plate img { object-position: 50% 40%; } }

/* The pavilion on upright and square screens. There is no upright picture of it, so the frame shows
   the middle of the wide one. It is made a little taller than its frame and held at the bottom:
   the top edge of the concrete walls leaves the frame instead of running through the bar. */
@media (max-aspect-ratio: 11/10) {
  .page-info .public__plate img { position: absolute; left: 0; bottom: 0; height: 110%; }
  /* Tablets held upright: a frame of the picture's own shape, so the lake shows on both sides
     (a tall frame would stop just past the walls and leave two thin slivers of water). */
  .page-info .public__plate { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
}

/* Info: each part of the bar takes the tone of what it rests on. On a wide screen the
   name lands on the grey boards of the pavilion, where light reads better than ink. */
@media (min-aspect-ratio: 5/4) {
  .page-info .topbar:not([data-open="true"]) .wordmark { color: #f4f1eb; text-shadow: 0 1px 16px rgb(0 0 0 / 0.4); }
}
/* The small action of the bar rests on concrete here: full ink, so it stays crisp. */
.page-info .topbar__action { opacity: 1; }
/* On a phone the photograph is cropped to the dark boards and the door: the whole bar turns light. */
@media (max-aspect-ratio: 5/4) {
  .page-info .topbar:not([data-open="true"]) { color: #f4f1eb; text-shadow: 0 1px 14px rgb(0 0 0 / 0.45); }
}

/* The words ------------------------------------------------------------------ */
/* They keep to the same two edges as the top bar and the footer: the gutter, left and right. */
.public__body {
  display: grid; gap: 2.75rem var(--gutter);
  padding: clamp(2.5rem, 7vh, 4.75rem) var(--gutter) clamp(3.5rem, 10vh, 6.5rem);
}
.public__title { margin-top: 1.2rem; font-size: var(--step-3); max-width: 15ch; }
.public__lead { margin-top: 1.5rem; }

/* The title arrives one line after the other (the .reveal of base.css). */
.public__title.reveal > :nth-child(2) > * { --i: 1; }

/* The facts: a caption on the left, a sentence on the right, a hairline between rows. */
.spec { border-top: 1px solid var(--line-strong); }
.spec__row {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.45rem 1.5rem; align-items: baseline;
  padding: 1.2rem 0 1.3rem; border-bottom: 1px solid var(--line);
}
.spec dt { display: flex; align-items: center; gap: 0.7em; }
.spec dd { font-size: var(--step-1); line-height: 1.38; letter-spacing: -0.012em; max-width: 36ch; text-wrap: balance; }
/* The promise is the "total" of the list: a little larger, marked with the slot. */
.spec__row--promise dd { font-size: var(--step-2); font-weight: 500; line-height: 1.12; letter-spacing: -0.035em; max-width: 22ch; }

.public__actions { margin-top: 2.5rem; --cluster: 0.75rem; }

/* The ways to reach us: big rows to press. The slot shows which one is about to be chosen;
   the first way (the main one) keeps its slot lit. */
.ways { border-top: 1px solid var(--line-strong); }
.way {
  position: relative; display: grid; gap: 0.5rem;
  padding: 1.35rem 3.2rem 1.5rem 0; border-bottom: 1px solid var(--line);
  transition: padding 0.5s var(--ease-out);
}
.way::before { content: ""; position: absolute; left: 0; top: 1.35rem; bottom: 1.5rem; width: 0; background: var(--lamp); transition: width 0.5s var(--ease-out); }
.way::after { content: "→"; position: absolute; right: 0.2rem; bottom: 1.35rem; font-size: 1.5rem; line-height: 1; transition: transform 0.5s var(--ease-out); }
a.way:hover, a.way:focus-visible { padding-left: 1.4rem; }
a.way:hover::before, a.way:focus-visible::before { width: 6px; }
a.way:hover::after { transform: translateX(5px); }
.way__value { font-size: var(--step-2); font-weight: 500; letter-spacing: -0.035em; line-height: 1.08; overflow-wrap: anywhere; }

.way--main { padding-left: 1.3rem; }
.way--main::before { width: 3px; }
a.way--main:hover, a.way--main:focus-visible { padding-left: 1.9rem; }
a.way--main:hover::before, a.way--main:focus-visible::before { width: 8px; }
/* A little larger than the other ways, a little smaller than the page title. */
.way--main .way__value { font-size: clamp(1.3rem, 0.55rem + 4.4vw, 2.6rem); letter-spacing: -0.04em; line-height: 1.04; }

/* WhatsApp before it is set up: one slim, quiet row, and nothing to press. */
.way--soon { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.05rem 0 1.1rem; }
.way--soon::before, .way--soon::after { display: none; }

/* One line under the list: start alone instead. */
.public__alone { margin-top: 1.6rem; color: var(--muted); }
.public__alone a { display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; color: var(--fg); }
.public__alone a:hover .link { text-decoration-color: currentColor; }
.public__arrow { transition: transform 0.5s var(--ease-out); }
.public__alone a:hover .public__arrow { transform: translateX(5px); }

/* Wide screens: title on the left, list on the right. Below 1100px the list would be too
   narrow for its sentences, so the page stays one column (as on a tablet held upright). */
@media (min-width: 1100px) {
  .public__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  /* The list starts level with the title (under the caption) and keeps to the right edge. */
  .public__detail { padding-top: 2.1rem; width: 100%; max-width: 50rem; justify-self: end; }
}

/* Phones ----------------------------------------------------------------------- */
@media (max-width: 560px) {
  .public__plate, .page-info .public__plate { height: 52svh; min-height: 17rem; aspect-ratio: auto; }
  .public__body { gap: 2.25rem; padding-top: 2.25rem; }
  .spec__row { grid-template-columns: 1fr; }
  .public__actions .btn { width: 100%; }
  a.way { padding-right: 2.6rem; }   /* a little more room for a long email address */
}

/* Tap targets ---------------------------------------------------------------------
   Small links must be at least 44px tall to be easy to press. The look does not change: the
   text stays where it is, only the area that answers to a finger grows. (Proposed for base.css,
   so that the home page and Examples get it too; then these lines can go.) */
.site-footer nav a, .site-footer .wordmark, .topbar .wordmark { display: inline-flex; align-items: center; min-height: 44px; }
/* The name and the year of the footer sit on one baseline. */
.site-footer__mark { align-items: baseline; }