/**
 * Section: Office details
 *
 * Ported from _mockups/contact.html `.ct-grid` / `.ct-office` / `.ct-list` /
 * `.ct-row` / `.ct-map`, which is the canonical style block. One page, so
 * there is no drift to resolve.
 *
 * Everything here has exactly one consumer, which is why it is a section
 * stylesheet and not components.css. The shared pieces it leans on are already
 * global and are NOT re-declared: `.pasia-icon-tile`, `.card`, `.note` and
 * `.ph-badge` from components.css, `.btn`, `.btn-gold`, `.container` and
 * `.section` from tokens.css, `.reveal` and its four delay steps from base.css.
 *
 * `.pasia-icon-tile` arrived in the audit round and the first pass of this file
 * shipped a private copy of it under a bare `.ico`. That is the two-owners
 * defect forming rather than being inherited, so the copy is gone and the tile
 * is now the shared component with two custom properties set on it below.
 *
 * Tokens only. No hex, no rgb(), no pixel type sizes. The pixel values that
 * remain are component geometry with no token to name them, the same way
 * `.hcard .avatar` and `.alert svg` carry theirs in components.css. The two
 * photo washes are `color-mix` over `--deep-forest` rather than the mock-up's
 * raw rgba; see the rule for why the first pass's `--scrim-ink` was wrong.
 *
 * CONTRAST, measured rather than eyeballed. This section sits on the default
 * mist band and its card is `--paper`, so every value below is on white:
 *
 *   --ink        #14231f  on --paper   16.28:1   the row values
 *   --ink-soft   #45524d  on --paper    8.18:1   the notes and the caption
 *   --pine       #16564b  on --paper    8.51:1   the tel: and mailto: links
 *   --ink-faint  #5f6b66  on --paper    5.55:1   the small row labels
 *   --gold-deep  #7e622e  on --paper    5.72:1   .ph-badge text, and the ring
 *   --gold-deep  on the badge's own gold hatch    5.18:1   worst case
 *   --forest     #0e4038  on --paper   11.61:1   the caption's <strong>
 *
 * All clear WCAG AA for normal text. The badge stays on its light form here:
 * the on-dark variant in components.css is for the forest bands and this
 * section never has one.
 */

.pasia-office-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
}

/* Derived from the content, never from a field: once the address is supplied
   and no photograph has been chosen, the renderer drops the map and the card
   takes the full measure rather than sitting in half a grid. */
.pasia-office-grid > :only-child {
  grid-column: 1 / -1;
  max-width: 66ch;
}

/* ---------------------------------------------------------------------------
 * The details card
 * ------------------------------------------------------------------------ */
.pasia-office-card {
  padding: var(--s-5);
}

.pasia-office-card h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--s-4);
}

.pasia-office-list {
  display: grid;
}

.pasia-office-row {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
}

.pasia-office-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* min-width: 0 lets a long email or address wrap inside the flex row instead
   of pushing the card wider than the viewport at 320px. */
.pasia-office-row-body {
  min-width: 0;
}

/* The tile itself is `.pasia-icon-tile` in components.css, shared with
   `icon-cards` and `path-cards`. This section is the smallest of the three, so
   all it owns is the size, which the component exposes as two custom
   properties. Nothing about the treatment is re-declared: the ground, the
   glyph colour, the radius, the centring and the svg sizing all have one owner.

   The class is namespaced. components.css's migration note writes the hook as
   `.pasia-office-row .ico`, and a bare `.ico` inside my own row is safe only
   for as long as nobody else declares a global one, which is exactly the trap
   base.css documents for `.sun`. Reported to the shared-layer owner so that
   line can be corrected. */
.pasia-office-tile {
  --pasia-tile: 42px;
  --pasia-tile-glyph: 21px;
}

.pasia-office-row .k {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .25em;
}

.pasia-office-row .v {
  display: block;
  font-size: var(--text-base);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.pasia-office-row .v a {
  color: var(--pine);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pasia-office-row .v a:hover {
  color: var(--forest);
}

/* `.note` is the shared component in components.css. Only the two things this
   row changes about it are declared here. */
.pasia-office-row .note {
  display: block;
  margin-top: .3em;
}

.pasia-office-row .btn {
  margin-top: .6em;
  font-size: var(--text-sm);
  padding: .7em 1.3em;
}

/* ---------------------------------------------------------------------------
 * The map, which is a photograph standing in for one
 * ------------------------------------------------------------------------ */
.pasia-office-map {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-m);
}

.pasia-office-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  filter: saturate(.55);
}

/* The scrim over the photograph. contact.html:96-99 writes it as
   `linear-gradient(180deg, rgba(8,47,42,.12), rgba(8,26,23,.42))`, which hard
   rule 1 forbids verbatim.

   The first pass substituted --scrim-ink and called it a token swap. It was
   not: --scrim-ink is rgba(20,35,31,.72), so that dropped the 12% top wash
   entirely and took the bottom stop from .42 to .72, a 71% alpha increase on a
   different hue. Nothing showed it because no photograph exists yet, which is
   precisely why it would have landed unreviewed on the day one was uploaded.

   color-mix reproduces the mock-up's alphas exactly and its top hue exactly,
   with no raw rgba and no new token. Precedent: search-overlay.css:31. The one
   remaining difference is the bottom stop's hue, rgb(8,47,42) rather than
   rgb(8,26,23), because the latter is not a named colour in tokens.css; at 42%
   over a photograph the two are indistinguishable, and naming it would mean
   adding a token to a file this agent does not own. */
.pasia-office-map:not(.is-placeholder)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--deep-forest) 12%, transparent),
    color-mix(in srgb, var(--deep-forest) 42%, transparent)
  );
}

/* No photograph yet. The gold hatch is the design's own "this is a gap"
   texture, the same one `.ph-badge` wears, so the empty state reads as
   deliberate rather than broken. */
.pasia-office-map.is-placeholder {
  aspect-ratio: 4 / 3;
  border: 1.5px dashed var(--gold);
  box-shadow: none;
  background: repeating-linear-gradient(
    45deg,
    var(--gold-tint-10),
    var(--gold-tint-10) 9px,
    transparent 9px,
    transparent 20px
  );
}

.pasia-office-map .pin {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -100%);
  z-index: var(--z-raised);
  width: 46px;
  height: 46px;
  color: var(--gold-bright);
  /* contact.html:104 is rgba(8,26,23,.5). Same substitution and same reasoning
     as the scrim above: the alpha is reproduced exactly, the hue is
     --deep-forest because rgb(8,26,23) has no name in tokens.css. */
  filter: drop-shadow(0 6px 12px color-mix(in srgb, var(--deep-forest) 50%, transparent));
}

.pasia-office-map.is-placeholder .pin {
  color: var(--gold-deep);
  filter: none;
}

.pasia-office-map figcaption {
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: var(--s-3);
  z-index: var(--z-raised);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6em;
  background: var(--paper);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  box-shadow: var(--shadow-m);
}

.pasia-office-map figcaption strong {
  color: var(--forest);
}

/* ---------------------------------------------------------------------------
 * Breakpoints. The canonical set is 1024 / 860 / 620 / 560, tokens.css.
 * ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  .pasia-office-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .pasia-office-card {
    padding: var(--s-4);
  }
}