/* =============================================
   SVG ICON SIZING & RENDERING
   =============================================
   Rule: small utility icons (top-bar, footer-contact) → fill-based.
         Larger featured icons (service, why-us, contact-form) → stroke-based via inline style.
         Social / whatsapp → stroke-based outlines.
   ============================================= */

/* Top-bar utility icons: fill gold, 13px */
.top-bar-item svg {
  fill: var(--accent);
  stroke: none;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  display: block;
}

/* Footer contact icons: fill gold, 14px */
.footer-contact-item svg {
  fill: var(--accent);
  stroke: none;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Social link icons in footer: stroke white, 16px */
.social-links a svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: rgba(255,255,255,.7);
}
.social-links a:hover svg { stroke: #fff; }

/* WhatsApp float: stroke white (inline style sets size) */
.whatsapp-float svg { fill: none; stroke: #fff; }

/* Logo icon: fill gold for solid look on dark background */
.logo-icon svg { fill: var(--accent); stroke: none; width: 30px; height: 30px; }

/* Service / why-us / contact-form icons: stroke-based, sized via inline style */
.service-icon svg,
.why-icon-wrap svg,
.contact-icon svg,
.about-mv-icon svg,
.about-feature-icon svg,
.big-icon svg { display: block; }

/* Sidebar small icons */
.related-item svg,
.sidebar-phones a svg,
.team-links a svg { display: block; }

/* Flex centering for icon wrapper divs */
.service-icon,
.why-icon-wrap,
.contact-icon,
.big-icon,
.logo-icon,
.about-mv-icon,
.about-feature-icon { display: flex; align-items: center; justify-content: center; }

/* Hero badge dot — replaces SVG star icon */
.badge-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}

/* =============================================
   PAGE HERO
   ============================================= */
.page-hero {
  background: linear-gradient(135deg,var(--dark) 0%,var(--primary) 100%);
  color:#fff;
  padding:70px 0 55px;
  position:relative;
  overflow:hidden;
}
.page-hero::after {
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--accent),transparent);
}
.page-hero h1 { font-size:2.6rem;font-weight:800;margin-bottom:.8rem }
.page-hero p  { color:rgba(255,255,255,.75);font-size:1.05rem;max-width:600px }
.breadcrumb   {
  display:flex;align-items:center;gap:6px;font-size:.82rem;
  color:rgba(255,255,255,.5);margin-bottom:1rem;flex-wrap:wrap;
}
.breadcrumb a { color:var(--accent) }
.breadcrumb a:hover { color:#fff }
.breadcrumb span { color:rgba(255,255,255,.35) }
@media(max-width:600px){ .page-hero h1 { font-size:1.9rem } }

/* =============================================
   INNER PAGE MAIN
   ============================================= */
.page-main { padding:60px 0 80px }
.entry-content { line-height:1.85;color:#444 }
.entry-content h2 { color:var(--primary);margin:2rem 0 .8rem;font-size:1.6rem }
.entry-content h3 { color:var(--primary);margin:1.5rem 0 .6rem;font-size:1.25rem }
.entry-content p  { margin-bottom:1.2rem }
.entry-content ul { list-style:disc;padding-left:1.5rem;margin-bottom:1.2rem }
.entry-content a  { color:var(--accent) }

/* =============================================
   ARCHIVE GRID
   ============================================= */
.archive-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:28px;
  margin-top:2rem;
}

/* =============================================
   SINGLE CPT LAYOUT
   ============================================= */
.single-cpt-layout { display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start }
.single-cpt-thumb { border-radius:12px;overflow:hidden;margin-bottom:2rem }
.single-cpt-thumb img { width:100%;height:auto;display:block }
.single-cpt-icon-banner {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:220px;
  background:linear-gradient(135deg,var(--primary),var(--dark));
  border-radius:12px;margin-bottom:2rem;gap:1rem;
}
.single-cpt-tags { margin-top:2rem }
.single-cpt-tags h4 { color:var(--primary);font-size:1rem;margin-bottom:.8rem }
.tag-list { display:flex;flex-wrap:wrap;gap:8px }
.tag-list span { background:var(--light);color:var(--primary);font-size:.82rem;padding:5px 14px;border-radius:20px;font-weight:600 }

/* Sidebar */
.single-cpt-sidebar { display:flex;flex-direction:column;gap:24px }
.sidebar-cta { background:var(--light);border-radius:12px;padding:28px }
.sidebar-cta h4 { color:var(--primary);font-size:1.05rem;font-weight:700;margin-bottom:.5rem }
.sidebar-cta p  { color:#666;font-size:.9rem;margin-bottom:1.2rem }
.sidebar-phones { margin-top:1rem }
.sidebar-phones a { display:flex;align-items:center;gap:6px;color:var(--primary);font-weight:600;font-size:.9rem;margin-top:6px }
.sidebar-related { background:#fff;border:1px solid #e8e8e8;border-radius:12px;padding:24px }
.sidebar-related h4 { color:var(--primary);font-size:1rem;font-weight:700;margin-bottom:1rem }
.related-item {
  display:flex;align-items:center;gap:10px;
  padding:8px 0;border-bottom:1px solid #f0f0f0;
  color:var(--text);font-size:.9rem;transition:var(--transition);
}
.related-item:last-child { border-bottom:none }
.related-item:hover { color:var(--accent) }
.related-item svg { flex-shrink:0;width:18px;height:18px }
.sidebar-project-info { background:var(--primary);color:#fff;border-radius:12px;padding:28px }
.sidebar-project-info h4 { color:var(--accent);font-size:1rem;margin-bottom:1rem }
.project-meta { display:flex;flex-direction:column;gap:10px }
.project-meta li { display:flex;justify-content:space-between;align-items:flex-start;font-size:.88rem;gap:10px }
.project-meta li strong { color:rgba(255,255,255,.6);min-width:70px }
.project-meta li span  { color:#fff;font-weight:600;text-align:right }
@media(max-width:900px){ .single-cpt-layout { grid-template-columns:1fr } }

/* =============================================
   SERVICE CARD THUMBNAIL (archive + homepage)
   — Base rules now in style.css; only overrides here
   ============================================= */

/* =============================================
   ABOUT PAGE
   ============================================= */
.about-mv-grid { display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:0 0 3rem }
.about-mv-card { background:var(--light);border-radius:12px;overflow:hidden;padding:0;border-top:3px solid var(--accent) }
.about-mv-img { height:200px;overflow:hidden }
.about-mv-img img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s }
.about-mv-card:hover .about-mv-img img { transform:scale(1.04) }
.about-mv-icon { width:56px;height:56px;background:var(--primary);border-radius:10px;margin:1.4rem 28px .8rem }
.about-mv-card h3 { color:var(--primary);font-size:1.2rem;font-weight:700;margin:0 28px .6rem }
.about-mv-card p  { color:#666;line-height:1.7;margin:0 28px 28px }

.about-stats {
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  background:linear-gradient(135deg,var(--primary),var(--dark));
  border-radius:14px;padding:40px;margin-bottom:0;
}
.about-stat-box { text-align:center }
.about-stat-box .num  { font-size:2.5rem;font-weight:800;color:var(--accent) }
.about-stat-box .desc { font-size:.8rem;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.5px;margin-top:4px }

.about-features-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px }
.about-feature-card {
  background:#fff;border:1px solid #e8e8e8;border-radius:12px;
  overflow:hidden;padding:0;text-align:center;transition:var(--transition);
}
.about-feature-card:hover { box-shadow:var(--shadow);transform:translateY(-4px) }
.about-feature-img { height:150px;overflow:hidden }
.about-feature-img img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s }
.about-feature-card:hover .about-feature-img img { transform:scale(1.05) }
.about-feature-icon {
  width:52px;height:52px;background:var(--primary);border-radius:50%;
  margin:1.2rem auto .8rem;
}
.about-feature-card h4 { color:var(--primary);font-size:.95rem;font-weight:700;margin-bottom:.4rem }
.about-feature-card p  { color:#666;font-size:.85rem;padding:0 16px 20px }

/* Team */
.team-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px }
.team-card { background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);transition:var(--transition) }
.team-card:hover { transform:translateY(-5px) }
.team-avatar { height:200px;background:linear-gradient(135deg,var(--primary),#2a5a8c);display:flex;align-items:center;justify-content:center }
.team-avatar img { width:100%;height:100%;object-fit:cover }
.team-initials { color:var(--accent);font-size:2.5rem;font-weight:800 }
.team-info { padding:20px }
.team-info h4 { color:var(--primary);font-size:1rem;font-weight:700 }
.team-role { color:var(--accent);font-size:.82rem;font-weight:600;display:block;margin:3px 0 8px }
.team-info p { color:#666;font-size:.85rem;margin-bottom:.8rem }
.team-links { display:flex;gap:8px }
.team-links a { width:30px;height:30px;background:var(--light);border-radius:6px;display:flex;align-items:center;justify-content:center;transition:var(--transition) }
.team-links a:hover { background:var(--accent) }
.team-links a svg { width:14px;height:14px }

@media(max-width:768px){
  .about-mv-grid { grid-template-columns:1fr }
  .about-stats { grid-template-columns:1fr 1fr;gap:16px;padding:28px }
}

/* =============================================
   BLOG
   ============================================= */
.blog-layout { display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start }
.blog-posts   { display:flex;flex-direction:column;gap:32px }
.blog-card {
  background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);
  display:grid;grid-template-columns:280px 1fr;transition:var(--transition);
}
.blog-card:hover { box-shadow:0 12px 40px rgba(0,0,0,.14) }
.blog-thumb { display:block;overflow:hidden;background:linear-gradient(135deg,var(--primary),#2a5a8c) }
.blog-thumb img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s }
.blog-card:hover .blog-thumb img { transform:scale(1.04) }
.blog-thumb-placeholder { display:flex;align-items:center;justify-content:center;min-height:200px }
.blog-card-body { padding:28px }
.blog-meta { display:flex;gap:12px;font-size:.8rem;color:#888;margin-bottom:.8rem }
.blog-title { font-size:1.2rem;color:var(--primary);font-weight:700;margin-bottom:.7rem }
.blog-title a { color:inherit }
.blog-title a:hover { color:var(--accent) }
.blog-card-body p { color:#666;font-size:.9rem;margin-bottom:1rem }
.blog-sidebar { position:sticky;top:100px }
.single-post-content { min-width:0 }
.pagination { margin-top:3rem }
.pagination ul { display:flex;gap:6px;list-style:none;flex-wrap:wrap }
.pagination ul li a,
.pagination ul li span { display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--radius);border:1px solid #e0e0e0;font-size:.88rem;color:var(--text);transition:var(--transition) }
.pagination ul li .current { background:var(--accent);color:#fff;border-color:var(--accent) }
.pagination ul li a:hover { background:var(--primary);color:#fff;border-color:var(--primary) }
@media(max-width:900px){
  .blog-layout { grid-template-columns:1fr }
  .blog-card   { grid-template-columns:1fr }
  .blog-thumb  { height:200px }
}

/* =============================================
   FORM SUCCESS + MAP
   ============================================= */
.form-success { background:#d4edda;color:#155724;padding:14px 20px;border-radius:var(--radius);margin-bottom:1.5rem;font-weight:600 }
.map-container iframe { width:100%;height:350px;display:block;border:0 }
