/* Visit us here — section 08.

   Added by the client revision round. The compiled Tailwind bundle only carries
   utilities the original source used, so this section uses semantic classes
   here instead of inventing arbitrary values that would compile to nothing.
   Colour comes from the design's own theme tokens, so it follows the palette. */

.visit-grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .visit-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 5rem;
  }
}

/* ---- photo slot ---- */
.visit-photo {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: 2px;
  background: var(--color-ink2);
}

/* Real client photographs, replacing the hatched "photo pending" field.
   Two portrait frames side by side: stacked, they would double the section
   height for no gain. Below 640px they go to one column, since two 1:1-ish
   frames at phone width are too small to read. */
.visit-photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  flex: 1 1 auto;
  min-height: 420px;
  background: var(--color-line);
}

.visit-shot {
  margin: 0;
  overflow: hidden;
  background: var(--color-ink2);
}

.visit-shot-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  object-position: center 42%;
  /* Round 3: the office shots asked to be softened. The scale is not a zoom —
     filter:blur() samples outside the bitmap, so without the 1.05 overfill the
     photo would fade into the figure's ink2 background along all four edges,
     which reads as a rendering fault rather than a deliberate soft focus.
     .visit-shot clips the excess. */
  filter: blur(2.2px);
  transform: scale(1.05);
}

@media (max-width: 640px) {
  .visit-photo-grid {
    grid-template-columns: 1fr;
  }

  .visit-shot-img {
    min-height: 210px;
  }
}

/* position: static, not absolute: the images are now the content of the slot,
   so the coordinates bar belongs in flow at the bottom rather than floating
   over a photograph. */
.visit-photo-foot {
  position: static;
  inset-inline: 0;
  bottom: 0;
  border-top: 1px solid var(--color-line);
  background: color-mix(in oklab, var(--color-ink) 88%, transparent);
  backdrop-filter: blur(6px);
  padding: 1rem 1.25rem;
}

.visit-photo-coords {
  color: color-mix(in oklab, var(--color-cream) 62%, transparent);
}

/* ---- detail rows ---- */
.visit-list {
  align-self: center;
}

.visit-row {
  padding-bottom: 0.25rem;
}

.visit-row-divided {
  border-top: 1px solid var(--color-line);
  padding-top: 1.25rem;
}

.visit-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.visit-badge-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-ember);
}

.visit-badge-rule {
  display: block;
  width: 1.5rem;
  height: 1px;
  background: var(--color-line);
}

.visit-row-body {
  margin-top: 0.75rem;
  padding-left: 3.1rem;
  font-size: 1.05rem;
  line-height: 1.625;
  color: color-mix(in oklab, var(--color-cream) 88%, transparent);
}

/* The meta line is a caption, not a continuation. It was 0.25rem below a 17px
   body and 0.25rem above the divider, so it had 4px of air on each side and read
   as though it belonged to neither. Measured: bodyBottomToMeta 4px,
   metaBottomToDivider 4px, identical on all five rows. It is a typographic
   group with the body, so it needs more space above than below.

   Row 02 in particular looked wrong because it is the only two-line body in the
   first three rows, which puts the caption nearest the following divider. The
   spacing was the cause; the wrap is just where the eye caught it. */
.visit-row-meta {
  margin-top: 0.6rem;
  margin-bottom: 0.55rem;
  padding-left: 3.1rem;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: color-mix(in oklab, var(--color-flame) 85%, transparent);
}

/* The Google Maps link, in row 01. The global anchor rule is color:inherit
   with no decoration, so nothing about being a link is visible unless it is
   drawn here: the address underlines in the accent and lights up on hover,
   the meta line under it is the explicit action. Both open a new tab. */
.visit-map {
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--color-flame) 55%, transparent);
  text-underline-offset: 0.2em;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.visit-map:hover {
  color: var(--color-flame);
  text-decoration-color: var(--color-flame);
}

/* the meta line already sits in the accent, so it reads as the action without
   an underline of its own */
.visit-row-meta .visit-map {
  text-decoration: none;
}

.visit-row-meta .visit-map:hover {
  color: var(--color-cream);
}

@media (max-width: 480px) {
  .visit-row-body,
  .visit-row-meta {
    padding-left: 0;
  }
}