/* ========= Reset & tokens ========= */
* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --text:#1f2937;
  --muted:#4b5563;
  --bg:#ffffff;
  --bg-alt:#f8fafc;
  --bg-soft:#f3f4f6;
  --primary:#2563eb;
  --primary-d:#1d4ed8;
  --shadow:0 4px 12px rgba(0,0,0,.08);
}
html { scroll-behavior:smooth; }
body { font-family:'Poppins', sans-serif; line-height:1.65; color:var(--text); background:var(--bg); }

/* ========= Utilities ========= */
.container { max-width:1100px; margin:0 auto; padding:0 5%; }
section { scroll-margin-top:100px; } /* prevent titles hiding under sticky nav */
img { max-width:100%; height:auto; display:block; } /* image sanity */

/* ========= Top nav ========= */
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.25rem 5%; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.06);
  position:sticky; top:0; z-index:50;
}
.logo{ height:64px; display:flex; align-items:center; }
.logo img{ max-height:56px; width:auto; object-fit:contain; display:block; }
.nav-links{ display:flex; align-items:center; flex-wrap:wrap; gap:1.25rem; }
.nav-links a{ text-decoration:none; color:var(--text); font-weight:500; transition:color .25s; }
.nav-links a:hover{ color:var(--primary); }

/* ========= Hero ========= */
.hero{
  background:linear-gradient(135deg, var(--primary), var(--primary-d));
  color:#fff; padding:6rem 5%; text-align:center; position:relative; overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='2' fill='rgba(255,255,255,0.12)'/%3E%3C/svg%3E");
  opacity:.45; pointer-events:none;
}
.hero h1{ font-size:clamp(2rem, 3.5vw, 3rem); margin-bottom:.75rem; line-height:1.15; }
.hero p { font-size:clamp(1rem, 1.5vw, 1.2rem); max-width:680px; margin:0 auto; opacity:.95; }

/* ========= Sections ========= */
.about, .services, .projects, .contact{ padding:4.5rem 5%; }
.about{ background:#fff; }
.services{ background:var(--bg-soft); }
.projects{ background:var(--bg-alt); }
.contact{ background:#f9fbff; }

.about h2, .services h2, .projects h2, .contact h2, .news-title{
  text-align:center; margin-bottom:2.2rem; color:var(--text); font-size:clamp(1.5rem, 2.4vw, 2rem);
}

.about-content, .service-content{ max-width:900px; margin:0 auto; }
.about-text p, .service-content p{ margin-bottom:1.2rem; color:var(--muted); }
.about-text ul, .service-content ul{ margin:0 0 1.2rem 1.2rem; color:var(--muted); }
.about-text li, .service-content li{ margin:.4rem 0; }

/* ========= Grids ========= */
.service-grid, .project-grid{
  display:grid; gap:1.5rem; grid-template-columns:repeat(12, 1fr);
}
.service-grid > a, .project-grid > a, .project-card, .service-card{ grid-column:span 6; }
@media (max-width:900px){
  .service-grid > a, .project-grid > a, .project-card, .service-card{ grid-column:span 12; }
}

/* ========= Cards ========= */
.service-card, .project-card{
  background:#fff; padding:1.75rem; border-radius:12px; box-shadow:var(--shadow);
  transition:transform .25s, box-shadow .25s; text-decoration:none; color:inherit; display:block;
}
.service-card:hover, .project-card:hover{ transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.12); }
.service-card h3, .project-card h3{ color:var(--primary); margin-bottom:.7rem; }

/* ========= Media helper ========= */
.european-cooperation-img{
  display:block; width:100%; max-width:720px; margin:1.5rem auto; height:auto;
  border-radius:12px; box-shadow:var(--shadow); object-fit:cover; background:#fff; min-height:240px;
}

/* ========= Forms ========= */
.form-group{ margin-bottom:1rem; }
.form-group input, .form-group textarea{
  width:100%; padding:.75rem .9rem; border:1px solid #e5e7eb; border-radius:8px; font:inherit;
}
.form-group textarea{ min-height:140px; resize:vertical; }
.submit-btn{
  width:100%; padding:.9rem 1rem; background:var(--primary); color:#fff; border:none; border-radius:8px;
  font-weight:600; cursor:pointer; transition:background .25s;
}
.submit-btn:hover{ background:var(--primary-d); }

/* ========= NEWS (new, clean) ========= */
.news-section{ padding:60px 5%; background:#f7f9fc; }
.news-title{ text-align:center; margin:0 0 26px; font-size:28px; color:#1f2937; }

.news-list{
  max-width:1000px; margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:22px;
}
.news-card{
  display:flex; gap:18px; align-items:stretch;
  background:#fff; padding:16px; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.07);
}
.news-thumb{
  display:block; width:300px; height:170px; flex-shrink:0;
  overflow:hidden; border-radius:12px; background:#eef2ff;
}
.news-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.news-body{ flex:1; display:flex; flex-direction:column; gap:10px; }
.news-headline{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.news-headline a{
  font-size:20px; font-weight:700; line-height:1.25;
  color:#111827; text-decoration:none;
}
.news-badge{
  background:#eef4ff; color:#00398f; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600;
}
.news-meta{ margin:0; color:#667085; font-size:14px; }
.news-excerpt{ margin:0; color:#2b2b2b; }
.news-cta{
  display:inline-block; margin-top:4px; padding:10px 14px;
  background:#2563eb; color:#fff; border-radius:10px; text-decoration:none; font-weight:600;
}
.news-cta:hover{ background:#1d4ed8; }

@media (max-width:720px){
  .news-card{ flex-direction:column; }
  .news-thumb{ width:100%; height:200px; }
}

/* ========= Footer ========= */
footer{ background:#111827; color:#fff; text-align:center; padding:2rem; }

/* ========= Tablet/mobile tweaks ========= */
@media (max-width:900px){
  nav{ padding:1rem 5%; }
  .logo{ height:56px; }
  .nav-links{ gap:.9rem; }
}
@media (max-width:640px){
  .nav-links a{ font-size:.95rem; }
}

/* ========= Optional subpage hero ========= */
.page-hero{ text-align:center; padding:24px 0 12px; }
.page-hero img{
  max-width:720px; width:100%; height:auto; object-fit:contain;
  border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.08); margin:0 auto;
}
/* Back link style */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  margin-bottom: 1rem;
  transition: color 0.2s ease;
}

.back-link:hover {
  color: var(--primary-d);
  text-decoration: underline;
}
.back-link::before {
  content: "←";
  font-size: 1.1rem;
}