/*
 * PV Map Manager — Frontend Styles
 * Designed to integrate with the Maiko Architecture & Interior Design theme.
 * Uses CSS custom properties so a child theme can override any value.
 */

/* ─── Design tokens ───────────────────────────────────────────────────────── */
:root {
  --pvm-black:       #111111;
  --pvm-dark:        #1a1a1a;
  --pvm-mid:         #555555;
  --pvm-muted:       #888888;
  --pvm-border:      #e0e0dc;
  --pvm-surface:     #f5f5f3;
  --pvm-white:       #ffffff;
  --pvm-radius:      0px;          /* Maiko uses sharp corners */
  --pvm-font:        inherit;      /* Picks up the theme font automatically */
  --pvm-label-case:  uppercase;
  --pvm-label-ls:    0.12em;
}

/* ─── Map container ───────────────────────────────────────────────────────── */
.pvm-map-container {
  width: 100%;
  position: relative;
}

.pvm-map {
  width: 100%;
  border-radius: var(--pvm-radius);
  overflow: hidden;
  /* Subtle shadow consistent with Maiko card elements */
  box-shadow: 0 1px 0 var(--pvm-border), 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* ─── Circle labels ───────────────────────────────────────────────────────── */
/* className applied to google.maps.Marker label — adds readable shadow */
.pvm-map-label {
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.85),
    0 0 8px  rgba(0, 0, 0, 0.55);
  pointer-events: none; /* clicks pass through to the circle below */
}

/* ─── Google Maps info window reset ──────────────────────────────────────── */
/* Ensure our inner div isn't constrained by Maps' default padding */
.gm-style .gm-style-iw-c {
  border-radius: var(--pvm-radius) !important;
  padding: 0 !important;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.14) !important;
}

.gm-style .gm-style-iw-d {
  overflow: hidden !important;
  padding: 0 !important;
}

.gm-style .gm-style-iw-tc::after {
  display: none; /* hide the default Maps caret */
}

/* ─── Info window ─────────────────────────────────────────────────────────── */
.pvm-info-window {
  font-family:  var(--pvm-font);
  font-size:    13px;
  line-height:  1.6;
  color:        var(--pvm-dark);
  min-width:    220px;
  max-width:    300px;
  background:   var(--pvm-white);
  overflow:     hidden;
}

/* Project image — full-bleed at the top */
.pvm-info-image {
  width: 100%;
  overflow: hidden;
  max-height: 160px;
  margin: 0;
}

.pvm-info-image img {
  width:      100%;
  height:     160px;
  object-fit: cover;
  display:    block;
  /* Slight desaturation for editorial feel */
  filter:     saturate(0.9);
  transition: filter 0.3s ease;
}

.pvm-info-image img:hover {
  filter: saturate(1);
}

/* Inner content padding */
.pvm-info-body {
  padding: 18px 20px 16px;
}

/* Project name */
.pvm-info-window h3 {
  margin:         0 0 12px;
  font-size:      14px;
  font-weight:    700;
  color:          var(--pvm-black);
  font-family:    var(--pvm-font);
  text-transform: var(--pvm-label-case);
  letter-spacing: var(--pvm-label-ls);
  padding-bottom: 10px;
  border-bottom:  1px solid var(--pvm-border);
  line-height:    1.3;
}

/* Data rows */
.pvm-info-table {
  width:           100%;
  border-collapse: collapse;
  margin-bottom:   0;
}

.pvm-info-table td {
  padding:        3px 0;
  vertical-align: top;
  font-family:    var(--pvm-font);
}

.pvm-info-table td:first-child {
  color:         var(--pvm-muted);
  white-space:   nowrap;
  padding-right: 14px;
  font-size:     11px;
  text-transform: var(--pvm-label-case);
  letter-spacing: 0.08em;
  width:         38%;
}

.pvm-info-table td:last-child {
  color:       var(--pvm-dark);
  font-weight: 500;
}

/* Status badges inside info window */
.pvm-info-badge {
  display:        inline-block;
  padding:        2px 8px;
  font-size:      10px;
  font-weight:    600;
  text-transform: var(--pvm-label-case);
  letter-spacing: 0.08em;
  border:         1px solid currentColor;
  border-radius:  var(--pvm-radius);
}

.pvm-info-built {
  color:      var(--pvm-dark);
  background: transparent;
}

.pvm-info-construction {
  color:      var(--pvm-muted);
  background: transparent;
  border-style: dashed;
}

/* Portfolio link — dark filled button, full width */
.pvm-info-portfolio-link {
  display:         block;
  margin-top:      14px;
  padding:         9px 16px;
  background:      var(--pvm-dark);
  color:           var(--pvm-white) !important;
  text-decoration: none;
  font-size:       11px;
  font-weight:     600;
  font-family:     var(--pvm-font);
  text-transform:  var(--pvm-label-case);
  letter-spacing:  var(--pvm-label-ls);
  text-align:      center;
  border-radius:   var(--pvm-radius);
  transition:      background 0.2s ease;
}

.pvm-info-portfolio-link:hover {
  background: var(--pvm-black);
  color:      var(--pvm-white) !important;
}

/* ─── Frontend table — section wrapper ────────────────────────────────────── */
.pvm-front-table-wrap {
  margin-top:  48px;
  font-family: var(--pvm-font);
}

.pvm-front-table-header {
  margin-bottom: 20px;
  display:       flex;
  align-items:   baseline;
  justify-content: space-between;
  flex-wrap:     wrap;
  gap:           8px;
  border-bottom: 1px solid var(--pvm-border);
  padding-bottom: 14px;
}

.pvm-front-table-header h3 {
  margin:         0;
  font-size:      13px;
  font-weight:    700;
  font-family:    var(--pvm-font);
  color:          var(--pvm-black);
  text-transform: var(--pvm-label-case);
  letter-spacing: var(--pvm-label-ls);
}

.pvm-production-note {
  margin:          0;
  color:           var(--pvm-muted);
  font-size:       11px;
  font-style:      normal;
  letter-spacing:  0.02em;
}

/* ─── Table ───────────────────────────────────────────────────────────────── */
.pvm-front-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pvm-front-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       14px;
  font-family:     var(--pvm-font);
  color:           var(--pvm-dark);
}

/* Header row */
.pvm-front-table thead tr {
  border-bottom: 2px solid var(--pvm-dark);
}

.pvm-front-table thead th {
  background:      transparent;
  color:           var(--pvm-black);
  padding:         10px 16px 10px 0;
  text-align:      left;
  font-size:       10px;
  font-weight:     700;
  font-family:     var(--pvm-font);
  text-transform:  var(--pvm-label-case);
  letter-spacing:  var(--pvm-label-ls);
  white-space:     nowrap;
  user-select:     none;
  border:          none;
}

.pvm-front-table thead th:last-child {
  text-align: right;
}

.pvm-front-table thead th.sortable {
  cursor: pointer;
}

.pvm-front-table thead th.sortable:hover {
  color: var(--pvm-mid);
}

.pvm-front-table thead th.sort-active {
  color:           var(--pvm-dark);
  border-bottom:   2px solid var(--pvm-dark);
}

.pvm-front-table thead th .sort-icon {
  opacity:     0.35;
  margin-left: 4px;
  font-size:   11px;
}

.pvm-front-table thead th.sort-active .sort-icon {
  opacity: 1;
}

/* Body rows */
.pvm-front-table tbody tr {
  border-bottom: 1px solid var(--pvm-border);
  transition:    background 0.15s ease;
}

.pvm-front-table tbody tr:last-child {
  border-bottom: none;
}

.pvm-front-table tbody tr:hover {
  background: var(--pvm-surface);
}

.pvm-front-table tbody td {
  padding:        14px 16px 14px 0;
  vertical-align: middle;
  color:          var(--pvm-dark);
  font-family:    var(--pvm-font);
  line-height:    1.4;
}

.pvm-front-table tbody td:last-child {
  text-align: right;
}

/* Right-aligned numeric columns */
.pvm-front-table .pvm-num {
  text-align:          right;
  font-variant-numeric: tabular-nums;
  font-weight:         500;
}

/* Empty state */
.pvm-front-empty {
  text-align:  center;
  color:       var(--pvm-muted);
  padding:     40px 0;
  font-style:  italic;
  letter-spacing: 0.02em;
}

/* ─── Status badges in table ──────────────────────────────────────────────── */
.pvm-ft-badge {
  display:        inline-block;
  padding:        3px 10px;
  font-size:      10px;
  font-weight:    600;
  font-family:    var(--pvm-font);
  text-transform: var(--pvm-label-case);
  letter-spacing: 0.08em;
  border:         1px solid currentColor;
  border-radius:  var(--pvm-radius);
}

.pvm-ft-built {
  color:      var(--pvm-dark);
  background: transparent;
}

.pvm-ft-construction {
  color:        var(--pvm-muted);
  background:   transparent;
  border-style: dashed;
}

/* Portfolio link in table */
.pvm-ft-link {
  color:           var(--pvm-dark);
  font-weight:     600;
  text-decoration: none;
  font-size:       12px;
  text-transform:  var(--pvm-label-case);
  letter-spacing:  0.06em;
  border-bottom:   1px solid currentColor;
  padding-bottom:  1px;
  transition:      opacity 0.15s ease;
}

.pvm-ft-link:hover {
  opacity: 0.6;
}

.pvm-ft-nolink {
  color: var(--pvm-border);
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  /* Map: shorter height on phones, full width already handled */
  .pvm-map {
    height: clamp(260px, 55vw, 400px) !important;
  }

  /* Info window: narrower to fit phone screens */
  .pvm-info-window {
    min-width: 200px;
    max-width: 82vw;
  }

  .pvm-info-body {
    padding: 14px 16px 12px;
  }

  .pvm-info-window h3 {
    font-size: 13px;
  }

  /* Portfolio link — easier tap target */
  .pvm-info-portfolio-link {
    padding: 12px 16px;
    font-size: 12px;
  }

  /* Frontend table */
  .pvm-front-table thead th,
  .pvm-front-table tbody td {
    padding-right: 8px;
    padding-left:  0;
    font-size:     12px;
  }

  .pvm-front-table-header {
    flex-direction: column;
    gap:            4px;
  }

  /* Hide location column on mobile */
  .pvm-front-table thead th:nth-child(2),
  .pvm-front-table tbody td:nth-child(2) {
    display: none;
  }
}