/*
  Ekovanja — Hub skin pack
  Purpose: make the “intro” blocks on hub pages feel premium (soft glass + subtle themed background)
  Notes: Uses only site-owned/generated assets (no external/copyrighted images).
*/

:root{
  --hub-radius: 24px;
  --hub-border: rgba(255,255,255,.10);
  --hub-glass: rgba(12, 26, 20, .55);
  --hub-glow: rgba(24, 190, 120, .10);
}

/* Intro panel wrapper (works with existing markup: <section class="content-block intro-block"><div class="container">...) */
.intro-block{ padding-top: 10px; }

.intro-block .container,
.intro-block .content-wrapper{
  position: relative;
  overflow: hidden;
  border-radius: var(--hub-radius);
  border: 1px solid var(--hub-border);
  background: linear-gradient(180deg, rgba(10,20,16,.62), rgba(10,20,16,.35));
  box-shadow:
    0 18px 40px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 120px var(--hub-glow);
  padding: 44px 52px;
}

.intro-block .container::before,
.intro-block .content-wrapper::before{
  content:"";
  position:absolute;
  inset:-2px;
  background-position: 85% 55%;
  background-repeat: no-repeat;
  background-size: 980px auto;
  opacity: .16;
  filter: saturate(.95) contrast(1.05);
  transform: scale(1.02);
  pointer-events:none;
}

.intro-block .container::after,
.intro-block .content-wrapper::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 320px at 15% 15%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 340px at 85% 65%, rgba(24, 190, 120, .12), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.28));
  pointer-events:none;
}

.intro-block .container > *,
.intro-block .content-wrapper > *{ position: relative; z-index: 1; }

/* Make title + text a bit more readable on textured backgrounds */
.intro-block h1,
.intro-block h2{
  text-shadow: 0 8px 28px rgba(0,0,0,.55);
}

.intro-block p{
  text-shadow: 0 6px 22px rgba(0,0,0,.45);
}

/* Theme backgrounds */
body.theme-water .intro-block .container::before{
  background-image: url('/assets/img/hub/bg-water-waves.webp');
  background-position: 75% 55%;
  opacity: .18;
}

body.theme-water .intro-block .content-wrapper::before{
  background-image: url('/assets/img/hub/bg-water-waves.webp');
  background-position: 75% 55%;
  opacity: .18;
}

body.theme-water .intro-block .container::after{
  background:
    radial-gradient(900px 360px at 20% 15%, rgba(120, 220, 255, .12), transparent 60%),
    radial-gradient(900px 360px at 85% 65%, rgba(24, 190, 120, .10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.30));
}

body.theme-water .intro-block .content-wrapper::after{
  background:
    radial-gradient(900px 360px at 20% 15%, rgba(120, 220, 255, .12), transparent 60%),
    radial-gradient(900px 360px at 85% 65%, rgba(24, 190, 120, .10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.30));
}

body.theme-waste .intro-block .container::before{
  background-image: url('/assets/img/hub/bg-recycle.webp');
  background-position: 92% 48%;
  background-size: 980px auto;
  opacity: .30;
}

body.theme-waste .intro-block .content-wrapper::before{
  background-image: url('/assets/img/hub/bg-recycle.webp');
  background-position: 92% 48%;
  background-size: 980px auto;
  opacity: .30;
}

body.theme-biodiversity .intro-block .container::before{
  background-image: url('/assets/img/hub/bg-biodiv.webp');
  background-position: 80% 55%;
  background-size: 1200px auto;
  opacity: .16;
}

body.theme-biodiversity .intro-block .content-wrapper::before{
  background-image: url('/assets/img/hub/bg-biodiv.webp');
  background-position: 80% 55%;
  background-size: 1200px auto;
  opacity: .16;
}

/* Climate: CSS-only (no external image) */
body.theme-climate .intro-block .container::before{
  background-image:
    radial-gradient(900px 420px at 70% 55%, rgba(255, 170, 80, .22), transparent 60%),
    radial-gradient(900px 420px at 35% 45%, rgba(120, 220, 255, .14), transparent 60%),
    linear-gradient(135deg, rgba(24, 190, 120, .10), rgba(255, 170, 80, .08));
  background-size: cover;
  opacity: 1;
}

body.theme-climate .intro-block .content-wrapper::before{
  background-image:
    radial-gradient(900px 420px at 70% 55%, rgba(255, 170, 80, .22), transparent 60%),
    radial-gradient(900px 420px at 35% 45%, rgba(120, 220, 255, .14), transparent 60%),
    linear-gradient(135deg, rgba(24, 190, 120, .10), rgba(255, 170, 80, .08));
  background-size: cover;
  opacity: 1;
}

/* Responsive */
@media (max-width: 900px){
  .intro-block .container,
  .intro-block .content-wrapper{ padding: 34px 28px; }
  .intro-block .container::before,
  .intro-block .content-wrapper::before{ background-size: 760px auto; }
}

@media (max-width: 520px){
  .intro-block .container,
  .intro-block .content-wrapper{ padding: 26px 18px; border-radius: 18px; }
  .intro-block .container::before,
  .intro-block .content-wrapper::before{ background-size: 640px auto; opacity: .14; }
}


/* --- Hub pillar card (dark premium) --- */
.hub-pillar-card{
  background: linear-gradient(135deg, #0f2e1f, #133826) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 16px;
  padding: 26px 28px;
  color: #ffffff !important;
  box-shadow:
    0 16px 40px rgba(0,0,0,0.32),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  margin: 16px 0 18px 0;
}

.hub-pillar-kicker{
  margin: 0 0 8px 0;
  font-weight: 700;
  letter-spacing: .2px;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  font-size: 0.85rem;
}

.hub-pillar-title{
  margin: 0 0 10px 0;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #ffffff;
}

.hub-pillar-desc{
  margin: 0 0 14px 0;
  color: rgba(255,255,255,0.85);
  max-width: 68ch;
}

/* Make the “btn” readable on dark cards (keeps your existing .btn look elsewhere) */
.hub-pillar-card .btn{
  display: inline-block;
  background: rgba(124, 255, 178, 0.14);
  border: 1px solid rgba(124, 255, 178, 0.28);
  color: #7CFFB2;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
}

.hub-pillar-card .btn:hover{
  background: rgba(124, 255, 178, 0.20);
  border-color: rgba(124, 255, 178, 0.38);
}

/* Responsive */
@media (max-width: 520px){
  .hub-pillar-card{ padding: 18px 18px; }
  .hub-pillar-title{ font-size: 1.1rem; }
}


/* City pages: local stories */
.city-stories { margin: 1.25rem 0 1.5rem; }
.city-story-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 14px 16px;
  max-width: 880px;
}
.city-story-link{
  display:block;
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
  color: #b9ffd4;
}
.city-story-link:hover{ text-decoration: underline; }
.city-story-excerpt{
  margin: 8px 0 0;
  color: rgba(255,255,255,0.86);
  line-height: 1.55;
}