/* ============================================
   location.css — Location Section Styles
   Nihon Studio
   ============================================ */

.location {
  padding: 80px 0;
  background: var(--color-bg-section);
}

/* Layout dua kolom: peta kiri, teks kanan */
.location-container {
  display: flex;
  align-items: center;
  gap: 48px;
}

/* ---------- Google Maps Wrapper ---------- */
.map-wrapper {
  flex: 0 0 auto;
  width: clamp(260px, 40%, 440px);
  height: 280px;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 2px solid var(--color-border);
}

.map-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ---------- Location Info ---------- */
.location-info {
  flex: 1;
}

.location-info .section-title {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  color: var(--color-primary);
  margin-bottom: 16px;
}

.location-info p {
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  color: var(--color-text-muted);
  line-height: 1.9;
  max-width: 500px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .location-container {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }

  .map-wrapper {
    width: 100%;
    height: 240px;
  }
}