/* ─────────────────────────────────────────────────────────────────────────────
   esistessenza.art — Rome / Echoes
   Font: Raleway (Google Fonts) — used at weights 200 / 300 / 700 / 800
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
  --font:           'Raleway', sans-serif;

  --c-text:         #1c1c1c;
  --c-bg-odd:       #ffffff;        /* sections 1, 3, 5 */
  --c-bg-even:      #f4f3f1;        /* sections 2, 4 */

  --c-frame:        #1c1c1c;        /* black picture frame */
  --c-passe:        #f8f5ee;        /* ivory passepartout mat */

  --frame-w:        8px;            /* frame border thickness */
  --passe-pad:      16px;           /* passepartout inner margin */

  /* Gap between the photo frame and the hover card.
     Kept as a variable so JS can read it and set the connector width to match. */
  --card-gap:       2rem;

  /* Image display height — the single number that controls thumbnail sizing.
     All images in a row share this height; widths scale from aspect ratios.
     Adjusted down at tablet / mobile via media queries. */
  --img-h:          210px;

  --transition:     0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Base ────────────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  font-weight: 200;
  color: var(--c-text);
  background: var(--c-bg-odd);
  overflow-x: hidden;
}

/* ── Language switcher ───────────────────────────────────────────────────── */
.lang-switcher {
  position: fixed;
  top: 1.1rem;
  right: 1.6rem;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.lang-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.65rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: var(--c-text);
  opacity: 0.35;
  padding: 0.25rem 0.2rem;
  transition: opacity var(--transition);
}

.lang-btn.active {
  opacity: 1;
  font-weight: 400;
}

.lang-btn:hover { opacity: 0.75; }

.lang-sep {
  font-size: 0.6rem;
  opacity: 0.2;
  font-weight: 200;
  pointer-events: none;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  padding: 7rem 2.5rem 5.5rem;
  text-align: center;
  background: var(--c-bg-odd);
}

/* The exhibition title: Raleway 200 at a scale that commands the page.
   clamp keeps it readable on small screens without a breakpoint. */
.site-title {
  font-size: clamp(3.2rem, 11vw, 9rem);
  font-weight: 200;
}

/* "Echoes" rendered one step heavier than "Rome /" to create subtle contrast */
.title-echoes {
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  margin-bottom: 1.6rem;
}

.site-subtitle {
  font-size: clamp(0.68rem, 1.5vw, 0.88rem);
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.55rem;
}

/* The superscript linking "fotografica*" to the footer credit */
.ref-mark {
  font-size: 0.6em;
  vertical-align: super;
  letter-spacing: 0;
}

.site-date {
  font-size: clamp(0.6rem, 1.1vw, 0.75rem);
  font-weight: 200;
  letter-spacing: 0.14em;
  opacity: 0.4;
}

/* ── Sections ────────────────────────────────────────────────────────────── */
.section {
  position: relative;
  padding: 5rem 3rem 5.5rem;
  /* overflow must be visible so that the hover-scaled photo is not clipped
     at the section boundary. The watermark name clip handles its own overflow
     independently via an inner absolutely-positioned layer. */
  overflow: visible;
}

.section:nth-child(odd)  { background: var(--c-bg-odd); }
.section:nth-child(even) { background: var(--c-bg-even); }

/* ── Section name watermark ──────────────────────────────────────────────── */
/* A dedicated absolutely-positioned layer that clips the oversized text at
   the section boundary. The section itself stays overflow:visible for the
   photo hover effect to work without being clipped. */
.section-name-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;   /* doesn't intercept mouse events */
}

/* Section name: rotated 90° CCW, running vertically along the right edge.
 *
 * Rotation geometry with transform-origin: top right —
 *   after rotate(-90deg) the text body extends to the RIGHT of the pivot and
 *   downward, so the pivot must be placed inside the section by exactly the
 *   font-height, otherwise the whole word shoots outside and gets clipped away.
 *
 *   right: calc(--sz - clip)  →  pivot sits (font-height – clip) from the
 *   section's right edge, so the rotated strip ends (clip) past the right
 *   boundary → the clip layer trims that sliver.
 *
 *   top: slight negative  →  the top few pixels are trimmed by the clip layer.
 *
 * --_sz is a local alias so font-size and right stay in sync without repetition.
 */
.section-name {
  /* Max capped at 6rem so even "TOWERS" (longest label) fits within the
     shortest section height at any viewport width without being truncated. */
  --_sz: clamp(3rem, 7vw, 6rem);

  position: absolute;
  top:   -0.35rem;                      /* trimmed by top clip edge */
  right: calc(var(--_sz) - 0.5rem);    /* trimmed by right clip edge */

  transform: rotate(-90deg);
  transform-origin: top right;
  white-space: nowrap;

  font-size:      var(--_sz);
  font-weight:    800;
  letter-spacing: 0.04em;
  line-height:    1;
  user-select:    none;
}

.section:nth-child(odd)  .section-name { color: #e8e8e6; }
.section:nth-child(even) .section-name { color: #e2e1df; }

/* ── Photos grid ─────────────────────────────────────────────────────────── */
.section-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 2.8rem;
  justify-content: center;
  align-items: flex-start;  /* align to top so wall labels don't drift */
  position: relative;
  z-index: 1;               /* sits above the watermark clip layer */
}

/* ── Photo item (frame + label + hover card) ─────────────────────────────── */
.photo-item {
  position: relative;    /* anchor for the absolutely-positioned hover card */
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  /* Opacity transition used for the sibling-dimming effect */
  transition: opacity 0.3s ease;
}

/* When any sibling in the section is focused, dim everything else so they
   blend into the flat background and the focused photo reads alone. */
.section.has-focus .photo-item:not(.focused) {
  opacity: 0.04;
}

/* ── Frame ───────────────────────────────────────────────────────────────── */
.photo-frame {
  display: block;
  border: var(--frame-w) solid var(--c-frame);
  line-height: 0;     /* suppress whitespace below img in inline context */
  transition: transform var(--transition), box-shadow var(--transition);
  will-change: transform;
}

/* Sections with passepartout get an ivory mat between image and frame */
.photo-frame.has-passe {
  padding: var(--passe-pad);
  background: var(--c-passe);
}

/* ── Image ───────────────────────────────────────────────────────────────── */
/* All images use a fixed height so every photo in a section row lines up at
   the same baseline. Width is auto → each image keeps its own aspect ratio.
   This is intentional: a narrow portrait sits naturally next to a wide
   landscape without forced cropping. */
.photo-frame img {
  display: block;
  height: var(--img-h);
  width: auto;
  /* Images start invisible; the Intersection Observer fades them in as they
     scroll into the viewport, while the empty frames are shown immediately
     on page load (specs: frames first, photos fade in). */
  opacity: 0;
  transition: opacity 0.75s ease;
}

.photo-frame img.visible { opacity: 1; }

/* ── Hover / focus state ─────────────────────────────────────────────────── */
/* .focused is set by JS on both pointer and touch devices. On pointer devices
   it is added on mouseenter and mirrors :hover; on touch it is toggled on tap. */
.photo-item:hover .photo-frame,
.photo-item.focused .photo-frame {
  transform: scale(1.05);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.18);
}

/* ── Wall label ──────────────────────────────────────────────────────────── */
/* Always visible. Shows title (always in Italian, per specs) and year. */
.wall-label {
  margin-top: 0.85rem;
  text-align: center;
  line-height: 1.5;
}

.wall-label-title {
  display: block;
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.09em;
}

.wall-label-year {
  display: block;
  font-size: 0.62rem;
  font-weight: 200;
  letter-spacing: 0.12em;
  opacity: 0.45;
}

/* When focused: swap year-only for month + year */
.wall-label-monthyear {
  display: none;
  font-size: 0.62rem;
  font-weight: 200;
  letter-spacing: 0.12em;
  opacity: 0.45;
}

.photo-item.focused .wall-label-year      { display: none; }
.photo-item.focused .wall-label-monthyear { display: block; }

/* ── Hover card ──────────────────────────────────────────────────────────── */
/* Floats beside the photo frame with a fixed gap (set in px by JS).
   JS also sets left/right from the frame's exact bounding rect so the card
   and connector are pixel-perfect regardless of aspect ratio or label width.
   Card top is aligned with frame top (top:0). */
.hover-card {
  position: absolute;
  top: 0;
  width: 210px;
  background: transparent;
  border: none;               /* all four borders off by default */
  padding: 1rem 1.1rem 0.9rem;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

/* Only the inner border (side facing the frame) is drawn, in solid black */
.hover-card.card-right { border-left:  1px solid var(--c-frame); }
.hover-card.card-left  { border-right: 1px solid var(--c-frame); text-align: right; }

/* Connector: 1px black segment bridging the gap, anchored at the card's
   vertical midpoint (top: 50% of the card's auto height). */
.hover-card.card-right::before,
.hover-card.card-left::before {
  content: '';
  position: absolute;
  top: 50%;
  height: 1px;
  width: var(--card-gap);
  background: var(--c-frame);
}

.hover-card.card-right::before { right: 100%; }
.hover-card.card-left::before  { left:  100%; }

.photo-item:hover .hover-card,
.photo-item.focused .hover-card {
  opacity: 1;
  /* Delay the card's appearance until the frame scale animation completes.
     The delay matches --transition duration (0.38s). The base transition has
     no delay so the card disappears promptly when the photo is un-hovered. */
  transition: opacity 0.22s ease 0.38s;
}

.hover-card-row { margin-bottom: 0.6rem; }
.hover-card-row:last-child { margin-bottom: 0; }

/* Tiny uppercase label (e.g. "LUOGO" / "LOCATION") */
.hover-card-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 0.14rem;
}

/* The actual metadata value */
.hover-card-value {
  display: block;
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.4;
  color: #2a2a2a;
}

/* ── Lightbox ────────────────────────────────────────────────────────────── */
#lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 500;
  display: flex;
  /* flex-start so tall figures aren't clipped at the top when they overflow;
     margin: auto on the figure re-centres it when there IS room. */
  align-items: flex-start;
  justify-content: center;
  /* top padding clears the × button; bottom gives breathing room */
  padding: 3.8rem 0 2.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;  /* stops page scroll bleeding through on modern iOS */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

#lightbox.open {
  opacity: 1;
  pointer-events: auto;
}

#lightbox-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 90vw;
  /* auto margins absorb available vertical space to centre the figure when
     the lightbox is taller than the figure; when the figure is taller,
     margins collapse to 0 and the figure starts just below the top padding. */
  margin: auto;
  transform: scale(0.96);
  transition: transform 0.28s ease;
}

#lightbox.open #lightbox-figure { transform: scale(1); }

#lightbox-img {
  display: block;
  max-width: 90vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  cursor: default;
}

/* Caption + nav buttons share a flex row.
   On mobile (default) the buttons are in-flow here, below the image.
   On desktop @media(hover:hover) they're pulled out to absolute side positions,
   leaving the caption as the only in-flow child. */
#lightbox-nav-row {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
}

#lightbox-caption {
  flex: 1;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font);
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-align: center;
}

/* Close button — dark circle guarantees readability over any photo colour */
#lightbox-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  background: rgba(0, 0, 0, 0.48);
  border: none;
  border-radius: 50%;
  width: 2.2rem;
  height: 2.2rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
  z-index: 10;
}

#lightbox-close:hover {
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
}

/* Navigation buttons — default (mobile): inline in the nav row, below the image */
#lightbox-nav-prev,
#lightbox-nav-next {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.8rem;
  font-family: var(--font);
  font-weight: 200;
  line-height: 1;
  padding: 0.25rem 0.65rem;
  cursor: pointer;
  transition: color 0.2s ease;
  user-select: none;
  flex-shrink: 0;
}

#lightbox-nav-prev:hover,
#lightbox-nav-next:hover { color: rgba(255, 255, 255, 0.88); }

/* Desktop: pull nav buttons out of the row and place them on viewport sides */
@media (hover: hover) {
  #lightbox-nav-prev,
  #lightbox-nav-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    padding: 1rem 1.4rem;
    color: rgba(255, 255, 255, 0.3);
    z-index: 10;
  }

  #lightbox-nav-prev { left: 0; }
  #lightbox-nav-next { right: 0; }
}

/* Hint to the user that a focused photo is clickable to open the lightbox */
.photo-item.focused { cursor: zoom-in; }

/* On touch devices: hide hover cards (never triggered on mobile) */
.touch-device .hover-card { display: none; }

/* On touch: shrink image height to leave room for nav row + metadata below */
.touch-device #lightbox-img {
  max-height: 52vh;
  cursor: default;
}

/* Metadata panel — shown only on touch devices */
#lightbox-meta {
  display: none;
  width: 100%;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: left;
}

.touch-device #lightbox-meta { display: block; }

.lb-meta-row { margin-bottom: 0.7rem; }
.lb-meta-row:last-child { margin-bottom: 0; }

.lb-meta-label {
  display: block;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 0.1rem;
}

.lb-meta-value {
  display: block;
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  padding: 3rem 2.5rem 4rem;
  text-align: center;
  background: var(--c-bg-even);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.site-footer p {
  font-size: 0.68rem;
  font-weight: 200;
  letter-spacing: 0.1em;
  opacity: 0.55;
  margin-bottom: 0.45rem;
  line-height: 1.6;
}

.site-footer p:last-child { margin-bottom: 0; }

/* Artist byline: slightly larger and more legible than the info line */
.footer-byline {
  font-size: 0.82rem !important;
  font-weight: 300 !important;
  opacity: 0.72 !important;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  transition: opacity var(--transition);
}

.site-footer a:hover { opacity: 0.9; }

/* ── Responsive — tablet ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --img-h: 170px; }

  .section { padding: 4rem 2rem 4.5rem; }
  .section-photos { gap: 2rem; }
}

/* ── Responsive — mobile ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  :root { --img-h: 140px; }

  .site-header { padding: 5rem 1.5rem 3.5rem; }

  .section { padding: 3rem 1.2rem 3.5rem; }
  .section-photos {
    gap: 1.6rem;
    /* On narrow screens, two photos per row is already dense;
       let flexbox decide — items wrap naturally from the fixed height. */
  }

  .hover-card { width: 180px; }
  /* section-name uses --_sz via its own local variable; no override needed here */
}