/* Heritage Fiji V3.5 — 02-heritage-directory.css
   Formatting/organization only. Rule order is preserved from V3.4. */

/* Directory */
.page-hero {
  padding:78px 0 55px;
  background:linear-gradient(140deg,color-mix(in srgb,var(--gold) 24%,var(--cream)),var(--cream));
  border-bottom:1px solid var(--line)
}

.page-hero h1 {
  font:500 clamp(3.2rem,6vw,6.2rem)/.96 Georgia,serif;
  letter-spacing:-.05em;
  margin:14px 0
}

.toolbar {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:24px
}

.search {
  flex:1;
  min-width:240px
}

.input,.select,.textarea {
  width:100%;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  border-radius:14px;
  padding:13px 15px;
  outline:none
}

.textarea {
  min-height:115px;
  resize:vertical
}

.filter {
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--muted);
  padding:11px 14px;
  border-radius:13px;
  font-weight:800;
  cursor:pointer
}

.filter.active {
  background:var(--navy);
  color:#fff;
  border-color:var(--navy)
}

.site-grid {
  grid-template-columns:repeat(3,1fr)
}

.site-card {
  overflow:hidden;
  cursor:pointer
}

.site-image {
  height:230px;
  background-position:center;
  background-size:cover;
  position:relative
}

.site-image:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(11,30,47,.72),transparent 60%)
}

.site-category {
  position:absolute;
  z-index:2;
  left:16px;
  bottom:14px;
  color:#fff;
  font-size:.65rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.11em
}

.site-card-body {
  padding:20px
}

.site-card h3 {
  font:500 1.55rem Georgia,serif;
  margin:0 0 8px
}

.site-card p {
  color:var(--muted);
  font-size:.82rem;
  min-height:58px
}

.fact-list {
  display:grid;
  gap:7px;
  margin-top:13px
}

.fact {
  display:flex;
  gap:8px;
  color:var(--muted);
  font-size:.74rem
}

.fact:before {
  content:"•";
  color:var(--coral);
  font-weight:900
}

.card-footer {
  display:flex;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid var(--line);
  padding-top:14px;
  margin-top:17px;
  font-size:.75rem
}

.card-footer strong {
  color:var(--blue)
}