/* ─── IAG Global Styles ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

:root {
  --iag-primary   : #C8102E;
  --iag-secondary : #1A2B4A;
  --iag-dark      : #0D1B2A;
  --iag-light     : #F5F7FA;
  --iag-white     : #FFFFFF;
  --iag-font      : 'DM Sans', sans-serif;
  --iag-container : 1200px;
  --iag-radius    : 4px;
}

.iag-container { max-width:var(--iag-container); margin:0 auto; padding:0 24px; box-sizing:border-box; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.iag-btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--iag-primary); color:#fff !important;
  font-family:var(--iag-font); font-size:14px; font-weight:600;
  letter-spacing:.5px; padding:12px 28px; border-radius:var(--iag-radius);
  border:none; cursor:pointer; text-decoration:none !important;
  transition:background .2s, transform .2s;
}
.iag-btn-primary:hover { background:#a50d24; transform:translateY(-1px); }

/* ── Modal ───────────────────────────────────────────────────────── */
.iag-modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.6); z-index:99999;
  align-items:center; justify-content:center;
}
.iag-modal-overlay.active { display:flex; }
.iag-modal {
  background:#fff; border-radius:8px; padding:40px;
  width:90%; max-width:520px; position:relative;
  animation:iagModalIn .25s ease;
}
@keyframes iagModalIn { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
.iag-modal-close { position:absolute; top:16px; right:16px; background:none; border:none; font-size:24px; cursor:pointer; color:#666; line-height:1; }
.iag-modal h3 { font-family:var(--iag-font); font-size:22px; font-weight:700; color:var(--iag-secondary); margin:0 0 8px; }
.iag-modal > div > p { font-family:var(--iag-font); font-size:14px; color:#666; margin:0 0 24px; }
.iag-form-group { margin-bottom:16px; }
.iag-form-group label { display:block; font-family:var(--iag-font); font-size:13px; font-weight:600; color:var(--iag-secondary); margin-bottom:6px; }
.iag-form-group input,
.iag-form-group select,
.iag-form-group textarea { width:100%; padding:10px 14px; border:1.5px solid #e0e0e0; border-radius:var(--iag-radius); font-family:var(--iag-font); font-size:14px; color:var(--iag-dark); box-sizing:border-box; transition:border .2s; background:#fff; }
.iag-form-group input:focus,
.iag-form-group select:focus,
.iag-form-group textarea:focus { outline:none; border-color:var(--iag-primary); }
.iag-form-group textarea { height:100px; resize:vertical; }
.iag-form-submit { width:100%; padding:13px; background:var(--iag-primary); color:#fff; border:none; border-radius:var(--iag-radius); font-family:var(--iag-font); font-size:15px; font-weight:600; cursor:pointer; transition:background .2s; }
.iag-form-submit:hover { background:#a50d24; }
.iag-form-success { display:none; text-align:center; padding:20px 0; }
.iag-form-success .check { font-size:48px; margin-bottom:12px; display:block; }
.iag-form-success h4 { font-family:var(--iag-font); font-size:20px; font-weight:700; color:var(--iag-secondary); margin:0 0 8px; }
.iag-form-success p { font-family:var(--iag-font); font-size:14px; color:#666; margin:0; }

/* ── Page Hero ───────────────────────────────────────────────────── */
.iag-page-hero {
  position:relative;
  background:linear-gradient(135deg,var(--iag-dark) 0%,var(--iag-secondary) 100%);
  padding:100px 0 60px; overflow:hidden;
}
.iag-page-hero-overlay {
  position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.iag-page-hero .iag-container { position:relative; z-index:1; }
.iag-breadcrumb { display:flex; gap:8px; align-items:center; font-size:12px; color:rgba(255,255,255,.5); margin-bottom:16px; padding:0; list-style:none; }
.iag-breadcrumb a { color:rgba(255,255,255,.5); text-decoration:none; }
.iag-breadcrumb a:hover { color:#fff; }
.iag-page-hero h1 { font-family:var(--iag-font); font-size:clamp(28px,5vw,48px); font-weight:800; color:#fff; margin:0 0 12px; line-height:1.1; }
.iag-page-hero > .iag-container > p { font-family:var(--iag-font); font-size:16px; color:rgba(255,255,255,.65); margin:0; font-style:italic; }

/* ════════════════════════════════════════════════════════════════════
   INTRO TEXT
   ════════════════════════════════════════════════════════════════════ */
.iag-projects-intro-text { padding:60px 0 0; background:#fff; }
.iag-projects-intro-copy {
  max-width:820px; margin:0 auto;
  padding-bottom:50px;
  border-bottom:1px solid #eaecef;
}
.iag-projects-intro-copy p {
  font-family:var(--iag-font) !important;
  font-size:15px !important; color:#555 !important;
  line-height:1.8 !important; margin:0 0 16px !important;
}
.iag-projects-intro-copy p:last-child { margin-bottom:0 !important; }
.iag-projects-intro-copy strong { color:var(--iag-secondary) !important; font-weight:700 !important; }

/* ════════════════════════════════════════════════════════════════════
   FILTERS
   ════════════════════════════════════════════════════════════════════ */
.iag-projects-section { padding:60px 0 80px; background:#fff; }

.iag-projects-filters {
  display:flex !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  margin-bottom:40px !important;
  padding:0 !important;
  list-style:none !important;
}
.iag-filter-btn {
  font-family:var(--iag-font) !important;
  font-size:13px !important; font-weight:600 !important;
  padding:8px 20px !important; border-radius:20px !important;
  border:1.5px solid #ddd !important;
  background:#fff !important; color:#666 !important;
  cursor:pointer !important; transition:all .2s !important;
}
.iag-filter-btn:hover,
.iag-filter-btn.active {
  background:var(--iag-secondary) !important;
  color:#fff !important;
  border-color:var(--iag-secondary) !important;
}

/* ════════════════════════════════════════════════════════════════════
   PROJECT GRID
   ════════════════════════════════════════════════════════════════════ */
.iag-projects-grid {
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:28px !important;
}

/* hidden by filter JS */
.iag-project-card.is-hidden { display:none !important; }

.iag-project-card {
  border:1px solid #eaecef !important;
  border-radius:8px !important;
  overflow:hidden !important;
  background:#fff !important;
  transition:box-shadow .3s, transform .3s !important;
  display:flex !important;
  flex-direction:column !important;
}
.iag-project-card:hover {
  box-shadow:0 12px 40px rgba(0,0,0,.1) !important;
  transform:translateY(-4px) !important;
}

/* ── Card top (image + badges) ───────────────────────────────────── */
.iag-project-card-top { position:relative !important; }

.iag-project-img-placeholder {
  height:180px !important;
  background:linear-gradient(135deg,var(--iag-secondary) 0%,var(--iag-dark) 100%) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-size:60px !important;
}

.iag-project-top-meta {
  position:absolute !important;
  top:12px !important; left:12px !important;
  display:flex !important; flex-direction:column !important; gap:6px !important;
  align-items:flex-start !important;
}

/* Status badges */
.iag-cs-badge {
  display:inline-block !important;
  font-family:var(--iag-font) !important;
  font-size:9.5px !important; font-weight:700 !important;
  letter-spacing:1.5px !important; text-transform:uppercase !important;
  padding:4px 10px !important; border-radius:3px !important;
  line-height:1.4 !important;
}
.iag-badge-green  { background:rgba(0,150,80,.15)  !important; color:#007840 !important; }
.iag-badge-blue   { background:rgba(26,43,74,.15)   !important; color:var(--iag-secondary) !important; }
.iag-badge-ongoing {
  background:rgba(200,100,0,.12) !important;
  color:#b85c00 !important;
}

.iag-project-tag {
  display:inline-block !important;
  font-family:var(--iag-font) !important;
  font-size:9px !important; font-weight:700 !important;
  letter-spacing:1px !important; text-transform:uppercase !important;
  color:rgba(255,255,255,.75) !important;
  background:rgba(0,0,0,.35) !important;
  padding:3px 8px !important; border-radius:3px !important;
  backdrop-filter:blur(4px) !important;
}

/* ── Card body ───────────────────────────────────────────────────── */
.iag-project-card-body {
  padding:24px !important;
  display:flex !important;
  flex-direction:column !important;
  flex:1 !important;
}

.iag-cs-meta {
  display:flex !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  margin-bottom:10px !important;
}
.iag-cs-meta span {
  font-family:var(--iag-font) !important;
  font-size:10px !important; font-weight:700 !important;
  letter-spacing:1.2px !important; color:#aaa !important;
  text-transform:uppercase !important;
}

.iag-project-card-body h3 {
  font-family:var(--iag-font) !important;
  font-size:15.5px !important; font-weight:800 !important;
  color:var(--iag-secondary) !important;
  margin:0 0 10px !important; line-height:1.35 !important;
}

.iag-project-card-body > p {
  font-family:var(--iag-font) !important;
  font-size:13px !important; color:#666 !important;
  line-height:1.7 !important; margin:0 0 18px !important;
  flex:1 !important;
}

/* ── Metrics row ─────────────────────────────────────────────────── */
.iag-project-meta-row {
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:8px !important;
  margin-bottom:18px !important;
}
.iag-project-meta-item {
  background:var(--iag-light) !important;
  border-radius:var(--iag-radius) !important;
  padding:10px 8px !important;
  display:flex !important; flex-direction:column !important; gap:3px !important;
  text-align:center !important;
}
.iag-project-meta-item strong {
  font-family:var(--iag-font) !important;
  font-size:9px !important; font-weight:700 !important;
  letter-spacing:1.5px !important; color:#bbb !important;
  text-transform:uppercase !important; display:block !important;
}
.iag-project-meta-item span {
  font-family:var(--iag-font) !important;
  font-size:11.5px !important; font-weight:700 !important;
  color:var(--iag-secondary) !important; display:block !important;
  line-height:1.3 !important;
}

/* ── Enquire link ────────────────────────────────────────────────── */
.iag-btn-link {
  background:none !important;
  border:none !important;
  padding:0 !important;
  font-family:var(--iag-font) !important;
  font-size:13px !important; font-weight:700 !important;
  color:var(--iag-primary) !important;
  cursor:pointer !important;
  letter-spacing:.3px !important;
  transition:color .2s !important;
  text-align:left !important;
  display:inline-block !important;
}
.iag-btn-link:hover { color:#a50d24 !important; }

/* ════════════════════════════════════════════════════════════════════
   TENDERS CTA
   ════════════════════════════════════════════════════════════════════ */
.iag-tenders-cta { background:var(--iag-light); padding:60px 0; }
.iag-tenders-cta-inner {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:40px !important;
  flex-wrap:wrap !important;
}
.iag-tenders-cta-text h2 {
  font-family:var(--iag-font) !important;
  font-size:26px !important; font-weight:800 !important;
  color:var(--iag-secondary) !important; margin:0 0 8px !important;
}
.iag-tenders-cta-text p {
  font-family:var(--iag-font) !important;
  font-size:14px !important; color:#666 !important;
  line-height:1.7 !important; margin:0 !important; max-width:560px !important;
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .iag-projects-grid { grid-template-columns:repeat(2,1fr) !important; }
}
@media(max-width:600px){
  .iag-projects-grid    { grid-template-columns:1fr !important; }
  .iag-tenders-cta-inner { flex-direction:column !important; align-items:flex-start !important; }
  .iag-project-meta-row { grid-template-columns:repeat(3,1fr) !important; }
}
