/* ============================================================
   offices.css — Office listing page styles  v2.0
   PSCA & Co. Website
   ============================================================ */


/* ── Office entry — one per office, full-width row ────────────── */
.office-entry {
  /* Fill the full viewport below the fixed nav.
     The ticker scrolls away before any office section is reached, so only
     nav-height offset is needed for scroll-margin-top. */
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertically centre photo + info in the viewport */
  padding: var(--space-6) 0;
  background: var(--color-surface-page);
  border-top: 1px solid var(--color-border-subtle);
  scroll-margin-top: var(--nav-height);
}

.office-entry--alt {
  background: var(--color-white);
}

/* Mobile: single-column layout can't fit in one viewport — let it flow naturally */
@media (max-width: 900px) {
  .office-entry {
    min-height: unset;
    display: block;
    padding: var(--space-8) 0;
  }
}

/* ── Two-column: photo left, info right ───────────────────────── */
.office-entry__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-14);
  align-items: start;
}

@media (max-width: 900px) {
  .office-entry__layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}


/* ── Photo slideshow ──────────────────────────────────────────── */
.office-slideshow {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-navy);
}

.office-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Opacity fade — no direction, use ease (not ease-out) */
  transition: opacity 600ms ease;
}

.office-slide.is-active {
  opacity: 1;
}

.office-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Placeholder for offices with no photos */
.office-slide--placeholder {
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.office-slide--placeholder span {
  font-family: var(--font-serif);
  font-size: 6rem;
  font-weight: 300;
  color: var(--color-gold-a18);
  user-select: none;
}

/* Dot indicators */
.office-slideshow__dots {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-2);
  z-index: 2;
}

.office-slideshow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}

.office-slideshow__dot.is-active {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(1.35);
}

@media (hover: hover) and (pointer: fine) {
  .office-slideshow__dot:hover {
    background: rgba(255, 255, 255, 0.65);
  }
}

@media (prefers-reduced-motion: reduce) {
  .office-slide { transition: none; }
}


/* ── Office info panel ────────────────────────────────────────── */
.office-info {
  padding-top: var(--space-2);
}

.office-info__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.office-info__city {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 400;
  color: var(--color-navy);
  line-height: 1;
  margin: 0;
}

.office-info__badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-caption-size);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  border: 1px solid var(--color-gold-a40);
  padding: 3px 10px;
  white-space: nowrap;
}

.office-info__rule {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--color-gold);
  margin-bottom: var(--space-4);  /* was space-6 (24px); now 16px */
}

.office-info__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);   /* was space-5 (20px); now 16px */
}


/* ── Detail rows (reused across offices and footer) ───────────── */
.office-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.office-detail__label {
  font-family: var(--font-sans);
  font-size: var(--text-caption-size);
  font-weight: 500;
  letter-spacing: var(--text-label-ls);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.office-detail__value {
  font-family: var(--font-sans);
  font-size: var(--text-body-sm-size);
  color: var(--color-text-primary);
  line-height: 1.6;
}

.office-detail__link {
  color: var(--color-navy);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.office-detail__link:hover {
  color: var(--color-gold);
}


/* ── Note strip ───────────────────────────────────────────────── */
.offices-note {
  padding: var(--space-10) 0 var(--space-section);
  background: var(--color-surface-page);
  border-top: 1px solid var(--color-border-subtle);
}

.offices-note__inner {
  max-width: 680px;
  padding: var(--space-7);
  background: var(--color-white);
}

.offices-note__inner p {
  font-family: var(--font-sans);
  font-size: var(--text-body-sm-size);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 0;
}

.offices-note__inner a {
  color: var(--color-navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(28, 48, 88, 0.25);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.offices-note__inner a:hover {
  color: var(--color-gold);
  border-color: var(--color-gold);
}