/* ============================================
   components/Footer.css
   ============================================ */

.footer-simple { background: #1a2a3a; color: #fff; padding: 1.5rem 1rem; border-top: 3px solid #4A90E2; }
.footer-simple-content { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.footer-simple-social { display: flex; gap: 1rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.social-item { display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: rgba(255,255,255,0.05); border: 2px solid rgba(255,255,255,0.1); transition: all 0.3s ease; cursor: pointer; }
.social-item img { width: 2rem; height: 2rem; }
.social-item:hover { transform: scale(1.15); background: rgba(255,255,255,0.15); }
.footer-simple-copy p { font-size: 0.8rem; opacity: 0.6; margin: 0; }

.footer-image { position: relative; margin: 1.5rem 0 0 0; overflow: hidden; display: flex; align-items: flex-end; min-height: 200px; background: #1a2a3a; border-radius: 16px; }
.footer-image-background { position: absolute; inset: 0; }
.footer-image-background img { width: 100%; height: 100%; object-fit: cover; }
.footer-image-content { position: relative; z-index: 1; width: 100%; padding: 1.5rem; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); }
.footer-image-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.footer-image-links a { color: #fff; background: rgba(255,255,255,0.1); padding: 0.5rem; border-radius: 12px; text-align: center; }
.footer-image-links a:hover { background: rgba(255,255,255,0.2); }

@media(max-width: 767px) { 
    .footer-image-links { grid-template-columns: repeat(2, 1fr); } 
    .footer-image-links a:nth-child(n+7) { display: none; } 
    .social-item { width: 2.5rem; height: 2.5rem; }
    .social-item img { width: 1.6rem; height: 1.6rem; }
}