/* ==========================================================================
   VIKA — Representatives (Representative/Index)
   Direction-neutral. Relies on vika.css, vika-inner.css
   ========================================================================== */
.representatives-container { width: min(100% - 2 * var(--sp-5), var(--container)); margin-inline: auto; padding-block: var(--sp-5) var(--sp-9); display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-6); align-items: start; position: relative; z-index: 1; }

.results-count { margin-block-end: var(--sp-5); padding-block-end: var(--sp-3); font-size: 0.9rem; color: var(--fg-muted); border-block-end: 1px solid var(--glass-border); }
.results-count strong { color: var(--accent); font-family: var(--font-en); font-size: 1.1rem; }

.representatives-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-5); }
.representative-card { display: flex; flex-direction: column; overflow: hidden; background: var(--glass-bg); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med); }
.representative-card:hover { transform: translateY(-5px); border-color: oklch(74% 0.09 85 / 0.45); box-shadow: 0 24px 50px oklch(0% 0 0 / 0.4); }
.rep-image-container { height: 200px; overflow: hidden; background: var(--c-ink-soft); }
.rep-image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--t-slow); }
.representative-card:hover .rep-image { transform: scale(1.05); }
.rep-no-image { display: grid; place-items: center; height: 100%; font-size: 0.82rem; color: var(--fg-faint); }

.rep-content { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.rep-title { font-size: 1.1rem; font-weight: 500; line-height: 1.6; color: var(--fg); }
.rep-location { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); font-size: 0.85rem; color: var(--fg-faint); }
.rep-province { padding: 0.2rem 0.7rem; font-size: 0.74rem; font-weight: 500; color: var(--accent); border: 1px solid oklch(74% 0.09 85 / 0.5); background: oklch(74% 0.09 85 / 0.06); }

.rp_info { display: flex; flex-direction: column; gap: var(--sp-2); margin-block-start: var(--sp-2); }
.rp_row { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: 0.86rem; line-height: 1.8; color: var(--fg-muted); }
.rp_icon { flex: 0 0 22px; text-align: center; color: var(--accent); font-size: 0.85rem; filter: grayscale(0.3); }
.rp_text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rp_address { padding: var(--sp-3); background: oklch(18% 0.005 85 / 0.5); border: 1px solid var(--glass-border); }
.rep-description { margin-block-start: var(--sp-2); font-size: 0.86rem; line-height: 1.9; color: var(--fg-muted); }

/* contact actions (markup is currently commented out in the view) */
.rp_actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-3); }
.rp_btn { flex: 1; text-align: center; padding: 0.55rem var(--sp-3); font-size: 0.82rem; color: var(--fg); border: 1px solid var(--glass-border); transition: border-color var(--t-fast), color var(--t-fast); }
.rp_btn:hover { border-color: var(--accent); color: var(--accent); }
.rp_call { color: var(--c-ink-deep); border-color: transparent; background: linear-gradient(120deg, var(--c-gold-dim), var(--c-gold-bright) 50%, var(--c-gold)); }
.rp_call:hover { color: var(--c-ink-deep); }

.no-results { text-align: center; padding: var(--sp-8) var(--sp-5); background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--fg-muted); }
.no-results h3 { color: var(--fg); margin-block-end: var(--sp-5); }

/* province filter */
.filter-sidebar { position: sticky; inset-block-start: 84px; padding: var(--sp-5); background: var(--glass-bg); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.filter-sidebar .sidebar-title { font-size: 0.88rem; font-weight: 500; letter-spacing: 0.06em; color: var(--accent); margin-block-end: var(--sp-4); padding-block-end: var(--sp-3); border-block-end: 1px solid var(--glass-border); }
.province-select {
  width: 100%; padding: 0.75rem 1rem; padding-inline-end: 2.4rem; font-size: 0.9rem; color: var(--fg); border-radius: 0;
  background-color: oklch(18% 0.005 85 / 0.6); border: 1px solid var(--glass-border);
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23c9a24f' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: var(--select-pos);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.province-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px oklch(74% 0.09 85 / 0.15); }
.province-select option { background: var(--c-ink); color: var(--fg); }
.filter-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; margin-block-start: var(--sp-3); padding: 0.75rem; font-size: 0.88rem; font-weight: 500; cursor: pointer; color: var(--c-ink-deep); border: 0; background: linear-gradient(120deg, var(--c-gold-dim), var(--c-gold-bright) 50%, var(--c-gold)); transition: box-shadow var(--t-med), transform var(--t-fast); }
.filter-button:hover { transform: translateY(-2px); box-shadow: 0 0 36px oklch(74% 0.09 85 / 0.3); }
.no-results .filter-button { width: auto; padding-inline: var(--sp-6); margin: 0; }
.reset-filter { display: block; margin-block-start: var(--sp-3); padding: 0.7rem; text-align: center; font-size: 0.85rem; color: var(--fg-muted); border: 1px solid var(--glass-border); transition: border-color var(--t-fast), color var(--t-fast); }
.reset-filter:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 991px) {
  .representatives-container { grid-template-columns: 1fr; }
  .filter-sidebar { position: static; order: -1; }
}
@media (max-width: 767px) { .representatives-list { grid-template-columns: 1fr; } }