/* ============================================================
   DZONG HOLIDAYS — archive.css
   Package Archive & Filter Page Styles
   ============================================================ */

/* ---- ARCHIVE HERO ---- */
.archive-main { min-height: 80vh; }

.archive-hero {
  background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
  padding: clamp(var(--space-12), 6vw, var(--space-20)) 0 var(--space-10);
}
.archive-hero-dest {
  background-size: cover;
  background-position: center;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--space-12);
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.65);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.breadcrumb a { color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.2s; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { color: rgba(255,255,255,0.4); }

.archive-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw + 0.5rem, 3rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-3);
  line-height: 1.15;
}
.archive-desc { font-size: var(--text-base); color: rgba(255,255,255,0.75); max-width: 60ch; }
.archive-hero-meta {
  margin-top: var(--space-4);
  display: flex; gap: var(--space-4);
}
.archive-hero-meta span {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm);
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  backdrop-filter: blur(6px);
}

/* ---- FILTER BAR ---- */
.filter-bar-wrap {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}
.filter-bar-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  flex-wrap: wrap;
}
.filter-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  transition: border-color 0.2s;
  min-width: 0;
}
.filter-field:focus-within { border-color: var(--color-primary); }
.filter-search {
  flex: 0 0 200px;
  gap: var(--space-2);
}
.filter-search svg { color: var(--color-text-muted); flex-shrink: 0; }
.filter-input {
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  color: var(--color-text);
  width: 100%;
  min-width: 0;
}
.filter-input:focus { outline: none; }
.filter-input::placeholder { color: var(--color-text-faint); }

.filter-select {
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  padding-right: var(--space-4);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%237a7974' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0px center;
  min-width: 120px;
}
.filter-select:focus { outline: none; }
.filter-select.is-active { color: var(--color-primary); font-weight: 600; }

.filter-btn-apply {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.filter-btn-apply:hover { background: var(--color-primary-hover); }

.filter-btn-clear {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: transparent;
  color: var(--color-text-muted);
  border: 1.5px solid var(--color-border);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  white-space: nowrap;
}
.filter-btn-clear:hover { border-color: var(--color-error); color: var(--color-error); }
.filter-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* ---- ACTIVE FILTER TAGS ---- */
.active-filters {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0;
  flex-wrap: wrap;
}
.active-filters-label { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; }
.active-filter-tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-primary-light, rgba(1,105,111,0.1));
  color: var(--color-primary);
  border: 1px solid rgba(1,105,111,0.2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}
.active-filter-tag:hover { background: rgba(161,44,123,0.08); color: var(--color-error); border-color: rgba(161,44,123,0.2); }
.active-filter-tag svg { flex-shrink: 0; }

/* ---- RESULTS ---- */
.archive-results { padding: var(--space-8) 0 var(--space-16); }
.results-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-6);
  flex-wrap: wrap; gap: var(--space-3);
}
.results-count { font-size: var(--text-sm); color: var(--color-text-muted); }
.results-count strong { color: var(--color-text); font-weight: 700; }

.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* ---- EMPTY STATE ---- */
.archive-empty {
  text-align: center;
  padding: var(--space-20) var(--space-8);
  color: var(--color-text-muted);
}
.empty-icon {
  width: 80px; height: 80px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-6);
  color: var(--color-text-faint);
}
.archive-empty h2 { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-text); margin-bottom: var(--space-3); }
.archive-empty p { font-size: var(--text-base); max-width: 44ch; margin: 0 auto var(--space-8); }
.empty-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* ---- PAGINATION ---- */
.archive-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-12);
  flex-wrap: wrap;
}
.pagination-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-width: 40px; height: 40px;
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  transition: all 0.2s;
  justify-content: center;
}
.pagination-btn:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.pagination-current { background: var(--color-primary); color: #fff !important; border-color: var(--color-primary); }
.pagination-prev, .pagination-next { padding: 0 var(--space-5); }
.pagination-dots { font-size: var(--text-sm); color: var(--color-text-faint); padding: 0 var(--space-2); }

/* ---- SHARED BUTTONS ---- */
.btn-primary {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-primary); color: #fff;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 700;
  text-decoration: none;
  transition: background 0.2s;
}
.btn-primary:hover { background: var(--color-primary-hover); color: #fff; }
.btn-secondary {
  display: inline-flex; align-items: center;
  background: var(--color-surface); color: var(--color-text);
  border: 1.5px solid var(--color-border);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline {
  display: inline-flex; align-items: center;
  background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,0.5);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-outline:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: #fff; }
.btn-whatsapp {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: #25D366; color: #fff;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 700;
  text-decoration: none;
  transition: background 0.2s;
}
.btn-whatsapp:hover { background: #128C7E; color: #fff; }

/* ---- ARCHIVE BOTTOM CTA ---- */
.archive-cta {
  background: linear-gradient(135deg, #01696f 0%, #0c4e54 100%);
  padding: clamp(var(--space-10), 4vw, var(--space-16)) 0;
}
.archive-cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-8); flex-wrap: wrap;
}
.archive-cta-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 2rem);
  color: #fff; margin-bottom: var(--space-2);
}
.archive-cta-inner p { color: rgba(255,255,255,0.75); font-size: var(--text-base); }
.archive-cta-btns { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .archive-grid { grid-template-columns: repeat(2, 1fr); }
  .filter-bar-form { gap: var(--space-2); }
  .filter-search { flex: 0 0 160px; }
}
@media (max-width: 768px) {
  .filter-bar-wrap { position: relative; }
  .filter-bar-form { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-2); -webkit-overflow-scrolling: touch; }
  .filter-field { flex-shrink: 0; }
  .filter-search { flex: 0 0 140px; }
  .archive-cta-inner { flex-direction: column; text-align: center; }
  .archive-cta-btns { justify-content: center; }
}
@media (max-width: 600px) {
  .archive-grid { grid-template-columns: 1fr; }
  .active-filters { gap: var(--space-2); }
}