/* ============================================================================
   Uganda Museums — Sites, Museums & Monuments Directory
   File: wp-content/themes/uganda-museums/assets/css/sites.css
   Namespace: .sites- (Sites module)
   ============================================================================ */

.sites-page{--sites-ink:#1A1A18;--sites-ink-soft:#4A4945;--sites-ink-muted:#7A7873;--sites-rule:#E2DED5;--sites-rule-soft:#ECE8DF;font-family:var(--font-body);color:var(--sites-ink)}


/* ── 1. HERO ─────────────────────────────────────────────────── */

.sites-hero{position:relative;padding:clamp(80px,11vw,140px) 6vw clamp(50px,7vw,80px);background:var(--bg-section);overflow:hidden;display:grid;grid-template-columns:1fr 60px;gap:40px}
.sites-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(26,26,24,.04) 1px,transparent 0);background-size:18px 18px;opacity:.5;pointer-events:none}
.sites-hero__inner{position:relative;max-width:1180px;margin:0 auto;width:100%}

.sites-hero .breadcrumb{margin-bottom:24px}
.sites-hero .breadcrumb__list{list-style:none;margin:0;padding:0;display:flex;gap:8px;font-size:12px;letter-spacing:.06em;color:var(--sites-ink-muted)}
.sites-hero .breadcrumb__item:not(:last-child)::after{content:"/";margin-left:8px;opacity:.5}
.sites-hero .breadcrumb__item a{color:var(--sites-ink-soft);text-decoration:none}
.sites-hero .breadcrumb__item a:hover{color:var(--terracotta)}
.sites-hero .breadcrumb__item--active{color:var(--terracotta)}

.sites-hero__eyebrow{display:flex;align-items:center;margin-bottom:28px}
.sites-rule{display:inline-block;width:36px;height:1px;background:var(--terracotta);margin-right:14px}
.sites-eyebrow-text{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--sites-ink-soft);font-weight:500}

.sites-hero__title{font-family:var(--font-heading);font-size:clamp(2.6rem,6vw,5rem);font-weight:400;line-height:.98;letter-spacing:-.02em;color:var(--sites-ink);margin:0 0 32px;max-width:18ch}
.sites-hero__title em{font-style:italic;color:var(--terracotta)}

.sites-hero__lede{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--sites-ink-soft);max-width:60ch;line-height:1.65;margin:0}

.sites-hero__sidebar{display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:20px 0}
.sites-hero__folio{font-family:var(--font-heading);font-style:italic;font-size:13px;color:var(--sites-ink-muted);letter-spacing:.06em}
.sites-hero__vertical{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--sites-ink-muted)}


/* ── Shared section head ─────────────────────────────────────── */

.sites-section-head{max-width:720px;margin:0 auto 56px;text-align:center}
.sites-section-head .sites-rule{margin:0 auto 18px}
.sites-section-head__title{font-family:var(--font-heading);font-size:clamp(2rem,3.4vw,3rem);font-weight:500;line-height:1.1;letter-spacing:-.01em;color:var(--sites-ink);margin:0 0 18px}
.sites-section-head__title em{font-style:italic;color:var(--terracotta)}
.sites-section-head__sub{font-size:1.05rem;color:var(--sites-ink-soft);line-height:1.7;margin:0}
.sites-section-head--light .sites-section-head__title{color:#fff}
.sites-section-head--light .sites-section-head__sub{color:rgba(255,255,255,.75)}
.sites-section-head--light .sites-rule{background:rgba(255,255,255,.55)}


/* ── 2. SECTIONS ─────────────────────────────────────────────── */

.sites-section{padding:clamp(80px,10vw,140px) 6vw}
.sites-section__inner{max-width:1280px;margin:0 auto}

.sites-section--museums{background:var(--bg-white)}
.sites-section--heritage{background:var(--bg-section)}
.sites-section--monuments{background:var(--forest);color:#fff;position:relative;overflow:hidden}
.sites-section--monuments::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 80% 20%,rgba(160,82,45,.15),transparent 60%),radial-gradient(ellipse at 10% 90%,rgba(232,201,168,.08),transparent 50%);pointer-events:none}
.sites-section--monuments .sites-section__inner{position:relative}


/* ── 3. GRID ─────────────────────────────────────────────────── */

.sites-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px}
.sites-grid--museums{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}


/* ── 4. CARDS ────────────────────────────────────────────────── */

.sites-card{display:flex;flex-direction:column;padding:32px 28px;background:var(--bg-section);border:1px solid var(--sites-rule);text-decoration:none;color:var(--sites-ink);transition:all 300ms cubic-bezier(.2,.7,.2,1)}
.sites-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px -8px rgba(26,26,24,.12);border-color:var(--terracotta)}

/* Primary museum card (National Museum) */
.sites-card--primary{border-top:3px solid var(--terracotta);background:var(--bg-white)}

/* Dark variant for monuments on forest background */
.sites-card--dark{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#fff}
.sites-card--dark:hover{background:rgba(255,255,255,.08);border-color:rgba(232,201,168,.3)}
.sites-card--dark .sites-card__title{color:#fff}
.sites-card--dark .sites-card__location{color:rgba(255,255,255,.6)}
.sites-card--dark .sites-card__desc{color:rgba(255,255,255,.7)}
.sites-card--dark .sites-card__link{color:#E8C9A8}

.sites-card__icon{color:var(--terracotta);margin-bottom:20px}

.sites-card__title{font-family:var(--font-heading);font-size:1.5rem;font-weight:500;color:var(--sites-ink);margin:0 0 8px;line-height:1.2;letter-spacing:-.01em;transition:color 200ms ease}
.sites-card:hover .sites-card__title{color:var(--terracotta)}
.sites-card--dark:hover .sites-card__title{color:#E8C9A8}

.sites-card__location{font-size:13px;color:var(--sites-ink-muted);margin:0 0 14px;font-weight:500}

.sites-card__desc{font-size:.95rem;color:var(--sites-ink-soft);line-height:1.65;margin:0 0 auto;padding-bottom:20px}

.sites-card__link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--terracotta);letter-spacing:.04em;margin-top:auto;transition:gap 280ms cubic-bezier(.2,.7,.2,1)}
.sites-card:hover .sites-card__link{gap:10px}


/* ── 5. BOTTOM CTA ───────────────────────────────────────────── */

.sites-cta{background:var(--bg-warm);padding:clamp(60px,8vw,100px) 6vw;text-align:center}
.sites-cta__inner{max-width:640px;margin:0 auto}
.sites-cta h2{font-family:var(--font-heading);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:500;color:var(--sites-ink);margin:0 0 16px}
.sites-cta h2 em{font-style:italic;color:var(--terracotta)}
.sites-cta p{font-size:1.05rem;color:var(--sites-ink-soft);line-height:1.7;margin:0 0 32px}


/* ── BUTTONS ─────────────────────────────────────────────────── */

.sites-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;font-family:var(--font-body);font-size:14px;font-weight:500;letter-spacing:.04em;text-decoration:none;border:1px solid transparent;border-radius:0;cursor:pointer;transition:all 280ms cubic-bezier(.2,.7,.2,1);white-space:nowrap}
.sites-btn--primary{background:var(--terracotta);color:#fff;border-color:var(--terracotta)}
.sites-btn--primary:hover{background:#8a4525;transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(160,82,45,.4)}
.sites-btn--lg{padding:18px 32px;font-size:15px}


/* ── RESPONSIVE ──────────────────────────────────────────────── */

@media(max-width:1024px){
  .sites-hero{grid-template-columns:1fr}
  .sites-hero__sidebar{display:none}
}
@media(max-width:720px){
  .sites-grid,.sites-grid--museums{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .sites-card,.sites-btn{transition:none!important}
  .sites-card:hover{transform:none}
}