/* ===========================================================================
   COLORS FOR PEACE — static site styles
   Faithful reproduction of the original Jimdo look: full-bleed watercolor
   background, floating light content column, magenta titles, green accents.
   =========================================================================== */

:root{
  --magenta:#e50051;
  --magenta-dark:#c8004a;
  --green:#52b17b;
  --green-light:#87c9a3;
  --ink:#2b2b2b;
  --muted:#6b6f6d;
  --paper:#ffffff;
  --line:#e7e9e8;
  --maxw:900px;
  --nav-bg:#3f4543;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  line-height:1.65;
  font-size:16px;
  background:#eef1ef url('../img/bg.jpg') no-repeat center top;
  background-size:cover;
  background-attachment:fixed;
}

/* Soft wash so the watercolour never fights the text */
.page{
  min-height:100vh;
  background:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.55));
}

a{color:var(--magenta);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}

/* ---------- Header / logo ---------- */
.site-header{text-align:center;padding:38px 20px 22px}
.site-header .logo{display:inline-block}
.site-header .logo img{width:min(300px,64vw);margin:0 auto}

/* ---------- Language bar ---------- */
.langbar{
  background:rgba(63,69,67,.55);
  backdrop-filter:blur(4px);
  border-radius:2px;
  max-width:var(--maxw);
  margin:0 auto;
}
.langbar ul{
  list-style:none;display:flex;justify-content:center;flex-wrap:wrap;
  gap:8px;padding:14px 16px;margin:0;
}
.langbar a{
  color:#fff;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  font-size:.82rem;padding:6px 14px;border-radius:3px;text-decoration:none;
  transition:color .2s,background .2s;
}
.langbar a:hover{color:#fff;background:rgba(255,255,255,.12);text-decoration:none}
.langbar a.active{color:var(--magenta);background:rgba(255,255,255,.9)}

/* ---------- Page nav (current language's pages) ---------- */
.pagenav{max-width:var(--maxw);margin:0 auto}
.pagenav ul{
  list-style:none;display:flex;justify-content:center;flex-wrap:wrap;
  gap:2px 4px;padding:10px 12px;margin:0;
}
.pagenav a{
  color:#3f4543;font-size:.8rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.03em;padding:6px 12px;border-radius:3px;text-decoration:none;
  transition:color .2s,background .2s;
}
.pagenav a:hover{color:var(--magenta);background:rgba(255,255,255,.6);text-decoration:none}
.pagenav a.active{color:var(--magenta)}

/* ---------- Content column ---------- */
main{
  max-width:var(--maxw);
  margin:16px auto 40px;
  background:rgba(255,255,255,.93);
  border-radius:4px;
  box-shadow:0 10px 40px rgba(0,0,0,.10);
  padding:44px clamp(20px,5vw,60px) 52px;
}
.breadcrumb{font-size:.8rem;color:var(--muted);margin-bottom:26px}
.breadcrumb a{color:var(--green)}

h1.page-title{
  color:var(--magenta);text-align:center;font-weight:700;
  font-size:clamp(1.7rem,4.5vw,2.4rem);line-height:1.2;margin-bottom:.3em;
}
.subtitle{
  text-align:center;color:#555;font-style:italic;font-weight:400;
  font-size:clamp(1.05rem,2.6vw,1.35rem);margin:0 auto 1.8em;max-width:44ch;
}
h2{color:var(--green);font-weight:700;font-size:clamp(1.35rem,3.4vw,1.9rem);
   line-height:1.25;margin:1.6em 0 .7em;text-align:center}
h3{color:var(--ink);font-weight:700;font-size:1.15rem;margin:1.4em 0 .5em}
main p{margin:0 0 1.1em}
main p a{font-weight:600}
.cta{color:var(--green);text-align:center;font-weight:700;
     font-size:clamp(1.25rem,3vw,1.7rem);margin:1.4em 0;}
hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}

/* ---------- Landing (trilingual) ---------- */
.welcome{display:grid;grid-template-columns:180px 1fr;gap:26px;align-items:start;
         padding:26px 0;border-top:1px solid var(--line)}
.welcome:first-of-type{border-top:0}
.welcome .flag img{border-radius:3px;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.welcome h2{color:var(--magenta);text-align:left;margin:0 0 .5em}
.welcome .lead{font-weight:700;margin-bottom:.6em;color:var(--ink)}
.lang-enter{display:inline-block;margin-top:.4em;font-weight:700;color:var(--green)}
@media(max-width:640px){
  .welcome{grid-template-columns:1fr;gap:14px}
  .welcome .flag img{max-width:220px}
}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
         gap:10px;margin:1.4em 0}
.gallery button{padding:0;border:0;background:none;cursor:pointer;line-height:0;
  border-radius:3px;overflow:hidden;aspect-ratio:1/1}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .3s,filter .3s}
.gallery button:hover img{transform:scale(1.05);filter:brightness(1.05)}

/* Single / inline images */
.figure{margin:1.4em auto;text-align:center}
.figure img{margin:0 auto;border-radius:3px}

/* ---------- Video grid ---------- */
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
        gap:18px;margin:1.4em 0}
.video{position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;
       background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Contact / people ---------- */
.people{display:grid;gap:30px;margin:1.4em 0}
.person{display:grid;grid-template-columns:170px 1fr;gap:24px;align-items:center}
.person .photo img{width:170px;height:170px;object-fit:cover;border-radius:50%;
  box-shadow:0 6px 18px rgba(0,0,0,.15)}
.person h3{margin:0 0 .1em;color:var(--ink)}
.person .role{color:var(--muted);margin-bottom:.4em}
.person p{margin:0 0 .2em;font-size:.95rem}
@media(max-width:560px){
  .person{grid-template-columns:1fr;justify-items:center;text-align:center}
}

/* ---------- Partner / press logo grids ---------- */
.logogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:22px;align-items:center;margin:1.4em 0}
.logogrid img{max-height:90px;width:auto;margin:0 auto;object-fit:contain}

/* ---------- Footer ---------- */
.site-footer{max-width:var(--maxw);margin:0 auto 40px;
  background:rgba(255,255,255,.93);border-radius:4px;
  box-shadow:0 10px 40px rgba(0,0,0,.10);padding:30px clamp(20px,5vw,60px) 40px}
.social{display:flex;justify-content:center;gap:30px;padding:6px 0 26px;
  border-bottom:1px solid var(--line);margin-bottom:26px}
.social a{color:var(--ink);opacity:.75;transition:opacity .2s,color .2s}
.social a:hover{opacity:1;color:var(--magenta)}
.social svg{width:26px;height:26px;display:block}
.footer-title{color:var(--magenta);text-align:center;font-weight:700;
  letter-spacing:.02em;margin-bottom:20px}
.footer-legal{text-align:center;color:var(--muted);font-size:.82rem;
  margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.footer-legal a{color:var(--green)}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;
  align-items:center;justify-content:center;z-index:100}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:86vh;width:auto;height:auto;border-radius:3px}
.lb button{position:absolute;background:none;border:0;color:#fff;cursor:pointer;
  font-size:2.4rem;line-height:1;padding:16px;opacity:.8}
.lb button:hover{opacity:1}
.lb .lb-close{top:6px;right:10px}
.lb .lb-prev{left:6px;top:50%;transform:translateY(-50%)}
.lb .lb-next{right:6px;top:50%;transform:translateY(-50%)}