/* Heritage Fiji V3.5 — 03-site-detail.css
   Formatting/organization only. Rule order is preserved from V3.4. */

/* Site detail */
.site-hero {
  height:min(720px,calc(100vh - 30px));
  min-height:600px;
  position:relative;
  display:flex;
  align-items:end;
  color:#fff;
  overflow:hidden
}

.site-hero-content {
  position:relative;
  z-index:2;
  padding:90px 0 52px
}

.back-button {
  border:1px solid rgba(255,255,255,.27);
  background:rgba(16,42,67,.3);
  color:#fff;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  backdrop-filter:blur(10px)
}

.site-hero h1 {
  font:500 clamp(3.5rem,7vw,7.2rem)/.94 Georgia,serif;
  letter-spacing:-.055em;
  margin:24px 0 18px;
  max-width:1030px
}

.site-meta {
  display:flex;
  gap:9px;
  flex-wrap:wrap
}

.site-meta span {
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.11);
  border-radius:999px;
  font-size:.7rem;
  font-weight:850;
  backdrop-filter:blur(10px)
}

.status-banner {
  display:inline-flex;
  align-items:center;
  gap:11px;
  margin-top:18px;
  padding:12px 15px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:15px;
  background:rgba(16,42,67,.48);
  backdrop-filter:blur(12px)
}

.status-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  background:#79d29b;
  box-shadow:0 0 0 6px rgba(121,210,155,.14)
}

.status-banner.closed .status-dot {
  background:#f29d97
}

.status-banner.unavailable .status-dot {
  background:#edc16e
}

.status-banner strong {
  display:block;
  font-size:.8rem
}

.status-banner small {
  display:block;
  color:#dce7ed;
  font-size:.66rem
}

.site-tabs {
  position:sticky;
  top:var(--header);
  z-index:35;
  background:color-mix(in srgb,var(--paper) 94%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)
}

.site-tabs-inner {
  display:flex;
  gap:4px;
  overflow-x:auto;
  padding:9px 0
}

.site-tabs button {
  white-space:nowrap;
  padding:11px 13px;
  border-radius:11px;
  font-size:.78rem;
  font-weight:800;
  border:0;
  background:transparent;
  color:var(--ink);
  cursor:pointer
}

.site-tabs button:hover {
  background:var(--cream);
  color:var(--blue)
}

.detail-layout {
  display:grid;
  grid-template-columns:1fr 360px;
  gap:20px
}

.content-card,.info-card {
  padding:27px
}

.content-card h2 {
  font:500 clamp(2.2rem,4vw,3.7rem)/1 Georgia,serif;
  margin:0 0 18px
}

.content-card h3,.info-card h3 {
  font:500 1.35rem Georgia,serif
}

.info-stack {
  display:grid;
  gap:14px;
  align-content:start
}

.info-line {
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
  font-size:.77rem
}

.info-line span {
  color:var(--muted)
}

.experience-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:13px
}

.experience {
  padding:19px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--cream)
}

.experience h3 {
  margin:0 0 6px;
  font:500 1.1rem Georgia,serif
}

.experience p {
  margin:0;
  color:var(--muted);
  font-size:.78rem
}

.gallery-grid {
  grid-template-columns:1.5fr 1fr 1fr;
  grid-auto-rows:230px
}

.gallery-item {
  border:0;
  border-radius:20px;
  background-size:cover;
  background-position:center;
  cursor:pointer;
  position:relative;
  overflow:hidden
}

.gallery-item:first-child {
  grid-row:span 2
}

.gallery-item:after {
  content:"View";
  position:absolute;
  right:12px;
  bottom:12px;
  background:rgba(16,42,67,.68);
  color:#fff;
  border:1px solid rgba(255,255,255,.2);
  padding:7px 10px;
  border-radius:999px;
  font-size:.67rem
}

.service-grid {
  grid-template-columns:repeat(4,1fr)
}

.service-card {
  padding:22px;
  cursor:pointer
}

.service-card span {
  font-size:1.5rem
}

.service-card h3 {
  font:500 1.15rem Georgia,serif;
  margin:15px 0 7px
}

.service-card p {
  font-size:.76rem;
  color:var(--muted)
}